├── .gitattributes
├── .gitignore
├── LICENSE
├── README.md
├── background.js
├── drop.js
├── icons
    ├── icn128.png
    ├── icn16.png
    ├── icn24.png
    ├── icn38.png
    └── icn48.png
├── images
    ├── options.png
    └── tile.png
├── manifest.json
├── options.html
├── options.js
├── style
    ├── fonts
    │   ├── Raleway-Medium.ttf
    │   ├── Raleway-SemiBold.ttf
    │   └── Raleway-Thin.ttf
    ├── options.css
    ├── theme_alt.css
    ├── theme_alt2.css
    ├── theme_dark.css
    └── theme_light.css
├── theme_alt.html
├── theme_alt2.html
├── theme_dark.html
└── theme_light.html


/.gitattributes:
--------------------------------------------------------------------------------
1 | # Auto detect text files and perform LF normalization
2 | * text=auto
3 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | 
2 | .DS_Store
3 | .vscode


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2018 luetage <https://github.com/luetage>, sjudenim <https://github.com/sjudenim>
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Extension Control
 2 | 
 3 | ![ext_control](/images/tile.png)
 4 | 
 5 | `created by luetage and sjudenim for Vivaldi browser`
 6 | 
 7 | [**Available on chrome web store**](https://chrome.google.com/webstore/detail/extension-control/himccccaelhgphommckogopgpddngimf?hl=en-US)
 8 | 
 9 | Extension Control is a lightweight extension manager designed for those who want essential functionality in an aesthetically pleasing package. The streamlined feature set will enable you to limit resource consumption by letting you choose which extensions you want running at any given time. All from within the convenience of a single menu, that can be accessed directly on your address bar.
10 | 
11 | ## Features
12 | 
13 | * enable/disable extensions with a single click
14 | * execute an uninstall
15 | * access extension options
16 | * hide extensions from menu
17 | * extension info
18 | * switch between dark and light theme
19 | * set maximum width of the popup
20 | * set the font size
21 | 
22 | ## Why another extension manager
23 | 
24 | We felt that the current extension managers available for chromium browsers had features we didn't need and mostly dated, bloated design. Extension Control adjusts to your needs and preferences. For example it introduces font shadows specifically for Windows, for better reading. The extension has been tested on Chrome, Opera and Vivaldi, but should generally run just fine on any Chromium browser.
25 | 


--------------------------------------------------------------------------------
/background.js:
--------------------------------------------------------------------------------
 1 | os = {};
 2 | browser = {};
 3 | popup = {};
 4 | 
 5 | chrome.runtime.onStartup.addListener(function() {
 6 |     theme();
 7 | });
 8 | 
 9 | chrome.runtime.onInstalled.addListener(function(details) {
10 |     if (details.reason == 'install' || details.reason == 'update') {
11 |         theme();
12 |         userAgent();
13 |     }
14 | });
15 | 
16 | chrome.runtime.onMessage.addListener(function(message) {
17 |     if (message === 'extensions pls') {
18 |         chrome.storage.sync.get({'browser': ''}, function(getIt) {
19 |             var browser = getIt.browser;
20 |             if (browser === 'viv') {
21 |                 chrome.tabs.create({url: 'vivaldi://extensions/'});
22 |             }
23 |             else if (browser === 'opr') {
24 |                 chrome.tabs.create({url: 'opera://extensions/'});
25 |             }
26 |             else {
27 |                 chrome.tabs.create({url: 'chrome://extensions/'});
28 |             }
29 |         });
30 |     }
31 | });
32 | 
33 | function userAgent() {
34 |     console.log('SETUP');
35 |     const agent = navigator.userAgent;
36 |     if (agent.includes('Windows') === true) {
37 |         os = 'win';
38 |     }
39 |     else {
40 |         os = 'other';
41 |     }
42 |     if (agent.includes('Vivaldi') === true) {
43 |         browser = 'viv';
44 |     }
45 |     else if (agent.includes('OPR') === true) {
46 |         browser = 'opr';
47 |     }
48 |     else {
49 |         browser = 'chr';
50 |     }
51 |     chrome.storage.sync.set({
52 |         'os': os,
53 |         'browser': browser,
54 |     }, function() {
55 |         console.log(agent);
56 |         console.log(os + ' ' + browser);
57 |         chrome.runtime.openOptionsPage();
58 |     });
59 | };
60 | 
61 | function theme() {
62 |     chrome.storage.sync.get({'popup': 'theme_dark.html'}, function(start) {
63 |         popup = start.popup;
64 |         chrome.browserAction.setPopup({popup});
65 |     });
66 | };
67 | 


--------------------------------------------------------------------------------
/drop.js:
--------------------------------------------------------------------------------
  1 | function small() {
  2 |     document.body.style.setProperty('--top', '48px');
  3 |     document.body.style.setProperty('--height', '505px');
  4 |     var fontsize = document.createElement('style');
  5 |     fontsize.innerHTML = '#header {font-size: 14px} body {font-size: 12px} .options, .uninstall, .info, .hide {font-size: 11px}';
  6 |     document.body.appendChild(fontsize);
  7 | };
  8 | 
  9 | function medium() {
 10 |     document.body.style.setProperty('--top', '48px');
 11 |     document.body.style.setProperty('--height','510px');
 12 |     var fontsize = document.createElement('style');
 13 |     fontsize.innerHTML = '#header {font-size: 15px} body {font-size: 13px} .options, .uninstall, .info, .hide {font-size: 12px}';
 14 |     document.body.appendChild(fontsize);
 15 | };
 16 | 
 17 | function large() {
 18 |     document.body.style.setProperty('--top', '48px');
 19 |     document.body.style.setProperty('--height', '515px');
 20 |     var fontsize = document.createElement('style');
 21 |     fontsize.innerHTML = '#header {font-size: 16px} body {font-size: 14px} .options, .uninstall, .info, .hide {font-size: 13px}';
 22 |     document.body.appendChild(fontsize);
 23 | };
 24 | 
 25 | function gutter() {
 26 |     var styleGut = document.createElement('style');
 27 |     styleGut.innerHTML = '.extension, #menu {padding: 5px 15px 5px 20px;} #txtdiv {padding: 0 15px 0 20px} .extension.dev div::before {content:"$"} .extension.out div::before {content:"[]"}';
 28 |     document.body.appendChild(styleGut);
 29 | };
 30 | 
 31 | function font() {
 32 |     var styleWin = document.createElement('style');
 33 |     styleWin.innerHTML = 'body {text-shadow: var(--fg-shadow) 0 0 1px;} .desc {text-shadow: var(--desc-shadow) 0 0 1px;}';
 34 |     document.body.appendChild(styleWin);
 35 | };
 36 | 
 37 | function rmMenu() {
 38 |     const thisMenu = document.getElementById('menu');
 39 |     const thisInfo = document.getElementById('txtdiv');
 40 |     if (thisMenu) {
 41 |         thisMenu.outerHTML = '';
 42 |     }
 43 |     if (thisInfo) {
 44 |         thisInfo.outerHTML = '';
 45 |     }
 46 | };
 47 | 
 48 | function options() {
 49 |     chrome.runtime.openOptionsPage();
 50 | };
 51 | 
 52 | function setup() {
 53 |     chrome.storage.sync.get({
 54 |         'width': '200',
 55 |         'fontsize': 'medium',
 56 |         'os': ''
 57 |     }, function(start) {
 58 |         const width = start.width;
 59 |         document.body.style.maxWidth = width + 'px';
 60 |         const fontsize = start.fontsize;
 61 |         if (fontsize === 'small') {
 62 |             small();
 63 |         }
 64 |         else if (fontsize === 'medium') {
 65 |             medium();
 66 |         }
 67 |         else {
 68 |             large();
 69 |         }
 70 |         const os = start.os;
 71 |         if (os === 'win') {
 72 |             font();
 73 |         }
 74 |     });
 75 | };
 76 | 
 77 | function load() {
 78 |     chrome.management.getAll(function(info) {
 79 |         console.log(info);
 80 |         info.sort(function (a,b) {
 81 |             return a.shortName.trim().localeCompare(b.shortName.trim());
 82 |         });
 83 |         chrome.storage.sync.get({'hidden': []}, function(comp) {
 84 |             hidden = comp.hidden;
 85 |             const thisID = chrome.runtime.id;
 86 |             var gut = {};
 87 |             var present = [];
 88 |             for (i=0; i<info.length; i++) {
 89 |                 if (info[i].type === 'extension' && info[i].id !== thisID) {
 90 |                     extID = info[i].id;
 91 |                     present.push(extID);
 92 |                     if (hidden.indexOf(info[i].id) === -1) {
 93 |                         extItem = document.createElement('div');
 94 |                         extItem.classList.add('extension');
 95 |                         if (info[i].updateUrl == null) {
 96 |                             gut = true;
 97 |                             extItem.classList.add('out');
 98 |                         }
 99 |                         if (info[i].installType === 'development') {
100 |                             gut = true;
101 |                             extItem.classList.remove('out');
102 |                             extItem.classList.add('dev');
103 |                         }
104 |                         if (info[i].enabled === true) {
105 |                             extItem.classList.add('enabled');
106 |                         }
107 |                         extItem.setAttribute('id', extID);
108 |                         extItem.innerHTML = '<div>' + info[i].shortName + '</div>';
109 |                         switcher.appendChild(extItem);
110 |                     }
111 |                 }
112 |             }
113 |             var remove = hidden.filter(e => !present.includes(e));
114 |             hidden = hidden.filter(e => !remove.includes(e));
115 |             chrome.storage.sync.set({'hidden': hidden});
116 |             if (gut === true) {
117 |                 gutter();
118 |             }
119 |             run();
120 |         });
121 |     });
122 | };
123 | 
124 | function run() {
125 |     const extensions = document.getElementsByClassName('extension');
126 |     for (i=0; i<extensions.length; i++) {
127 |         extensions[i].addEventListener('click', function(i) {
128 |             rmMenu();
129 |             extID = extensions[i].getAttribute('id');
130 |             if (extensions[i].classList.contains('enabled')) {
131 |                 chrome.management.setEnabled(extID, false);
132 |                 extensions[i].classList.remove('enabled');
133 |             }
134 |             else {
135 |                 chrome.management.setEnabled(extID, true);
136 |                 extensions[i].classList.add('enabled');
137 |             }
138 |         }.bind(this, i));
139 | 
140 |         extensions[i].addEventListener('contextmenu', function(i) {
141 |             event.preventDefault();
142 |             rmMenu();
143 |             extID = extensions[i].getAttribute('id');
144 |             menu = document.createElement('div');
145 |             menu.id = 'menu';
146 |             extensions[i].insertAdjacentElement('afterend', menu);
147 | 
148 |             // info
149 |             var inf = document.createElement('span');
150 |             inf.classList.add('info');
151 |             inf.innerHTML = 'info';
152 |             menu.appendChild(inf);
153 |             inf.addEventListener('click', function() {
154 |                 const toggle = document.getElementById('txtdiv');
155 |                 if (toggle) {
156 |                     toggle.outerHTML = '';
157 |                 }
158 |                 else {
159 |                     chrome.management.get(extID, function(text) {
160 |                         var version = text.version;
161 |                         var home = text.homepageUrl;
162 |                         if (home !== '') {
163 |                             var jmp = 0;
164 |                         }
165 |                         else {
166 |                             var jmp = 1;
167 |                         }
168 |                         var txtdiv = document.createElement('div');
169 |                         txtdiv.id = 'txtdiv';
170 |                         txtdiv.innerHTML = '<p><span class="desc">version </span>' + version + '</p><p id="home"><a class="desc" href="' + home + '" target="_blank" rel="noreferrer noopener">homepage</a></p><p><span class="desc">id </span><span id="copy">' + extID + '</span></p>';
171 |                         extensions[i].insertAdjacentElement('afterend', txtdiv);
172 |                         if (jmp === 1) {
173 |                             document.getElementById('home').style.display = 'none';
174 |                         }
175 |                         const cpID = document.getElementById('copy');cpID.addEventListener('click', function() {
176 |                             navigator.clipboard.writeText(extID);
177 |                             cpID.style.cursor = 'default';
178 |                             cpID.innerHTML = 'copied';
179 |                         });
180 |                     });
181 |                 }
182 |             });
183 | 
184 |             // hide
185 |             var hide = document.createElement('span');
186 |             hide.classList.add('hide');
187 |             hide.innerHTML = 'hide';
188 |             menu.appendChild(hide);
189 |             hide.addEventListener('click', function() {
190 |                 chrome.storage.sync.get({'hidden': ''}, function(arr) {
191 |                     hidden = arr.hidden;
192 |                     hidden.push(extID);
193 |                     chrome.storage.sync.set({'hidden': hidden}, function() {
194 |                         rmMenu();
195 |                         extensions[i].style.display = 'none';
196 |                         chrome.runtime.sendMessage('hide it!');
197 |                     });
198 |                 });
199 |             });
200 | 
201 |             // options
202 |             var options = document.createElement('span');
203 |             options.classList.add('options');
204 |             options.innerHTML = 'options';
205 |             chrome.management.get(extID, function(opt) {
206 |                 var extOpt = opt.optionsUrl;
207 |                 if (extOpt !== '') {
208 |                     menu.appendChild(options);
209 |                     if (opt.enabled === true) {
210 |                         options.classList.add('optActive');
211 |                         options.addEventListener('click', function() {
212 |                             chrome.tabs.create({url: extOpt});
213 |                         });
214 |                     }
215 |                 }
216 |             });
217 | 
218 |             // uninstall
219 |             var unInst = document.createElement('span');
220 |             unInst.classList.add('uninstall');
221 |             unInst.innerHTML = 'uninstall';
222 |             menu.appendChild(unInst);
223 |             unInst.addEventListener('click', function() {
224 |                 chrome.management.uninstall(extID, function() {
225 |                     if (chrome.runtime.lastError) {
226 |                         extensions[i].style.display = 'block';
227 |                     }
228 |                     else {
229 |                         rmMenu();
230 |                         extensions[i].style.display = 'none';
231 |                     }
232 |                 });
233 |             });
234 |         }.bind(this, i));
235 |     }
236 | };
237 | 
238 | hidden = [];
239 | setup();
240 | load();
241 | document.getElementById('switcher').addEventListener('mouseleave', rmMenu);
242 | document.getElementById('header').addEventListener('click', options);
243 | 


--------------------------------------------------------------------------------
/icons/icn128.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luetage/extension_control/c96baeeefd8221b0d3d133bb6776a80c28a2d04d/icons/icn128.png


--------------------------------------------------------------------------------
/icons/icn16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luetage/extension_control/c96baeeefd8221b0d3d133bb6776a80c28a2d04d/icons/icn16.png


--------------------------------------------------------------------------------
/icons/icn24.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luetage/extension_control/c96baeeefd8221b0d3d133bb6776a80c28a2d04d/icons/icn24.png


--------------------------------------------------------------------------------
/icons/icn38.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luetage/extension_control/c96baeeefd8221b0d3d133bb6776a80c28a2d04d/icons/icn38.png


--------------------------------------------------------------------------------
/icons/icn48.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luetage/extension_control/c96baeeefd8221b0d3d133bb6776a80c28a2d04d/icons/icn48.png


--------------------------------------------------------------------------------
/images/options.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luetage/extension_control/c96baeeefd8221b0d3d133bb6776a80c28a2d04d/images/options.png


--------------------------------------------------------------------------------
/images/tile.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luetage/extension_control/c96baeeefd8221b0d3d133bb6776a80c28a2d04d/images/tile.png


--------------------------------------------------------------------------------
/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 
 3 |     "manifest_version": 2,
 4 |     "name": "Extension Control",
 5 |     "short_name": "Ext_Control",
 6 |     "version": "0.70",
 7 |     "author": ["luetage, sjudenim"],
 8 |     "description": "Elementary extension manager. Compact design, no superfluous features.",
 9 |     "homepage_url": "https://github.com/luetage/extension_control",
10 |     "permissions": [
11 |         "management",
12 |         "storage"
13 |     ],
14 |     "options_ui": {
15 |         "page": "options.html",
16 |         "open_in_tab": true
17 |     },
18 |     "web_accessible_resources": [
19 |         "icons/icn16.png"
20 |     ],
21 |     "offline_enabled": true,
22 |     "icons": {
23 |         "16": "icons/icn16.png",
24 |         "48": "icons/icn48.png",
25 |         "128": "icons/icn128.png"
26 |     },
27 |     "browser_action": {
28 |         "default_icon": {
29 |             "16": "icons/icn16.png",
30 |             "24": "icons/icn24.png",
31 |             "38": "icons/icn38.png"
32 |         },
33 |           "default_popup": "theme_dark.html",
34 |           "default_title": "Extension Control"
35 |     },
36 |     "background": {
37 |         "scripts": [ "background.js" ],
38 |         "persistent": false
39 |     }
40 | 
41 | }
42 | 


