commit
						89c80a4b17
					
				| 
						 | 
					@ -6,6 +6,15 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 | 
				
			||||||
 | 
					
 | 
				
			||||||
## [Unreleased]
 | 
					## [Unreleased]
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					## Changed
 | 
				
			||||||
 | 
					- Improved share current tab function
 | 
				
			||||||
 | 
					- Improved browser storage initialilisation
 | 
				
			||||||
 | 
					- Better looking settings form
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					## Added
 | 
				
			||||||
 | 
					- New share button in address bar       
 | 
				
			||||||
 | 
					  Share button in address bar can be enabled in settings, disabled by default
 | 
				
			||||||
 | 
					
 | 
				
			||||||
## [0.0.2][] - 2017-11-23
 | 
					## [0.0.2][] - 2017-11-23
 | 
				
			||||||
- Create extension settings
 | 
					- Create extension settings
 | 
				
			||||||
  - Allow to set your Shaarli URL
 | 
					  - Allow to set your Shaarli URL
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -20,5 +20,10 @@
 | 
				
			||||||
  "browser_action": {
 | 
					  "browser_action": {
 | 
				
			||||||
    "default_icon": "resources/icons/icon-24.png",
 | 
					    "default_icon": "resources/icons/icon-24.png",
 | 
				
			||||||
    "default_title": "Share"
 | 
					    "default_title": "Share"
 | 
				
			||||||
 | 
					  },
 | 
				
			||||||
 | 
					  "page_action": {
 | 
				
			||||||
 | 
					    "browser_style": false,
 | 
				
			||||||
 | 
					    "default_icon": "resources/icons/icon-24.png",
 | 
				
			||||||
 | 
					    "default_title": "Share"
 | 
				
			||||||
  }
 | 
					  }
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -17,22 +17,49 @@ function openInPopup(url) {
 | 
				
			||||||
 * Share Current Tab
 | 
					 * Share Current Tab
 | 
				
			||||||
 * @return {void}       -
 | 
					 * @return {void}       -
 | 
				
			||||||
 */
 | 
					 */
 | 
				
			||||||
function shareCurrentTab() {
 | 
					function shareCurrentTab(tab) {
 | 
				
			||||||
  browser.tabs.query({
 | 
					  const url = tab.url;
 | 
				
			||||||
    active: true,
 | 
					  const title = tab.title || url;
 | 
				
			||||||
    currentWindow: true,
 | 
					  browser.storage.local.get().then((storage) => {
 | 
				
			||||||
  }).then((tabs) => {
 | 
					    if(!storage.url){
 | 
				
			||||||
    const url = tabs[0].url;
 | 
					      browser.runtime.openOptionsPage();
 | 
				
			||||||
    const title = tabs[0].title || url;
 | 
					      return;
 | 
				
			||||||
    browser.storage.local.get('url').then((storage) => {
 | 
					    }
 | 
				
			||||||
      if(storage.url){
 | 
					    const shareUrl = `${storage.url}?post=${encodeURIComponent(url)}&title=${encodeURIComponent(title)}&source=bookmarklet`;
 | 
				
			||||||
        const shareUrl = `${storage.url}?post=${encodeURIComponent(url)}&title=${encodeURIComponent(title)}&source=bookmarklet`;
 | 
					    openInPopup(shareUrl);
 | 
				
			||||||
        openInPopup(shareUrl);
 | 
					 | 
				
			||||||
      }else{
 | 
					 | 
				
			||||||
        browser.runtime.openOptionsPage()
 | 
					 | 
				
			||||||
      }
 | 
					 | 
				
			||||||
    });
 | 
					 | 
				
			||||||
  });
 | 
					  });
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					/**
 | 
				
			||||||
 | 
					 * Show Page Action on current page if activated
 | 
				
			||||||
 | 
					 * @param  {string} tabId - Current tab id
 | 
				
			||||||
 | 
					 * @return {void}         -
 | 
				
			||||||
 | 
					 */
 | 
				
			||||||
 | 
					function showPageAction(tabId){
 | 
				
			||||||
 | 
					  browser.storage.local.get().then((storage) => {
 | 
				
			||||||
 | 
					    storage.pageAction ? browser.pageAction.show(tabId) : browser.pageAction.hide(tabId);
 | 
				
			||||||
 | 
					  });
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					/**
 | 
				
			||||||
 | 
					 * Show page action with given active information
 | 
				
			||||||
 | 
					 * @param  {object} activeInfo  -
 | 
				
			||||||
 | 
					 * @return {void}               -
 | 
				
			||||||
 | 
					 */
 | 
				
			||||||
 | 
					function tabActivation(activeInfo){
 | 
				
			||||||
 | 
					  showPageAction(activeInfo.tabId);
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					/*
 | 
				
			||||||
 | 
					Initialize
 | 
				
			||||||
 | 
					 */
 | 
				
			||||||
 | 
					browser.tabs.query({active: true, currentWindow: true}).then((tabs) => {
 | 
				
			||||||
 | 
					  showPageAction(tabs[0].id);
 | 
				
			||||||
 | 
					});
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					/*
 | 
				
			||||||
 | 
					Listeners
 | 
				
			||||||
 | 
					 */
 | 
				
			||||||
 | 
					browser.tabs.onActivated.addListener(tabActivation);
 | 
				
			||||||
browser.browserAction.onClicked.addListener(shareCurrentTab);
 | 
					browser.browserAction.onClicked.addListener(shareCurrentTab);
 | 
				
			||||||
 | 
					browser.pageAction.onClicked.addListener(shareCurrentTab);
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -1,18 +1,70 @@
 | 
				
			||||||
 | 
					.main{
 | 
				
			||||||
body {
 | 
					  font: 14px sans-serif;
 | 
				
			||||||
  width: 25em;
 | 
					 | 
				
			||||||
  font-family: "Open Sans Light", sans-serif;
 | 
					 | 
				
			||||||
  font-size: 0.9em;
 | 
					 | 
				
			||||||
  font-weight: 300;
 | 
					 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
input#url {
 | 
					.main .row{
 | 
				
			||||||
  margin: 0.5em;
 | 
					  text-align: left;
 | 
				
			||||||
  width: 50em;
 | 
					 | 
				
			||||||
  height: 2.5em;
 | 
					 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
input {
 | 
					/* The form title */
 | 
				
			||||||
  width: 20em;
 | 
					
 | 
				
			||||||
  height: 2.5em;
 | 
					.main .row > label span{
 | 
				
			||||||
 | 
					  color: #1a1a1a;
 | 
				
			||||||
 | 
					  width: 100em;
 | 
				
			||||||
 | 
					  vertical-align: center;
 | 
				
			||||||
 | 
					  padding-left: 5px;
 | 
				
			||||||
 | 
					  padding-right: 30px;
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.main input{
 | 
				
			||||||
 | 
					  color:  #1a1a12;
 | 
				
			||||||
 | 
					  width: 31em;
 | 
				
			||||||
 | 
					  box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.08);
 | 
				
			||||||
 | 
					  padding: 5px;
 | 
				
			||||||
 | 
					  border: 1px solid #dbdbdb;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.main input[type=checkbox]{
 | 
				
			||||||
 | 
					  box-shadow: none;
 | 
				
			||||||
 | 
					  width: auto;
 | 
				
			||||||
 | 
					  margin-top: 13px;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					.main button{
 | 
				
			||||||
 | 
					  display: block;
 | 
				
			||||||
 | 
					  border-radius: 2px;
 | 
				
			||||||
 | 
					  font-weight: bold;
 | 
				
			||||||
 | 
					  padding: 8px 22px;
 | 
				
			||||||
 | 
					  margin-left: 10em;
 | 
				
			||||||
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					/*	Making the form responsive. Remove this media query
 | 
				
			||||||
 | 
					  if you don't need the form to work on mobile devices. */
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					/*@media (max-width: 600px) {
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					  .main{
 | 
				
			||||||
 | 
					      padding: 30px;
 | 
				
			||||||
 | 
					      max-width: 480px;
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					  .main .row{
 | 
				
			||||||
 | 
					      max-width: 300px;
 | 
				
			||||||
 | 
					      margin: 25px auto;
 | 
				
			||||||
 | 
					      text-align: left;
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					  .main .row > label span{
 | 
				
			||||||
 | 
					      display: block;
 | 
				
			||||||
 | 
					      text-align: left;
 | 
				
			||||||
 | 
					      padding: 0 0 15px;
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					  .main input[type=checkbox]{
 | 
				
			||||||
 | 
					      margin-top:0;
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					  .main button{
 | 
				
			||||||
 | 
					      margin: 0;
 | 
				
			||||||
 | 
					  }
 | 
				
			||||||
 | 
					}*/
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -7,9 +7,24 @@
 | 
				
			||||||
  </head>
 | 
					  </head>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
  <body>
 | 
					  <body>
 | 
				
			||||||
 | 
					    <div class="main">
 | 
				
			||||||
    <div>URL: <input id="url" type="text"/></div>
 | 
					      <div class="row">
 | 
				
			||||||
    <input type="button" value="Save preferences" id="save-button"/>
 | 
					        <label>
 | 
				
			||||||
 | 
					          <span>Shaarli URL</span>
 | 
				
			||||||
 | 
					          <input id="url" type="text" name="url">
 | 
				
			||||||
 | 
					        </label>
 | 
				
			||||||
 | 
					      </div>
 | 
				
			||||||
 | 
					      <div class="row">
 | 
				
			||||||
 | 
					        <label>
 | 
				
			||||||
 | 
					          <span>Address bar</span>
 | 
				
			||||||
 | 
					          <input id="pageAction" type="checkbox" name="pageAction" checked>
 | 
				
			||||||
 | 
					        </label>
 | 
				
			||||||
 | 
					      </div>
 | 
				
			||||||
 | 
					      <div class="row">
 | 
				
			||||||
 | 
					        <span> </span>
 | 
				
			||||||
 | 
					        <button id="save-button" type="submit">Save preferences</button>
 | 
				
			||||||
 | 
					      </div>
 | 
				
			||||||
 | 
					    </div>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
    <script src="options.js"></script>
 | 
					    <script src="options.js"></script>
 | 
				
			||||||
  </body>
 | 
					  </body>
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -1,26 +1,40 @@
 | 
				
			||||||
/*
 | 
					/**
 | 
				
			||||||
Store options UI using browser.storage.local.
 | 
					 * Store options UI using browser.storage.local.
 | 
				
			||||||
*/
 | 
					 * @return {void}       -
 | 
				
			||||||
 | 
					 */
 | 
				
			||||||
function storeSettings() {
 | 
					function storeSettings() {
 | 
				
			||||||
  const url = document.querySelector("#url");
 | 
					  const settings = {
 | 
				
			||||||
  // console.log('storeSettings url');
 | 
					    url: document.querySelector("#url").value,
 | 
				
			||||||
  // console.log(url);
 | 
					    pageAction: document.querySelector("#pageAction").checked,
 | 
				
			||||||
  browser.storage.local.set({
 | 
					  };
 | 
				
			||||||
    url: url.value,
 | 
					  // console.log('storeSettings settings');
 | 
				
			||||||
  });
 | 
					  // console.log(settings);
 | 
				
			||||||
 | 
					  browser.storage.local.set(settings);
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
/*
 | 
					/**
 | 
				
			||||||
Update the options UI with the settings values retrieved from storage,
 | 
					 * Update the options UI with the settings values retrieved from storage,
 | 
				
			||||||
or the default settings if the stored settings are empty.
 | 
					 * or the default settings if the stored settings are empty.
 | 
				
			||||||
*/
 | 
					 * @param  {object} restoredSettings  -
 | 
				
			||||||
 | 
					 * @return {void}                     -
 | 
				
			||||||
 | 
					 */
 | 
				
			||||||
function updateUI(restoredSettings) {
 | 
					function updateUI(restoredSettings) {
 | 
				
			||||||
  const url = document.querySelector("#url");
 | 
					  const url = document.querySelector("#url");
 | 
				
			||||||
 | 
					  url.value = restoredSettings.url;
 | 
				
			||||||
  // console.log('restoredSettings url');
 | 
					  // console.log('restoredSettings url');
 | 
				
			||||||
  // console.log(url);
 | 
					  // console.log(url);
 | 
				
			||||||
  url.value = restoredSettings.url || "";
 | 
					
 | 
				
			||||||
 | 
					  const pageAction = document.querySelector("#pageAction");
 | 
				
			||||||
 | 
					  pageAction.checked = restoredSettings.pageAction;
 | 
				
			||||||
 | 
					  // console.log('restoredSettings pageAction');
 | 
				
			||||||
 | 
					  // console.log(pageAction);
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					/**
 | 
				
			||||||
 | 
					 * Display on error
 | 
				
			||||||
 | 
					 * @param  {object} error -
 | 
				
			||||||
 | 
					 * @return {void}   -
 | 
				
			||||||
 | 
					 */
 | 
				
			||||||
function onError(e) {
 | 
					function onError(e) {
 | 
				
			||||||
  console.error(e);
 | 
					  console.error(e);
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
| 
						 | 
					@ -3,6 +3,7 @@ Default settings. Initialize storage to these values.
 | 
				
			||||||
*/
 | 
					*/
 | 
				
			||||||
var storage = {
 | 
					var storage = {
 | 
				
			||||||
  url: '',
 | 
					  url: '',
 | 
				
			||||||
 | 
					  pageAction: false,
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
/*
 | 
					/*
 | 
				
			||||||
| 
						 | 
					@ -18,7 +19,7 @@ If we don't, then store the default settings.
 | 
				
			||||||
*/
 | 
					*/
 | 
				
			||||||
function checkStoredSettings(storedSettings) {
 | 
					function checkStoredSettings(storedSettings) {
 | 
				
			||||||
  if (!storedSettings.storage) {
 | 
					  if (!storedSettings.storage) {
 | 
				
			||||||
    browser.storage.local.set({storage});
 | 
					    browser.storage.local.set(storage);
 | 
				
			||||||
  }
 | 
					  }
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
| 
						 | 
					
 | 
				
			||||||
		Loading…
	
		Reference in a new issue