aynish/shaarli-web-extension
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Merge pull request #1 from ikipatang/feat-action-page

Browse source 
Feat action page
This commit is contained in:
ikipatang 2017-11-28 13:56:43 +01:00 committed by GitHub
parent 0b8d18ff74 09ffed5cbc
commit 89c80a4b17
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 169 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
CHANGELOG.md
View file

@ -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

5
manifest.json
View file

@ -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"
} }
} }

53
src/background.js
View file

@ -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);

78
src/options/options.css
View file

@ -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;
}
}*/

21
src/options/options.html
View file

@ -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>&nbsp;</span>
<button id="save-button" type="submit">Save preferences</button>
</div>
</div>
<script src="options.js"></script> <script src="options.js"></script>
</body> </body>

38
src/options/options.js
View file

@ -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
src/storage.js
View file

@ -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);
} }
} }