New example, showing insertCSS and removeCSS

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.

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

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/.

apply-css/icons/off.svg

@@ -0,0 +1 @@
+<?xml version="1.0" ?><svg height="20px" version="1.1" viewBox="0 0 20 20" width="20px" xmlns="http://www.w3.org/2000/svg" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" xmlns:xlink="http://www.w3.org/1999/xlink"><title/><desc/><defs/><g fill="none" fill-rule="evenodd" id="Page-1" stroke="none" stroke-width="1"><g fill="#000000" id="Core" transform="translate(-170.000000, -86.000000)"><g id="check-circle-outline-blank" transform="translate(170.000000, 86.000000)"><path d="M10,0 C4.5,0 0,4.5 0,10 C0,15.5 4.5,20 10,20 C15.5,20 20,15.5 20,10 C20,4.5 15.5,0 10,0 L10,0 Z M10,18 C5.6,18 2,14.4 2,10 C2,5.6 5.6,2 10,2 C14.4,2 18,5.6 18,10 C18,14.4 14.4,18 10,18 L10,18 Z" id="Shape"/></g></g></g></svg>

apply-css/icons/on.svg

@@ -0,0 +1 @@
+<?xml version="1.0" ?><svg height="20px" version="1.1" viewBox="0 0 20 20" width="20px" xmlns="http://www.w3.org/2000/svg" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" xmlns:xlink="http://www.w3.org/1999/xlink"><title/><desc/><defs/><g fill="none" fill-rule="evenodd" id="Page-1" stroke="none" stroke-width="1"><g fill="#000000" id="Core" transform="translate(-338.000000, -338.000000)"><g id="radio-button-on" transform="translate(338.000000, 338.000000)"><path d="M10,5 C7.2,5 5,7.2 5,10 C5,12.8 7.2,15 10,15 C12.8,15 15,12.8 15,10 C15,7.2 12.8,5 10,5 L10,5 Z M10,0 C4.5,0 0,4.5 0,10 C0,15.5 4.5,20 10,20 C15.5,20 20,15.5 20,10 C20,4.5 15.5,0 10,0 L10,0 Z M10,18 C5.6,18 2,14.4 2,10 C2,5.6 5.6,2 10,2 C14.4,2 18,5.6 18,10 C18,14.4 14.4,18 10,18 L10,18 Z" id="Shape"/></g></g></g></svg>

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"
+  ]
+
+}