--------------------------------------------------------------------------------
/options.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | 
 4 | <head>
 5 |     <meta http-equiv="content-type" content="text/html; charset=utf-8">
 6 |     <title>Extension Control</title>
 7 |     <link rel="stylesheet" href="style/options.css" />
 8 |     <link rel="shortcut icon" type="image/png" href="icons/icn16.png">
 9 | </head>
10 | 
11 | <body>
12 |     <div id="header">
13 |         <span id="extPage" title="Open extensions page"><span class="high">extension</span><span class="norm">control</span>
14 | </span>
15 |     </div>
16 |     <div id="content">
17 |         <div class="row">
18 |             <div class="column">
19 |                 <h1>Menu Settings</h1>
20 |                 <div class="float">
21 |                     <div class="left">
22 |                         <span>Set the maximum width</span>
23 |                     </div>
24 |                     <div class="right">
25 |                         <input id="maxwidth" type="range" name="rangeInput" min="180" max="300" step="5"><span id="display"></span>
26 |                     </div>
27 |                 </div>
28 |                 <div class="float">
29 |                     <div class="left">
30 |                         <span>Choose a font size</span>
31 |                     </div>
32 |                     <div class="right">
33 |                         <span id="small">small</span><span id="medium">medium</span><span id="large">large</span>
34 |                     </div>
35 |                 </div>
36 |                 <br><h1>Theme Selection</h1>
37 |                 <span id="light">light</span><span id="alt">lighter</span><span id="dark">dark</span><span id="alt2">darker</span>                 
38 |                 <br><br><br><h1>Hidden Extensions<span id="hint"></span></h1>
39 |                 <div class="sub-column">
40 |                     <div id="show" title="Select to unhide" class="left"></div>
41 |                 </div>
42 |             </div>
43 |             <div class="column-right">
44 |                 <div class="left">
45 |                     <h1>Glossary</h1>
46 |                     <p><span class="contrast">Enable/Disable</span> enacted by selecting the extension</p>
47 |                     <p><span class="contrast">Controls</span> can be accessed with right click</p>
48 |                     <p><span class="contrast">Info</span> shows version, homepage and id</p>
49 |                     <p><span class="contrast">Hide</span> extension from displaying in the menu</p>
50 |                     <p><span class="contrast">Options</span> page for selected extension</p>
51 |                     <p><span class="contrast">Uninstall</span> extension from the browser</p>
52 |                     <p><span class="contrast">[]</span> not from chrome web store</p>
53 |                     <p><span class="contrast">$</span> an unpacked extension (development)</p>
54 |                     <br>
55 |                     <br><h1>Resources</h1>
56 |                     <form method="get" action="https://chrome.google.com/webstore/detail/extension-control/himccccaelhgphommckogopgpddngimf?hl=en-US"
57 |                         target="_blank" rel="noreferrer noopener"><button type="submit">chrome web store</button></form>
58 |                         | <form method="get" action="https://forum.vivaldi.net/topic/29013/extension-control" target="_blank" rel="noreferrer noopener"><button
59 |                             id="link" type="submit">forum</button></form>
60 |                         | <form method="get" action="https://github.com/luetage/extension_control" target="_blank" rel="noreferrer noopener"><button
61 |                             type="submit">github</button></form>
62 |                 </div>
63 |             </div>
64 |         </div>
65 |     </div>
66 |     <script src="options.js"></script>
67 | </body>
68 | 
69 | </html>
70 | 


