felixfoertsch/webextensions-examples
1
0
Fork 0
mirror of https://github.com/mdn/webextensions-examples.git synced 2026-04-16 06:18:35 +02:00
Code Issues Packages Projects Releases Wiki Activity

add in a theme switching example (#228)

Browse Source 
* add in a theme switching example

* remove background script

* filter out non-themes
This commit is contained in:
Andy McKay
2017-06-12 13:37:56 -07:00
committed by wbamberg
parent 3870a213bb
commit db7a686f3c
6 changed files with 79 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
theme-switcher/README.md Normal file
View File

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

26
theme-switcher/manifest.json Normal file
View File

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

1
theme-switcher/star-half.svg Normal file
View File

@@ -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, -422.000000)"><g id="star-half" transform="translate(338.000000, 422.500000)"><path d="M20,6.744 L12.809,6.127 L10,-0.5 L7.191,6.127 L0,6.744 L5.455,11.471 L3.82,18.5 L10,14.772 L16.18,18.499 L14.545,11.47 L20,6.744 L20,6.744 Z M10,12.896 L10,3.595 L11.71,7.631 L16.09,8.007 L12.768,10.885 L13.764,15.166 L10,12.896 L10,12.896 Z" id="Shape"/></g></g></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 743 B

3
theme-switcher/switcher.css Normal file
View File

@@ -0,0 +1,3 @@
body {
padding: 1em;
}

14
theme-switcher/switcher.html Normal file
View File

@@ -0,0 +1,14 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="switcher.css"/>
</head>
<body>
<p>Choose a Firefox theme:</p>
<select name="theme" id="theme-list">
</select>
<script src="switcher.js"></script>
</body>
</html>

24
theme-switcher/switcher.js Normal file
View File

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