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..8c76e1d
--- /dev/null
+++ b/apply-css/background.js
@@ -0,0 +1,67 @@
+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.
+Update the page action's title and icon to reflect its state.
+*/
+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)
+}
+
+/*
+Returns true only if the URL's protocol is in APPLICABLE_PROTOCOLS.
+*/
+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) => {
+ for (tab of tabs) {
+ initializePageAction(tab);
+ }
+});
+
+/*
+Each time a tab is updated, reset the page action for that tab.
+*/
+chrome.tabs.onUpdated.addListener((id, changeInfo, tab) => {
+ initializePageAction(tab);
+});
+
+/*
+Toggle CSS when the page action is clicked.
+*/
+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..522016b
--- /dev/null
+++ b/apply-css/manifest.json
@@ -0,0 +1,30 @@
+{
+
+ "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",
+ "browser_style": true
+ },
+
+ "permissions": [
+ "activeTab",
+ "tabs"
+ ]
+
+}