--------------------------------------------------------------------------------
/options.js:
--------------------------------------------------------------------------------
  1 | function setTheme() {
  2 |     chrome.storage.sync.set({'popup': popup}, function() {
  3 |         chrome.browserAction.setPopup({popup});
  4 |         console.log(popup);
  5 |     });
  6 | };
  7 | 
  8 | function setLight() {
  9 |     if (popup !== 'theme_light.html') {
 10 |         popup = 'theme_light.html'
 11 |         optLight.classList.add('enabled');
 12 |         optDark.classList.remove('enabled');
 13 |         optAlt.classList.remove('enabled');
 14 |         optAlt2.classList.remove('enabled');
 15 |         document.body.style.setProperty('--accent', 'hsl(349, 83%, 61%)');
 16 |         document.body.style.setProperty('--bg', 'hsl(0, 0%, 100%)');
 17 |         document.body.style.setProperty('--headerBg', 'hsl(240,3%,96%)');
 18 |         document.body.style.setProperty('--headerFg', 'hsl(349, 83%, 61%)');
 19 |         document.body.style.setProperty('--headerAccent', 'hsl(0,0%,28%)');
 20 |         document.body.style.setProperty('--fg', 'hsl(240, 5%, 69%)');
 21 |         document.body.style.setProperty('--secondFg', 'hsl(0,0%,28%)');
 22 |         setTheme();
 23 |     }
 24 | };
 25 | 
 26 | function setDark() {
 27 |     if (popup !== 'theme_dark.html') {
 28 |         popup = 'theme_dark.html'
 29 |         optLight.classList.remove('enabled');
 30 |         optDark.classList.add('enabled');
 31 |         optAlt.classList.remove('enabled');
 32 |         optAlt2.classList.remove('enabled');
 33 |         document.body.style.setProperty('--accent', 'hsl(228,57%,73%)');
 34 |         document.body.style.setProperty('--bg', 'hsl(0,0%,10%)');
 35 |         document.body.style.setProperty('--headerBg', 'hsl(240,3%,12%)');
 36 |         document.body.style.setProperty('--headerFg', 'hsl(228,3%,66%)');
 37 |         document.body.style.setProperty('--headerAccent', 'hsl(228,57%,73%)');
 38 |         document.body.style.setProperty('--fg', 'hsl(228,3%,66%)');
 39 |         document.body.style.setProperty('--secondFg', 'hsl(208,8%,48%)');
 40 |         setTheme();
 41 |     }
 42 | };
 43 | 
 44 | function setAlt() {
 45 |     if (popup !== 'theme_alt.html') {
 46 |         popup = 'theme_alt.html';
 47 |         optLight.classList.remove('enabled');
 48 |         optDark.classList.remove('enabled');
 49 |         optAlt.classList.add('enabled');
 50 |         optAlt2.classList.remove('enabled');
 51 |         document.body.style.setProperty('--accent', 'hsl(228, 57%, 73%)');
 52 |         document.body.style.setProperty('--bg', 'hsl(0, 0%, 100%)');
 53 |         document.body.style.setProperty('--headerBg', 'hsl(0, 0%, 99%)');
 54 |         document.body.style.setProperty('--headerFg', 'hsl(228, 57%, 73%)');
 55 |         document.body.style.setProperty('--headerAccent', 'hsl(0,0%,28%)');
 56 |         document.body.style.setProperty('--fg', 'hsl(240, 5%, 69%)');
 57 |         document.body.style.setProperty('--secondFg', 'hsl(0, 0%, 32%)');
 58 |         setTheme();
 59 |     }
 60 | };
 61 | 
 62 | function setAlt2() {
 63 |     if (popup !== 'theme_alt2.html') {
 64 |         popup = 'theme_alt2.html';
 65 |         optLight.classList.remove('enabled');
 66 |         optDark.classList.remove('enabled');
 67 |         optAlt.classList.remove('enabled');
 68 |         optAlt2.classList.add('enabled');
 69 |         document.body.style.setProperty('--accent', 'hsl(197, 67%, 48%)');
 70 |         document.body.style.setProperty('--bg', 'hsl(220, 5%, 8%)');
 71 |         document.body.style.setProperty('--headerBg', 'hsl(220, 5%, 7%)');
 72 |         document.body.style.setProperty('--headerFg', 'hsl(228,3%,66%)');
 73 |         document.body.style.setProperty('--headerAccent', 'hsl(197, 67%, 48%)');
 74 |         document.body.style.setProperty('--fg', 'hsl(228,3%,66%)');
 75 |         document.body.style.setProperty('--secondFg', 'hsl(208,8%,48%)');
 76 |         setTheme();
 77 |     }
 78 | };
 79 | 
 80 | function setFontsize() {
 81 |     chrome.storage.sync.set({'fontsize': fontsize}, function() {
 82 |         console.log(fontsize);
 83 |     });
 84 | };
 85 | 
 86 | function setSmall() {
 87 |     if (fontsize !== 'small') {
 88 |         fontsize = 'small';
 89 |         optSmall.classList.add('enabled');
 90 |         optMedium.classList.remove('enabled');
 91 |         optLarge.classList.remove('enabled');
 92 |         setFontsize();
 93 |     }
 94 | };
 95 | 
 96 | function setMedium() {
 97 |     if (fontsize !== 'medium') {
 98 |         fontsize = 'medium';
 99 |         optSmall.classList.remove('enabled');
100 |         optMedium.classList.add('enabled');
101 |         optLarge.classList.remove('enabled');
102 |         setFontsize();
103 |     }
104 | };
105 | 
106 | function setLarge() {
107 |     if (fontsize !== 'large') {
108 |         fontsize = 'large';
109 |         optSmall.classList.remove('enabled');
110 |         optMedium.classList.remove('enabled');
111 |         optLarge.classList.add('enabled');
112 |         setFontsize();
113 |     }
114 | };
115 | 
116 | function empty() {
117 |     document.getElementById('hint').style.visibility = 'hidden';
118 |     var empty = document.createElement('p');
119 |     empty.classList.add('contrast');
120 |     empty.innerHTML = 'nothing to hide';
121 |     show.appendChild(empty);
122 | };
123 | 
124 | function showEXT() {
125 |     document.getElementById('hint').style.visibility = 'visible';
126 |     for (i=0; i<hidden.length; i++) {
127 |         extID = hidden[i];
128 |         chrome.management.get(extID, function(text) {
129 |             var divID = text.id;
130 |             var name = text.name
131 |             var extItem = document.createElement('p');
132 |             extItem.innerHTML = name;
133 |             extItem.id = divID;
134 |             extItem.classList.add('extensions');
135 |             show.insertBefore(extItem, show.firstChild);
136 |             extItem.addEventListener('click', function() {
137 |                 var remove = hidden.indexOf(divID);
138 |                 if (remove > -1) {
139 |                     hidden.splice(remove, 1);
140 |                 }
141 |                 chrome.storage.sync.set({'hidden': hidden});
142 |                 extItem.outerHTML = '';
143 |                 if (!hidden.length > 0) {
144 |                     empty();
145 |                 }
146 |             })
147 |         })
148 |     }
149 | };
150 | 
151 | function setup() {
152 |     chrome.storage.sync.get({
153 |         'popup': 'theme_dark.html',
154 |         'width': '195',
155 |         'fontsize': 'medium',
156 |         'hidden': []
157 |     }, function(start) {
158 |         popup = start.popup;
159 |         chrome.browserAction.setPopup({popup});
160 |         width = start.width;
161 |         slide.value = width;
162 |         disp.innerHTML = width + 'px';
163 |         popup = start.popup;
164 |         if (popup === 'theme_light.html') {
165 |             optLight.classList.add('enabled');
166 |             document.body.style.setProperty('--accent', 'hsl(349, 83%, 61%)');
167 |             document.body.style.setProperty('--bg', 'hsl(0, 0%, 100%)');
168 |             document.body.style.setProperty('--headerBg', 'hsl(240,3%,96%)');
169 |             document.body.style.setProperty('--headerFg', 'hsl(349, 83%, 61%)');
170 |             document.body.style.setProperty('--headerAccent', 'hsl(0,0%,28%)');
171 |             document.body.style.setProperty('--fg', 'hsl(240, 5%, 69%)');
172 |             document.body.style.setProperty('--secondFg', 'hsl(0,0%,28%)');
173 |         }
174 |         else if (popup === 'theme_alt.html') {
175 |             optAlt.classList.add('enabled');
176 |             document.body.style.setProperty('--accent', 'hsl(228, 57%, 73%)');
177 |             document.body.style.setProperty('--bg', 'hsl(0, 0%, 100%)');
178 |             document.body.style.setProperty('--headerBg', 'hsl(0, 0%, 99%)');
179 |             document.body.style.setProperty('--headerFg', 'hsl(228, 57%, 73%)');
180 |             document.body.style.setProperty('--headerAccent', 'hsl(0,0%,28%)');
181 |             document.body.style.setProperty('--fg', 'hsl(240, 5%, 69%)');
182 |             document.body.style.setProperty('--secondFg', 'hsl(0, 0%, 32%)');
183 |         }
184 |         else if (popup === 'theme_alt2.html') {
185 |             optAlt2.classList.add('enabled');
186 |             document.body.style.setProperty('--accent', 'hsl(197, 67%, 48%)');
187 |             document.body.style.setProperty('--bg', 'hsl(220, 5%, 8%)');
188 |             document.body.style.setProperty('--headerBg', 'hsl(220, 5%, 7%)');
189 |             document.body.style.setProperty('--headerFg', 'hsl(228,3%,66%)');
190 |             document.body.style.setProperty('--headerAccent', 'hsl(197, 67%, 48%)');
191 |             document.body.style.setProperty('--fg', 'hsl(228,3%,66%)');
192 |             document.body.style.setProperty('--secondFg', 'hsl(208,8%,48%)');
193 |         }
194 |         else {
195 |             optDark.classList.add('enabled');
196 |             document.body.style.setProperty('--accent', 'hsl(228,57%,73%)');
197 |             document.body.style.setProperty('--bg', 'hsl(0,0%,10%)');
198 |             document.body.style.setProperty('--headerBg', 'hsl(240,3%,12%)');
199 |             document.body.style.setProperty('--headerFg', 'hsl(228,3%,66%)');
200 |             document.body.style.setProperty('--headerAccent', 'hsl(228,57%,73%)');
201 |             document.body.style.setProperty('--fg', 'hsl(228,3%,66%)');
202 |             document.body.style.setProperty('--secondFg', 'hsl(208,8%,48%)');
203 |         }
204 |         fontsize = start.fontsize;
205 |         if (fontsize === 'small') {
206 |             optSmall.classList.add('enabled');
207 |         }
208 |         else if (fontsize === 'medium') {
209 |             optMedium.classList.add('enabled');
210 |         }
211 |         else {
212 |             optLarge.classList.add('enabled');
213 |         }
214 |         hidden = start.hidden;
215 |         if (hidden.length > 0) {
216 |             showEXT();
217 |         }
218 |         else {
219 |             empty();
220 |         }
221 |     });
222 | };
223 | 
224 | const optLight = document.getElementById('light');
225 | const optDark = document.getElementById('dark');
226 | const optAlt = document.getElementById('alt');
227 | const optAlt2 = document.getElementById('alt2');
228 | const optSmall = document.getElementById('small');
229 | const optMedium = document.getElementById('medium');
230 | const optLarge = document.getElementById('large');
231 | const slide = document.getElementById('maxwidth');
232 | const disp = document.getElementById('display');
233 | const show = document.getElementById('show');
234 | width = {};
235 | popup = {};
236 | fontsize = {};
237 | hidden = [];
238 | setup();
239 | slide.oninput = function() {
240 |     width = this.value
241 |     disp.innerHTML = width + 'px';
242 | };
243 | slide.onchange = function() {
244 |     chrome.storage.sync.set({'width': width}, function() {
245 |         disp.innerHTML = width + 'px';
246 |     });
247 | };
248 | optLight.addEventListener('click', setLight);
249 | optDark.addEventListener('click', setDark);
250 | optAlt.addEventListener('click', setAlt);
251 | optAlt2.addEventListener('click', setAlt2);
252 | optSmall.addEventListener('click', setSmall);
253 | optMedium.addEventListener('click', setMedium);
254 | optLarge.addEventListener('click', setLarge);
255 | document.getElementById('extPage').addEventListener('click', function() {
256 |     chrome.runtime.sendMessage('extensions pls');
257 | });
258 | chrome.runtime.onMessage.addListener(function(message) {
259 |     if (message === 'hide it!') {
260 |         chrome.storage.sync.get({'hidden': []}, function(msg) {
261 |             hidden = msg.hidden;
262 |             show.innerHTML = '';
263 |             showEXT();
264 |         });
265 |     }
266 | });
267 | 


