From db7a686f3c0fdf03a36ddecbcbf53fb4e1d3d9db Mon Sep 17 00:00:00 2001 From: Andy McKay Date: Mon, 12 Jun 2017 13:37:56 -0700 Subject: [PATCH] add in a theme switching example (#228) * add in a theme switching example * remove background script * filter out non-themes --- theme-switcher/README.md | 11 +++++++++++ theme-switcher/manifest.json | 26 ++++++++++++++++++++++++++ theme-switcher/star-half.svg | 1 + theme-switcher/switcher.css | 3 +++ theme-switcher/switcher.html | 14 ++++++++++++++ theme-switcher/switcher.js | 24 ++++++++++++++++++++++++ 6 files changed, 79 insertions(+) create mode 100644 theme-switcher/README.md create mode 100644 theme-switcher/manifest.json create mode 100644 theme-switcher/star-half.svg create mode 100644 theme-switcher/switcher.css create mode 100644 theme-switcher/switcher.html create mode 100644 theme-switcher/switcher.js diff --git a/theme-switcher/README.md b/theme-switcher/README.md new file mode 100644 index 0000000..6e3a909 --- /dev/null +++ b/theme-switcher/README.md @@ -0,0 +1,11 @@ +# Theme Switcher + +## What it does + +Provides a popup that allows you to see the themes and switch between them. + +## What it shows + +Demonstrates using the management API. + +The "star-half.svg" icon is taken from the Material Core iconset and is used under the terms of its license: https://www.iconfinder.com/iconsets/material-core. diff --git a/theme-switcher/manifest.json b/theme-switcher/manifest.json new file mode 100644 index 0000000..f873ee7 --- /dev/null +++ b/theme-switcher/manifest.json @@ -0,0 +1,26 @@ +{ + "browser_action": { + "default_title": "Theme switcher", + "default_popup": "switcher.html", + "browser_style": true, + "default_icon": { + "128": "star-half.svg" + } + }, + "description": "An example of how to use the management API for themes.", + "homepage_url": "https://github.com/mdn/webextensions-examples/tree/master/theme-switcher", + "manifest_version": 2, + "name": "Theme Switcher", + "permissions": [ + "management" + ], + "icons": { + "128": "star-half.svg" + }, + "version": "1.0", + "applications": { + "gecko": { + "strict_min_version": "55.0a1" + } + } +} diff --git a/theme-switcher/star-half.svg b/theme-switcher/star-half.svg new file mode 100644 index 0000000..d120a5d --- /dev/null +++ b/theme-switcher/star-half.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/theme-switcher/switcher.css b/theme-switcher/switcher.css new file mode 100644 index 0000000..997ba0b --- /dev/null +++ b/theme-switcher/switcher.css @@ -0,0 +1,3 @@ +body { + padding: 1em; +} diff --git a/theme-switcher/switcher.html b/theme-switcher/switcher.html new file mode 100644 index 0000000..da9b908 --- /dev/null +++ b/theme-switcher/switcher.html @@ -0,0 +1,14 @@ + + + + + + + + +

Choose a Firefox theme:

+ + + + diff --git a/theme-switcher/switcher.js b/theme-switcher/switcher.js new file mode 100644 index 0000000..0fadf9e --- /dev/null +++ b/theme-switcher/switcher.js @@ -0,0 +1,24 @@ +var themeList = document.getElementById('theme-list'); + +function enableTheme(e) { + browser.management.setEnabled(e.target.value, true); + e.preventDefault(); + window.close(); +} + +browser.management.getAll().then((extensions) => { + for (let extension of extensions) { + if (extension.type !== 'theme') { + continue; + } + let option = document.createElement('option'); + option.textContent = extension.name; + option.value = extension.id; + if (extension.enabled) { + option.selected = true; + } + themeList.appendChild(option); + } +}); + +themeList.addEventListener('change', enableTheme);