From c4b5b841f1a8bae3f52b5422f1b829454390da52 Mon Sep 17 00:00:00 2001 From: Will Bamberg Date: Wed, 17 Aug 2016 11:21:30 -0700 Subject: [PATCH 1/3] New example, showing insertCSS and removeCSS --- apply-css/README.md | 18 ++++++++++++++++++ apply-css/background.js | 37 +++++++++++++++++++++++++++++++++++++ apply-css/icons/LICENSE | 2 ++ apply-css/icons/off.svg | 1 + apply-css/icons/on.svg | 1 + apply-css/manifest.json | 28 ++++++++++++++++++++++++++++ 6 files changed, 87 insertions(+) create mode 100644 apply-css/README.md create mode 100644 apply-css/background.js create mode 100644 apply-css/icons/LICENSE create mode 100644 apply-css/icons/off.svg create mode 100644 apply-css/icons/on.svg create mode 100644 apply-css/manifest.json diff --git a/apply-css/README.md b/apply-css/README.md new file mode 100644 index 0000000..8e3bfbe --- /dev/null +++ b/apply-css/README.md @@ -0,0 +1,18 @@ +# apply-css + +## What it does + +This extension includes: + +* a background script, "background.js" +* a page action + +It adds the page action to every tab the user opens. Clicking the page action +for a tab applies some CSS using [tabs.insertCSS](https://developer.mozilla.org/docs/Mozilla/Add-ons/WebExtensions/API/tabs/insertCSS). + +Clicking again removes the CSS using [tabs.removeCSS](https://developer.mozilla.org/docs/Mozilla/Add-ons/WebExtensions/API/tabs/removeCSS). + +## What it shows + +* some basic page action functions +* how to apply and remove CSS. diff --git a/apply-css/background.js b/apply-css/background.js new file mode 100644 index 0000000..9397366 --- /dev/null +++ b/apply-css/background.js @@ -0,0 +1,37 @@ +const CSS = "body { border: 20px solid red; }"; + +const TITLE_APPLY = "Apply CSS"; +const TITLE_REMOVE = "Remove CSS"; + +function toggleCSS(tab) { + + function gotTitle(title) { + if (title === TITLE_APPLY) { + chrome.pageAction.setIcon({tabId: tab.id, path: "icons/on.svg"}); + chrome.pageAction.setTitle({tabId: tab.id, title: TITLE_REMOVE}); + chrome.tabs.insertCSS({code: CSS}); + } else { + chrome.pageAction.setIcon({tabId: tab.id, path: "icons/off.svg"}); + chrome.pageAction.setTitle({tabId: tab.id, title: TITLE_APPLY}); + chrome.tabs.removeCSS({code: CSS}); + } + } + + chrome.pageAction.getTitle({tabId: tab.id}, gotTitle) +} + +function initializePageAction(tabId) { + chrome.pageAction.setIcon({tabId, path: "icons/off.svg"}); + chrome.pageAction.setTitle({tabId, title: TITLE_APPLY}); + chrome.pageAction.show(tabId); +} + +chrome.tabs.query({}, (tabs)=> { + for (tab of tabs) { + initializePageAction(tab.id); + } +}); + +chrome.tabs.onUpdated.addListener(initializePageAction); + +chrome.pageAction.onClicked.addListener(toggleCSS); diff --git a/apply-css/icons/LICENSE b/apply-css/icons/LICENSE new file mode 100644 index 0000000..b6c3bc7 --- /dev/null +++ b/apply-css/icons/LICENSE @@ -0,0 +1,2 @@ +These icons are taken from the "Material Design" iconset designed by Google: +https://google.github.io/material-design-icons/. diff --git a/apply-css/icons/off.svg b/apply-css/icons/off.svg new file mode 100644 index 0000000..dd7652f --- /dev/null +++ b/apply-css/icons/off.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apply-css/icons/on.svg b/apply-css/icons/on.svg new file mode 100644 index 0000000..ab1b734 --- /dev/null +++ b/apply-css/icons/on.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/apply-css/manifest.json b/apply-css/manifest.json new file mode 100644 index 0000000..9030f95 --- /dev/null +++ b/apply-css/manifest.json @@ -0,0 +1,28 @@ +{ + + "description": "Adds a page action to toggle applying CSS to pages.", + "manifest_version": 2, + "name": "apply-css", + "version": "1.0", + "homepage_url": "https://github.com/mdn/webextensions-examples/tree/master/apply-css", + + "applications": { + "gecko": { + "id": "apply-css@mozilla.org", + "strict_min_version": "49.0" + } + }, + + "background": { + "scripts": ["background.js"] + }, + + "page_action": { + "default_icon": "icons/off.svg" + }, + + "permissions": [ + "activeTab" + ] + +} From c3eff787afe70d5de8d03e178f732c3dc3d9dd80 Mon Sep 17 00:00:00 2001 From: Will Bamberg Date: Wed, 17 Aug 2016 11:24:35 -0700 Subject: [PATCH 2/3] Added comments to apply-css/background.js --- apply-css/background.js | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/apply-css/background.js b/apply-css/background.js index 9397366..6528f4e 100644 --- a/apply-css/background.js +++ b/apply-css/background.js @@ -1,8 +1,11 @@ const CSS = "body { border: 20px solid red; }"; - const TITLE_APPLY = "Apply CSS"; const TITLE_REMOVE = "Remove CSS"; +/* +Toggle CSS: based on the current title, insert or remove the CSS. +Update the page action's title and icon to reflect its state. +*/ function toggleCSS(tab) { function gotTitle(title) { @@ -20,18 +23,30 @@ function toggleCSS(tab) { chrome.pageAction.getTitle({tabId: tab.id}, gotTitle) } +/* +Initialize the page action: set icon and title, then show. +*/ function initializePageAction(tabId) { chrome.pageAction.setIcon({tabId, path: "icons/off.svg"}); chrome.pageAction.setTitle({tabId, title: TITLE_APPLY}); chrome.pageAction.show(tabId); } +/* +When first loaded, initialize the page action for all tabs. +*/ chrome.tabs.query({}, (tabs)=> { for (tab of tabs) { initializePageAction(tab.id); } }); +/* +Each time a tab is updated, reset the page action for that tab. +*/ chrome.tabs.onUpdated.addListener(initializePageAction); +/* +Toggle CSS when the page action is clicked. +*/ chrome.pageAction.onClicked.addListener(toggleCSS); From 9e6945676c8c117615799b7b9dd199fd5a8c0db1 Mon Sep 17 00:00:00 2001 From: Will Bamberg Date: Wed, 17 Aug 2016 15:54:02 -0700 Subject: [PATCH 3/3] Update based review comments, and show action only in http(s) pages --- apply-css/background.js | 31 +++++++++++++++++++++++-------- apply-css/manifest.json | 6 ++++-- 2 files changed, 27 insertions(+), 10 deletions(-) diff --git a/apply-css/background.js b/apply-css/background.js index 6528f4e..8c76e1d 100644 --- a/apply-css/background.js +++ b/apply-css/background.js @@ -1,6 +1,7 @@ const CSS = "body { border: 20px solid red; }"; const TITLE_APPLY = "Apply CSS"; const TITLE_REMOVE = "Remove CSS"; +const APPLICABLE_PROTOCOLS = ["http:", "https:"]; /* Toggle CSS: based on the current title, insert or remove the CSS. @@ -24,27 +25,41 @@ function toggleCSS(tab) { } /* -Initialize the page action: set icon and title, then show. +Returns true only if the URL's protocol is in APPLICABLE_PROTOCOLS. */ -function initializePageAction(tabId) { - chrome.pageAction.setIcon({tabId, path: "icons/off.svg"}); - chrome.pageAction.setTitle({tabId, title: TITLE_APPLY}); - chrome.pageAction.show(tabId); +function protocolIsApplicable(url) { + var anchor = document.createElement('a'); + anchor.href = url; + return APPLICABLE_PROTOCOLS.includes(anchor.protocol); +} + +/* +Initialize the page action: set icon and title, then show. +Only operates on tabs whose URL's protocol is applicable. +*/ +function initializePageAction(tab) { + if (protocolIsApplicable(tab.url)) { + chrome.pageAction.setIcon({tabId: tab.id, path: "icons/off.svg"}); + chrome.pageAction.setTitle({tabId: tab.id, title: TITLE_APPLY}); + chrome.pageAction.show(tab.id); + } } /* When first loaded, initialize the page action for all tabs. */ -chrome.tabs.query({}, (tabs)=> { +chrome.tabs.query({}, (tabs) => { for (tab of tabs) { - initializePageAction(tab.id); + initializePageAction(tab); } }); /* Each time a tab is updated, reset the page action for that tab. */ -chrome.tabs.onUpdated.addListener(initializePageAction); +chrome.tabs.onUpdated.addListener((id, changeInfo, tab) => { + initializePageAction(tab); +}); /* Toggle CSS when the page action is clicked. diff --git a/apply-css/manifest.json b/apply-css/manifest.json index 9030f95..522016b 100644 --- a/apply-css/manifest.json +++ b/apply-css/manifest.json @@ -18,11 +18,13 @@ }, "page_action": { - "default_icon": "icons/off.svg" + "default_icon": "icons/off.svg", + "browser_style": true }, "permissions": [ - "activeTab" + "activeTab", + "tabs" ] }