--------------------------------------------------------------------------------
/style/fonts/Raleway-Medium.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luetage/extension_control/c96baeeefd8221b0d3d133bb6776a80c28a2d04d/style/fonts/Raleway-Medium.ttf


--------------------------------------------------------------------------------
/style/fonts/Raleway-SemiBold.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luetage/extension_control/c96baeeefd8221b0d3d133bb6776a80c28a2d04d/style/fonts/Raleway-SemiBold.ttf


--------------------------------------------------------------------------------
/style/fonts/Raleway-Thin.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/luetage/extension_control/c96baeeefd8221b0d3d133bb6776a80c28a2d04d/style/fonts/Raleway-Thin.ttf


--------------------------------------------------------------------------------
/style/options.css:
--------------------------------------------------------------------------------
  1 | @font-face {
  2 |   font-family: 'Raleway-Medium';
  3 |   src: url('fonts/Raleway-Medium.ttf') format('truetype');
  4 | }
  5 | @font-face {
  6 |   font-family: 'Raleway-Thin';
  7 |   src: url('fonts/Raleway-Thin.ttf') format('truetype');
  8 | }
  9 | 
 10 | body {
 11 |     background-color: var(--bg);
 12 |     margin: 0;
 13 |     font-family: "Raleway-Medium", "Helvetica Neue", "Helvetica", sans-serif;
 14 |     font-weight: 600;
 15 |     font-size: 14px;
 16 |     letter-spacing: .5px;
 17 |     cursor: default;
 18 |     user-select: none;
 19 |     overflow-x: hidden;
 20 | }
 21 | #header {
 22 |     position: fixed;
 23 |     background-color: var(--headerBg);
 24 |     letter-spacing: .5px;
 25 |     text-align: center;
 26 |     top: 0;
 27 |     left: 0;
 28 |     right: 0;
 29 |     font-size: 22px;
 30 |     padding: .8rem 0 .6rem;
 31 | }
 32 | .norm { color: var(--headerFg); }
 33 | 
 34 | .high { color: var(--headerAccent); } 
 35 | 
 36 | #content {
 37 |     position: absolute;
 38 |     width: 1000px;
 39 |     line-height: 1.5;
 40 |     color: var(--fg);
 41 |     top: 20vh;
 42 |     left: 0;
 43 |     right: 0;
 44 |     padding-bottom: 55px;
 45 |     margin: auto;
 46 |     text-align: left;
 47 | }
 48 | 
 49 | * { box-sizing: border-box; }
 50 | 
 51 | /* Create columns */
 52 | .column {
 53 |     float: left;
 54 |     width: 55%;
 55 |     padding: 0 40px;
 56 | }
 57 | .column-right {
 58 |     float: left;
 59 |     width: 45%;
 60 |     padding: 0 40px;
 61 | }
 62 | .sub-column {
 63 |     width: 100%;
 64 |     max-height: 33vh;
 65 |     overflow: hidden;
 66 |     text-overflow: ellipsis;
 67 | }
 68 | .sub-column:hover {
 69 |     width: 100%;
 70 |     overflow-y: overlay;
 71 | }
 72 | 
 73 | /* Clears floats after the columns */
 74 | .row:after {
 75 |     content: "";
 76 |     display: table;
 77 |     clear: both;
 78 | }
 79 | 
 80 | /* Stacks columns on top of each other for smaller displays */
 81 | @media screen and (max-width: 950px) {
 82 |     .column, .right {
 83 |         width: 100%;
 84 |     }
 85 | }
 86 | .float {
 87 |     white-space: nowrap;
 88 |     overflow: auto;
 89 |     margin-bottom: 15px;
 90 | }
 91 | .left { float: left; }
 92 | 
 93 | .right {
 94 |     float: right;
 95 |     left: -100px
 96 | }
 97 | #extPage { cursor: pointer; }
 98 | 
 99 | #extPage:after {
100 |     content: '';
101 |     display: block;
102 |     position: initial;
103 |     margin: auto;
104 |     margin-top: 3px;
105 |     height: 1px;
106 |     width: 0;
107 |     background: transparent;
108 |     transition: width 1s ease, background-color 1s ease !important
109 | }
110 | #extPage:hover:after {
111 |     width: 165px;
112 |     background-color: var(--fg);
113 | }
114 | h1 {
115 |     margin-top: 0;
116 |     font-family: "Raleway-Thin", "Helvetica Neue", "Helvetica", sans-serif;
117 |     letter-spacing: .5px;
118 |     text-align: left;
119 |     font-size: 1.6rem;
120 |     color: var(--secondFg);
121 | }
122 | #hint { visibility: hidden; }
123 | 
124 | .h2 {
125 |     font-family: "Raleway-Medium", "Helvetica Neue", "Helvetica", sans-serif;
126 |     font-weight: 600;
127 |     font-size: .8rem;
128 |     color: var(--fg);
129 | }
130 | 
131 | .contrast { color: var(--secondFg); }
132 | 
133 | .extensions {
134 |     cursor:pointer;
135 |     color: var(--fg);
136 | }
137 | #dark, #light, #alt, #alt2, #alt3, #alt4, #small, #medium, #large {
138 |     color: var(--fg);
139 |     cursor: pointer;
140 | }
141 | #dark, #alt, #alt2, #alt3, #medium, #large { margin-left: 20px; }
142 | 
143 | #dark:hover, #light:hover, #alt:hover, #alt2:hover, #alt3:hover, #small:hover, #medium:hover, #large:hover,
144 | .extensions:hover, #dark.enabled, #light.enabled, #alt.enabled, #alt2.enabled, #alt3.enabled, #small.enabled, #medium.enabled, #large.enabled, #display 
145 |     { color: var(--accent); }
146 | 
147 | #display {
148 |     display: inline-block;
149 |     width: 50px;
150 |     text-align: right;
151 |     margin-left: 10px;
152 | }
153 | form { display: inline; }
154 | 
155 | button {
156 |     background: none;
157 |     border: none;
158 |     font-family: "Raleway-Medium", "Helvetica Neue", "Helvetica", sans-serif;
159 |     font-weight: 600;
160 |     font-size: 14px;
161 |     color: var(--accent);
162 |     cursor: pointer;
163 |     padding: 1px;
164 | }
165 | button.foot { font-size: 1rem; }
166 | 
167 | button:after {
168 |     content: '';
169 |     display: block;
170 |     position: initial;
171 |     margin: auto;
172 |     margin-top: 3px;
173 |     height: 1px;
174 |     width: 0;
175 |     background: transparent;
176 |     transition: width 1s ease, background-color 1s ease !important
177 | }
178 | button:hover:after {
179 |     width: 100%;
180 |     background: var(--fg);
181 | }
182 | button:focus { outline: none; }
183 | 
184 | p {
185 |     margin: 10px 0 10px 0;
186 |     text-align: left;
187 | }
188 | p:last-of-type { margin-bottom: 0px; }
189 | 
190 | p:first-of-type { margin-top: 0px; }
191 | 
192 | /* Range slider */
193 | input { cursor: pointer; }
194 | 
195 | input:focus { outline: none; }
196 | 
197 | input[type="range"] {
198 |     background: var(--accent);
199 |     width: 130px;
200 |     height: 1px;
201 |     -webkit-appearance: none;
202 |     border-radius: 3px;
203 | }
204 | input[type="range"]::-webkit-slider-thumb {
205 |     -webkit-appearance: none !important;
206 |     width:14px;
207 |     height:14px;
208 |     border-radius: 50%;
209 |     border: 2px solid var(--secondFg);
210 |     background: var(--bg);
211 |     margin-top: -1px;
212 | }
213 | input[type="range"]::-webkit-slider-thumb:hover, input[type="range"]::-webkit-slider-thumb:active {
214 |     -webkit-appearance: none !important;
215 |     border: 2px solid var(--accent);
216 | }
217 | 
218 | /* Scrollbar */
219 | /* Page behaviour */
220 | body { overflow: overlay !important; scroll-behavior: smooth; }
221 | 
222 | /* Scrollbars */
223 | ::-webkit-scrollbar {
224 |     border: 0;
225 |     width: 8px;
226 |     height: 8px;
227 | }
228 | 
229 | ::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background-color: var(--bg); }
230 | 
231 | ::-webkit-scrollbar-track-piece:hover, ::-webkit-scrollbar-track-piece:active { background: linear-gradient(180deg, hsla(0, 0%, 53%, .2), transparent); }
232 | 
233 | /* Scrollbar thumb */
234 | ::-webkit-scrollbar-thumb {
235 |     background-color: var(--secondFg);
236 |     border: 3px solid var(--bg);
237 |     border-radius: 4px;
238 | 
239 | }
240 | 
241 | ::-webkit-scrollbar-thumb:hover, ::-webkit-scrollbar-thumb:active { background-color: var(--accent); }
242 | 
243 | :-webkit-scrollbar-button { display: none !important; }


--------------------------------------------------------------------------------
/style/theme_alt.css:
--------------------------------------------------------------------------------
  1 | :root {
  2 |     --bg: hsl(0,0%,100%);
  3 |     --fg: hsl(207,5%,58%);
  4 |     --fgShadow: hsl(207,5%,69%);
  5 |     --headerBg: hsl(0,0%,100%);
  6 |     --headerHi: hsl(0,0%,28%);
  7 |     --headerHiShadow: hsl(0,0%,38%);
  8 |     --headerFg: hsl(228,57%,73%);
  9 |     --headerFgShadow: hsl(228,3%,75%);
 10 |     --extBgHi:hsl(240,3%,96%);
 11 |     --extFgHi: hsl(0,0%,28%);
 12 |     --extEn: hsl(228,57%,73%);
 13 |     --extEnShadow: hsl(0,0%,40%);
 14 |     --extEnHi: hsl(228,59%,76%);
 15 |     --extEnHiShadow: hsl(0,0%,35%);
 16 |     --menuBg: hsl(240,5%,78%);
 17 |     --menuFgAct: hsl(360,100%,100%);
 18 |     --menuFgActHi: hsl(0, 0%, 94%);
 19 |     --menuBgHi: hsl(228,57%,73%);
 20 |     --menuBgHi2: hsl(349,97%,76%);
 21 |     --desc: hsl(0,0%,28%);
 22 |     --descShadow: hsl(0,0%,38%);
 23 | }
 24 | 
 25 | @font-face {
 26 |     font-family: 'Raleway-Medium';
 27 |     src: url('fonts/Raleway-Medium.ttf') format('truetype');
 28 | }
 29 | @font-face {
 30 |     font-family: 'Raleway-SemiBold';
 31 |     src: url('fonts/Raleway-SemiBold.ttf') format('truetype');
 32 | }
 33 | 
 34 | body {
 35 |     display: block;
 36 |     font-family: "Raleway-Medium", "Helvetica Neue", "Helvetica", sans-serif;
 37 |     letter-spacing: .5px;
 38 |     min-width: 180px;
 39 |     min-height: 200px;
 40 |     background: var(--bg);
 41 |     color: var(--fg);
 42 |     margin: 0;
 43 |     padding: 1px 1px 10px 1px;
 44 |     cursor: default;
 45 |     user-select: none;
 46 | }
 47 | 
 48 | /* Header */
 49 | #header {
 50 |     position: fixed;
 51 |     top: 0;
 52 |     font-family: "Raleway-Medium", "Helvetica Neue", "Helvetica", sans-serif;
 53 |     font-weight: 600;
 54 |     text-align: left;
 55 |     padding: 16px 15px 11px;
 56 |     width: 100%;
 57 |     background-color: var(--headerBg);
 58 |     color: var(--headerFg);
 59 |     cursor: pointer;
 60 |     z-index: 10;
 61 | }
 62 | 
 63 | .contrast { color: var(--headerHi); }
 64 | 
 65 | /* Extensions */
 66 | #switcher {
 67 |     position: relative;
 68 |     max-height: var(--height);
 69 |     overflow-y: hidden;
 70 |     margin-top: var(--top);
 71 |     margin-bottom: 5px;
 72 | }
 73 | #switcher:hover { overflow-y: overlay; }
 74 | 
 75 | .extension {
 76 |     padding: 5px 25px;
 77 |     cursor: pointer;
 78 | }
 79 | .extension div {
 80 |     border: 1px solid transparent;
 81 |     width: 100%;
 82 |     white-space: nowrap;
 83 |     overflow: hidden;
 84 |     text-overflow: ellipsis;
 85 | }
 86 | .extension div::before {
 87 |     position: absolute;
 88 |     content: "";
 89 |     text-align: center;
 90 |     left: 1px;
 91 |     width: 20px;
 92 | }
 93 | .extension:hover {
 94 |     background-color: var(--extBgHi);
 95 |     color: var(--extFgHi);
 96 |     font-weight: 600;
 97 | }
 98 | .extension.enabled, .extension.enabled:hover {
 99 |     font-weight: 600;
100 |     color: var(--extEn);
101 | }
102 | .extension.enabled:hover { color: var(--extEnHi); }
103 | 
104 | /* Menu */
105 | #menu {
106 |     padding: 5px 15px;
107 |     white-space: nowrap;
108 |     overflow: hidden;
109 | }
110 | .info, .hide, .options, .uninstall {
111 |     font-family: "Raleway-Semibold", "Helvetica Neue", "Helvetica", sans-serif;
112 |     width: 48%;
113 |     text-align: center;
114 |     padding: 8px 0;
115 |     border-radius: 3px;
116 |     background-color: var(--menuBg);
117 | }
118 | .info {
119 |     float: left;
120 |     color: var(--menuFgAct);
121 |     cursor: pointer;
122 | }
123 | .hide {
124 |     float: right;
125 |     color: var(--menuFgAct);
126 |     cursor: pointer;
127 | }
128 | .options {
129 |     float: left;
130 |     clear: left;
131 |     margin-top: 5px;
132 |     color: var(--fg);
133 |     cursor: default;
134 | }
135 | .options.optActive {
136 |     color: var(--menuFgAct);
137 |     cursor: pointer;
138 | }
139 | .info:hover, .hide:hover, .options.optActive:hover {
140 |     background-color: var(--menuBgHi);
141 |     color: var(--menuFgActHi) !important;
142 | }
143 | .uninstall {
144 |     float: right;
145 |     clear: right;
146 |     margin-top: 5px;
147 |     color: var(--menuFgAct);
148 |     cursor: pointer;
149 | }
150 | .uninstall:hover {
151 |     background-color: var(--menuBgHi2);
152 |     color: var(--menuFgActHi) !important;
153 | }
154 | 
155 | /* Info */
156 | #txtdiv {
157 |     padding: 0 15px;
158 |     border: 1px solid transparent;
159 |     white-space: normal;
160 |     word-break: break-all;
161 |     margin-top: 0px;
162 | }
163 | #txtdiv p {
164 |     margin-block-start: 0;
165 |     margin-block-end: 0;
166 |     margin-bottom: 4px;
167 | }
168 | #txtdiv p:last-of-type { margin-bottom: 0; }
169 | 
170 | #txtdiv a {
171 |     cursor: pointer;
172 |     text-decoration: none;
173 | }
174 | .desc {
175 |     font-family: "Raleway-Semibold", "Helvetica Neue", "Helvetica", sans-serif;
176 |     color: var(--desc);
177 | }
178 | #copy { cursor: pointer; }
179 | 
180 | /* Scrollbar */
181 | /* Page behaviour */
182 | body { overflow: overlay !important; scroll-behavior: smooth; }
183 | 
184 | /* Scrollbars */
185 | ::-webkit-scrollbar {
186 |     border: 0;
187 |     width: 8px;
188 |     height: 8px;
189 | }
190 | 
191 | ::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background-color: var(--bg); }
192 | 
193 | ::-webkit-scrollbar-track-piece:hover, ::-webkit-scrollbar-track-piece:active { background: linear-gradient(180deg, hsla(0, 0%, 53%, .2), transparent); }
194 | 
195 | /* Scrollbar thumb */
196 | ::-webkit-scrollbar-thumb {
197 |     background-color: var(--secondFg);
198 |     border: 3px solid var(--bg);
199 |     border-radius: 4px;
200 | 
201 | }
202 | 
203 | ::-webkit-scrollbar-thumb:hover, ::-webkit-scrollbar-thumb:active { background-color: var(--accent); }
204 | 
205 | :-webkit-scrollbar-button { display: none !important; }


--------------------------------------------------------------------------------
/style/theme_alt2.css:
--------------------------------------------------------------------------------
  1 | :root {
  2 |     --bg: hsl(220, 5%, 8%);
  3 |     --fg: hsl(213, 11%, 45%);
  4 |     --fgShadow: hsl(228,3%,38%);
  5 |     --headerBg: hsl(220, 5%, 7%);
  6 |     --headerHi: hsl(197, 67%, 48%);
  7 |     --headerFg: hsl(228,3%,66%);
  8 |     --extBgHi:hsl(220, 5%, 13%);
  9 |     --extFgHi: hsl(228,3%,86%);
 10 |     --extFgHiShadow: hsl(228,3%,46%);
 11 |     --extEn: hsl(197, 67%, 48%);
 12 |     --extEnHi: hsl(228,3%,92%);
 13 |     --extEnHiShadow: hsl(228,3%,62%);
 14 |     --menuBg: hsl(0,0%,3%);
 15 |     --menuFgAct: hsl(210,2%,81%);
 16 |     --menuFgActHi: hsl(210,2%,95%);
 17 |     --menuBgHi: hsl(220, 5%, 13%);
 18 |     --menuBgHi2: hsl(357,55%,52%);
 19 |     --desc: hsl(228,3%,66%);
 20 |     --descShadow: hsl(228,3%,56%);
 21 | }
 22 | 
 23 | @font-face {
 24 |     font-family: 'Raleway-Medium';
 25 |     src: url('fonts/Raleway-Medium.ttf') format('truetype');
 26 | }
 27 | @font-face {
 28 |     font-family: 'Raleway-SemiBold';
 29 |     src: url('fonts/Raleway-SemiBold.ttf') format('truetype');
 30 | }
 31 | 
 32 | body {
 33 |     display: block;
 34 |     font-family: "Raleway-Medium", "Helvetica Neue", "Helvetica", sans-serif;
 35 |     letter-spacing: .5px;
 36 |     min-width: 180px;
 37 |     min-height: 200px;
 38 |     background: var(--bg);
 39 |     color: var(--fg);
 40 |     margin: 0;
 41 |     padding: 01px 1px 10px 1px;
 42 |     cursor: default;
 43 |     user-select: none;
 44 | }
 45 | 
 46 | /* Header */
 47 | #header {
 48 |     position: fixed;
 49 |     top: 0;
 50 |     font-family: "Raleway-Medium", "Helvetica Neue", "Helvetica", sans-serif;
 51 |     font-weight: 600;
 52 |     text-align: left;
 53 |     padding: 16px 15px 11px;
 54 |     width: 100%;
 55 |     background-color: var(--headerBg);
 56 |     color: var(--headerFg);
 57 |     cursor: pointer;
 58 |     z-index: 10;
 59 | }
 60 | 
 61 | .contrast { color: var(--headerHi); }
 62 | 
 63 | /* Extensions */
 64 | #switcher {
 65 |     position: relative;
 66 |     max-height: var(--height);
 67 |     overflow-y: hidden;
 68 |     margin-top: var(--top);
 69 |     margin-bottom: 5px;
 70 | }
 71 | #switcher:hover { overflow-y: overlay; }
 72 | 
 73 | .extension {
 74 |     padding: 5px 15px;
 75 |     cursor: pointer;
 76 | }
 77 | .extension div {
 78 |     border: 1px solid transparent;
 79 |     width: 100%;
 80 |     white-space: nowrap;
 81 |     overflow: hidden;
 82 |     text-overflow: ellipsis;
 83 | }
 84 | .extension div::before {
 85 |     position: absolute;
 86 |     content: "";
 87 |     text-align: center;
 88 |     left: 1px;
 89 |     width: 20px;
 90 | }
 91 | .extension:hover {
 92 |     background-color: var(--extBgHi);
 93 |     color: var(--extFgHi);
 94 |     font-weight: 600;
 95 | }
 96 | .extension.enabled, .extension.enabled:hover {
 97 |     font-weight: 600;
 98 |     color: var(--extEn);
 99 | }
100 | .extension.enabled:hover { color: var(--extEnHi); }
101 | 
102 | /* Menu */
103 | #menu {
104 |     padding: 5px 15px;
105 |     white-space: nowrap;
106 |     overflow: hidden;
107 | }
108 | .info, .hide, .options, .uninstall {
109 |     font-family: "Raleway-Semibold", "Helvetica Neue", "Helvetica", sans-serif;
110 |     width: 48%;
111 |     text-align: center;
112 |     padding: 8px 0;
113 |     border-radius: 3px;
114 |     background-color: var(--menuBg);
115 | }
116 | .info {
117 |     float: left;
118 |     color: var(--menuFgAct);
119 |     cursor: pointer;
120 | }
121 | .hide {
122 |     float: right;
123 |     color: var(--menuFgAct);
124 |     cursor: pointer;
125 | }
126 | .options {
127 |     float: left;
128 |     clear: left;
129 |     margin-top: 5px;
130 |     color: var(--fg);
131 |     cursor: default;
132 | }
133 | .options.optActive {
134 |     color: var(--menuFgAct);
135 |     cursor: pointer;
136 | }
137 | .info:hover, .hide:hover, .options.optActive:hover {
138 |     background-color: var(--menuBgHi);
139 |     color: var(--menuFgActHi) !important;
140 | }
141 | .uninstall {
142 |     float: right;
143 |     clear: right;
144 |     margin-top: 5px;
145 |     color: var(--menuFgAct);
146 |     cursor: pointer;
147 | }
148 | .uninstall:hover {
149 |     background-color: var(--menuBgHi2);
150 |     color: var(--menuFgActHi) !important;
151 | }
152 | 
153 | /* Info */
154 | #txtdiv {
155 |     padding: 0 15px 0 15px;
156 |     border: 1px solid transparent;
157 |     white-space: normal;
158 |     word-break: break-all;
159 |     margin-top: 0;
160 | }
161 | #txtdiv p {
162 |     margin-block-start: 0;
163 |     margin-block-end: 0;
164 |     margin-bottom: 4px;
165 | }
166 | #txtdiv p:last-of-type { margin-bottom: 0; }
167 | 
168 | #txtdiv a {
169 |     cursor: pointer;
170 |     text-decoration: none;
171 | }
172 | .desc { color: var(--desc); }
173 | 
174 | #copy { cursor: pointer; }
175 | 
176 | /* Scrollbar */
177 | /* Page behaviour */
178 | body { overflow: overlay !important; scroll-behavior: smooth; }
179 | 
180 | /* Scrollbars */
181 | ::-webkit-scrollbar {
182 |     border: 0;
183 |     width: 8px;
184 |     height: 8px;
185 | }
186 | 
187 | ::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background-color: var(--bg); }
188 | 
189 | ::-webkit-scrollbar-track-piece:hover, ::-webkit-scrollbar-track-piece:active { background: linear-gradient(180deg, hsla(0, 0%, 53%, .2), transparent); }
190 | 
191 | /* Scrollbar thumb */
192 | ::-webkit-scrollbar-thumb {
193 |     background-color: var(--secondFg);
194 |     border: 3px solid var(--bg);
195 |     border-radius: 4px;
196 | 
197 | }
198 | 
199 | ::-webkit-scrollbar-thumb:hover, ::-webkit-scrollbar-thumb:active { background-color: var(--accent); }
200 | 
201 | :-webkit-scrollbar-button { display: none !important; }


--------------------------------------------------------------------------------
/style/theme_dark.css:
--------------------------------------------------------------------------------
  1 | :root {
  2 |     --bg: hsl(0,0%,10%);
  3 |     --fg: hsl(208,8%,48%);
  4 |     --fgShadow: hsl(208,8%,68%);
  5 |     --headerBg: hsl(240,3%,12%);
  6 |     --headerHi: hsl(228,57%,73%);
  7 |     --headerFg: hsl(228,3%,66%);
  8 |     --extBgHi: hsl(228,57%,73%);
  9 |     --extFgHi: hsl(228,3%,86%);
 10 |     --extEn: hsl(228,57%,73%);
 11 |     --extEnHi: hsl(228,3%,86%);
 12 |     --menuBg: hsl(240,2%,19%);
 13 |     --menuFgAct: hsl(210,2%,81%);
 14 |     --menuFgActHi: hsl(210,2%,95%);
 15 |     --menuBgHi: hsl(228,57%,69%);
 16 |     --menuBgHi2: hsl(349,60%,59%);
 17 |     --desc: hsl(228,3%,66%);
 18 |     --descShadow: hsl(228,3%,69%);
 19 | }
 20 | 
 21 | @font-face {
 22 |     font-family: 'Raleway-Medium';
 23 |     src: url('fonts/Raleway-Medium.ttf') format('truetype');
 24 | }
 25 | @font-face {
 26 |     font-family: 'Raleway-SemiBold';
 27 |     src: url('fonts/Raleway-SemiBold.ttf') format('truetype');
 28 | }
 29 | 
 30 | body {
 31 |     display: block;
 32 |     font-family: "Raleway-Medium", "Helvetica Neue", "Helvetica", sans-serif;
 33 |     letter-spacing: .5px;
 34 |     min-width: 180px;
 35 |     min-height: 200px;
 36 |     background: var(--bg);
 37 |     color: var(--fg);
 38 |     margin: 0;
 39 |     padding: 01px 1px 10px 1px;
 40 |     cursor: default;
 41 |     user-select: none;
 42 | }
 43 | 
 44 | /* Header */
 45 | #header {
 46 |     position: fixed;
 47 |     top: 0;
 48 |     font-family: "Raleway-Medium", "Helvetica Neue", "Helvetica", sans-serif;
 49 |     font-weight: 600;
 50 |     text-align: left;
 51 |     padding: 16px 15px 11px;
 52 |     width: 100%;
 53 |     background-color: var(--headerBg);
 54 |     color: var(--headerFg);
 55 |     cursor: pointer;
 56 |     z-index: 10;
 57 | }
 58 | 
 59 | .contrast { color: var(--headerHi); }
 60 | 
 61 | /* Extensions */
 62 | #switcher {
 63 |     position: relative;
 64 |     max-height: var(--height);
 65 |     overflow-y: hidden;
 66 |     margin-top: var(--top);
 67 |     margin-bottom: 5px;
 68 | }
 69 | #switcher:hover { overflow-y: overlay; }
 70 | 
 71 | .extension {
 72 |     padding: 5px 15px;
 73 |     cursor: pointer;
 74 | }
 75 | .extension div {
 76 |     border: 1px solid transparent;
 77 |     width: 100%;
 78 |     white-space: nowrap;
 79 |     overflow: hidden;
 80 |     text-overflow: ellipsis;
 81 | }
 82 | .extension div::before {
 83 |     position: absolute;
 84 |     content: "";
 85 |     text-align: center;
 86 |     left: 1px;
 87 |     width: 20px;
 88 | }
 89 | .extension:hover {
 90 |     background-color: var(--extBgHi);
 91 |     color: var(--extFgHi);
 92 |     font-weight: 600;
 93 | }
 94 | .extension.enabled, .extension.enabled:hover {
 95 |     font-weight: 600;
 96 |     color: var(--extEn);
 97 | }
 98 | .extension.enabled:hover { color: var(--extEnHi); }
 99 | 
100 | /* Menu */
101 | #menu {
102 |     padding: 5px 15px;
103 |     white-space: nowrap;
104 |     overflow: hidden;
105 | }
106 | .info, .hide, .options, .uninstall {
107 |     font-family: "Raleway-Semibold", "Helvetica Neue", "Helvetica", sans-serif;
108 |     width: 48%;
109 |     text-align: center;
110 |     padding: 8px 0;
111 |     border-radius: 3px;
112 |     background-color: var(--menuBg);
113 | }
114 | .info {
115 |     float: left;
116 |     color: var(--menuFgAct);
117 |     cursor: pointer;
118 | }
119 | .hide {
120 |     float: right;
121 |     color: var(--menuFgAct);
122 |     cursor: pointer;
123 | }
124 | .options {
125 |     float: left;
126 |     clear: left;
127 |     margin-top: 5px;
128 |     color: var(--fg);
129 |     cursor: default;
130 | }
131 | .options.optActive {
132 |     color: var(--menuFgAct);
133 |     cursor: pointer;
134 | }
135 | .info:hover, .hide:hover, .options.optActive:hover {
136 |     background-color: var(--menuBgHi);
137 |     color: var(--menuFgActHi) !important;
138 | }
139 | .uninstall {
140 |     float: right;
141 |     clear: right;
142 |     margin-top: 5px;
143 |     color: var(--menuFgAct);
144 |     cursor: pointer;
145 | }
146 | .uninstall:hover {
147 |     background-color: var(--menuBgHi2);
148 |     color: var(--menuFgActHi) !important;
149 | }
150 | 
151 | /* Info */
152 | #txtdiv {
153 |     padding: 0 15px 0 15px;
154 |     border: 1px solid transparent;
155 |     white-space: normal;
156 |     word-break: break-all;
157 |     margin-top: 0;
158 | }
159 | #txtdiv p {
160 |     margin-block-start: 0;
161 |     margin-block-end: 0;
162 |     margin-bottom: 4px;
163 | }
164 | #txtdiv p:last-of-type { margin-bottom: 0; }
165 | 
166 | #txtdiv a {
167 |     cursor: pointer;
168 |     text-decoration: none;
169 | }
170 | .desc { color: var(--desc); }
171 | 
172 | #copy { cursor: pointer; }
173 | 
174 | /* Scrollbar */
175 | /* Page behaviour */
176 | body { overflow: overlay !important; scroll-behavior: smooth; }
177 | 
178 | /* Scrollbars */
179 | ::-webkit-scrollbar {
180 |     border: 0;
181 |     width: 8px;
182 |     height: 8px;
183 | }
184 | 
185 | ::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background-color: var(--bg); }
186 | 
187 | ::-webkit-scrollbar-track-piece:hover, ::-webkit-scrollbar-track-piece:active { background: linear-gradient(180deg, hsla(0, 0%, 53%, .2), transparent); }
188 | 
189 | /* Scrollbar thumb */
190 | ::-webkit-scrollbar-thumb {
191 |     background-color: var(--secondFg);
192 |     border: 3px solid var(--bg);
193 |     border-radius: 4px;
194 | 
195 | }
196 | 
197 | ::-webkit-scrollbar-thumb:hover, ::-webkit-scrollbar-thumb:active { background-color: var(--accent); }
198 | 
199 | :-webkit-scrollbar-button { display: none !important; }


--------------------------------------------------------------------------------
/style/theme_light.css:
--------------------------------------------------------------------------------
  1 | :root {
  2 |     --bg: hsl(0,0%,100%);
  3 |     --fg: hsl(240,5%,65%);
  4 |     --fgShadow: hsl(240,5%,59%);
  5 |     --headerBg: hsl(240,3%,96%);
  6 |     --headerHi:hsl(0,0%,28%);
  7 |     --headerFg: hsl(349, 83%, 61%);
  8 |     --extBgHi:hsl(240,3%,96%);
  9 |     --extFgHi: hsl(0,0%,28%);
 10 |     --extEn:   hsl(349, 83%, 61%);
 11 |     --extEnHi:  hsl(349, 83%, 61%);
 12 |     --menuBg: hsl(240,5%,82%);
 13 |     --menuFgAct: hsl(360,100%,100%);
 14 |     --menuFgActHi: hsl(0, 0%, 94%);
 15 |     --menuBgHi:  hsl(0,0%,28%);
 16 |     --menuBgHi2: hsl(349, 83%, 61%);
 17 |     --desc: hsl(0,0%,28%);
 18 |     --descShadow: hsl(0,0%,44%);
 19 | }
 20 | 
 21 | @font-face {
 22 |     font-family: 'Raleway-Medium';
 23 |     src: url('fonts/Raleway-Medium.ttf') format('truetype');
 24 | }
 25 | @font-face {
 26 |     font-family: 'Raleway-SemiBold';
 27 |     src: url('fonts/Raleway-SemiBold.ttf') format('truetype');
 28 | }
 29 | 
 30 | body {
 31 |     display: block;
 32 |     font-family: "Raleway-Medium", "Helvetica Neue", "Helvetica", sans-serif;
 33 |     letter-spacing: .5px;
 34 |     min-width: 180px;
 35 |     min-height: 200px;
 36 |     background: var(--bg);
 37 |     color: var(--fg);
 38 |     margin: 0;
 39 |     padding: 1px 1px 10px 1px;
 40 |     cursor: default;
 41 |     user-select: none;
 42 | }
 43 | 
 44 | /* Header */
 45 | #header {
 46 |     position: fixed;
 47 |     top: 0;
 48 |     font-family: "Raleway-Medium", "Helvetica Neue", "Helvetica", sans-serif;
 49 |     font-weight: 600;
 50 |     text-align: left;
 51 |     padding: 16px 15px 11px;
 52 |     width: 100%;
 53 |     background-color: var(--headerBg);
 54 |     color: var(--headerFg);
 55 |     cursor: pointer;
 56 |     z-index: 10;
 57 | }
 58 | 
 59 | .contrast { color: var(--headerHi); }
 60 | 
 61 | /* Extensions */
 62 | #switcher {
 63 |     position: relative;
 64 |     max-height: var(--height);
 65 |     overflow-y: hidden;
 66 |     margin-top: var(--top);
 67 |     margin-bottom: 5px;
 68 | }
 69 | #switcher:hover { overflow-y: overlay; }
 70 | 
 71 | .extension {
 72 |     padding: 5px 25px;
 73 |     cursor: pointer;
 74 | }
 75 | .extension div {
 76 |     border: 1px solid transparent;
 77 |     width: 100%;
 78 |     white-space: nowrap;
 79 |     overflow: hidden;
 80 |     text-overflow: ellipsis;
 81 | }
 82 | .extension div::before {
 83 |     position: absolute;
 84 |     content: "";
 85 |     text-align: center;
 86 |     left: 1px;
 87 |     width: 20px;
 88 | }
 89 | .extension:hover {
 90 |     background-color: var(--extBgHi);
 91 |     color: var(--extFgHi);
 92 |     font-weight: 600;
 93 | }
 94 | .extension.enabled, .extension.enabled:hover {
 95 |     font-weight: 600;
 96 |     color: var(--extEn);
 97 | }
 98 | .extension.enabled:hover { color: var(--extEnHi); }
 99 | 
100 | /* Menu */
101 | #menu {
102 |     padding: 5px 15px;
103 |     white-space: nowrap;
104 |     overflow: hidden;
105 | }
106 | .info, .hide, .options, .uninstall {
107 |     font-family: "Raleway-Semibold", "Helvetica Neue", "Helvetica", sans-serif;
108 |     width: 48%;
109 |     text-align: center;
110 |     padding: 8px 0;
111 |     border-radius: 3px;
112 |     background-color: var(--menuBg);
113 | }
114 | .info {
115 |     float: left;
116 |     color: var(--menuFgAct);
117 |     cursor: pointer;
118 | }
119 | .hide {
120 |     float: right;
121 |     color: var(--menuFgAct);
122 |     cursor: pointer;
123 | }
124 | .options {
125 |     float: left;
126 |     clear: left;
127 |     margin-top: 5px;
128 |     color: var(--fg);
129 |     cursor: default;
130 | }
131 | .options.optActive {
132 |     color: var(--menuFgAct);
133 |     cursor: pointer;
134 | }
135 | .info:hover, .hide:hover, .options.optActive:hover {
136 |     background-color: var(--menuBgHi);
137 |     color: var(--menuFgActHi) !important;
138 | }
139 | .uninstall {
140 |     float: right;
141 |     clear: right;
142 |     margin-top: 5px;
143 |     color: var(--menuFgAct);
144 |     cursor: pointer;
145 | }
146 | .uninstall:hover {
147 |     background-color: var(--menuBgHi2);
148 |     color: var(--menuFgActHi) !important;
149 | }
150 | 
151 | /* Info */
152 | #txtdiv {
153 |     padding: 0 15px;
154 |     border: 1px solid transparent;
155 |     white-space: normal;
156 |     word-break: break-all;
157 |     margin-top: 0px;
158 | }
159 | #txtdiv p {
160 |     margin-block-start: 0;
161 |     margin-block-end: 0;
162 |     margin-bottom: 4px;
163 | }
164 | #txtdiv p:last-of-type { margin-bottom: 0; }
165 | 
166 | #txtdiv a {
167 |     cursor: pointer;
168 |     text-decoration: none;
169 | }
170 | .desc {
171 |     font-family: "Raleway-Semibold", "Helvetica Neue", "Helvetica", sans-serif;
172 |     color: var(--desc);
173 | }
174 | #copy { cursor: pointer; }
175 | 
176 | /* Scrollbar */
177 | /* Page behaviour */
178 | body { overflow: overlay !important; scroll-behavior: smooth; }
179 | 
180 | /* Scrollbars */
181 | ::-webkit-scrollbar {
182 |     border: 0;
183 |     width: 8px;
184 |     height: 8px;
185 | }
186 | 
187 | ::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background-color: var(--bg); }
188 | 
189 | ::-webkit-scrollbar-track-piece:hover, ::-webkit-scrollbar-track-piece:active { background: linear-gradient(180deg, hsla(0, 0%, 53%, .2), transparent); }
190 | 
191 | /* Scrollbar thumb */
192 | ::-webkit-scrollbar-thumb {
193 |     background-color: var(--secondFg);
194 |     border: 3px solid var(--bg);
195 |     border-radius: 4px;
196 | 
197 | }
198 | 
199 | ::-webkit-scrollbar-thumb:hover, ::-webkit-scrollbar-thumb:active { background-color: var(--accent); }
200 | 
201 | :-webkit-scrollbar-button { display: none !important; }


--------------------------------------------------------------------------------
/theme_alt.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <link rel="stylesheet" href="style/theme_alt.css" />
 5 | </head>
 6 | <body>
 7 |     <div id="header">
 8 |         <span><span class="contrast">extension</span>control</span>
 9 |     </div>
10 |     <div id="switcher"></div>
11 |     <script src="drop.js"></script>
12 | </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/theme_alt2.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <link rel="stylesheet" href="style/theme_alt2.css" />
 5 | </head>
 6 | <body>
 7 |     <div id="header">
 8 |         <span><span class="contrast">extension</span>control</span>
 9 |     </div>
10 |     <div id="switcher"></div>
11 |     <script src="drop.js"></script>
12 | </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/theme_dark.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <link rel="stylesheet" href="style/theme_dark.css" />
 5 | </head>
 6 | <body>
 7 |     <div id="header">
 8 |         <span><span class="contrast">extension</span>control</span>
 9 |     </div>
10 |     <div id="switcher"></div>
11 |     <script src="drop.js"></script>
12 | </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/theme_light.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |     <link rel="stylesheet" href="style/theme_light.css" />
 5 | </head>
 6 | <body>
 7 |     <div id="header">
 8 |         <span><span class="contrast">extension</span>control</span>
 9 |     </div>
10 |     <div id="switcher"></div>
11 |     <script src="drop.js"></script>
12 | </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------