├── .editorconfig
├── .eslintrc.json
├── .gitignore
├── .vscode
    └── settings.json
├── LICENSE
├── README.md
├── dist
    ├── icons
    │   ├── 128x128.png
    │   ├── 48x48.png
    │   └── 64x64.png
    ├── manifest.json
    ├── options.css
    ├── options.html
    ├── popup.css
    └── popup.html
├── jest.config.ts
├── package.json
├── preview.png
├── src
    ├── Stylesheet.ts
    ├── SuperCSSInject.ts
    ├── common
    │   └── If.tsx
    ├── options
    │   ├── Options.tsx
    │   ├── OptionsReducer.test.ts
    │   ├── OptionsReducer.ts
    │   ├── components
    │   │   ├── ConfigModal.tsx
    │   │   ├── EditModal.tsx
    │   │   ├── StylesheetForm.tsx
    │   │   ├── StylesheetItemTableRow.tsx
    │   │   └── StylesheetListTable.tsx
    │   └── index.tsx
    ├── popup
    │   ├── Popup.tsx
    │   ├── PopupEmptyMessage.tsx
    │   ├── PopupHeader.tsx
    │   ├── PopupPreferences.tsx
    │   ├── PopupReducer.test.ts
    │   ├── PopupReducer.ts
    │   ├── PopupSearch.tsx
    │   ├── StylesheetItem.tsx
    │   ├── StylesheetList.tsx
    │   └── index.tsx
    ├── storage.ts
    ├── types.d.ts
    ├── utils.ts
    └── worker
    │   └── background.ts
├── tsconfig.json
├── webpack.common.js
├── webpack.dev.js
└── webpack.prod.js


/.editorconfig:
--------------------------------------------------------------------------------
 1 | # EditorConfig is awesome: https://EditorConfig.org
 2 | 
 3 | # top-most EditorConfig file
 4 | root = true
 5 | 
 6 | [*]
 7 | indent_style = space
 8 | indent_size = 4
 9 | end_of_line = lf
10 | charset = utf-8
11 | trim_trailing_whitespace = false
12 | insert_final_newline = true
13 | 


--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
  1 | {
  2 |     "env": {
  3 |         "browser": true,
  4 |         "node": true,
  5 |         "es2021": true
  6 |     },
  7 |     "extends": [
  8 |         "eslint:recommended",
  9 |         "plugin:react/recommended",
 10 |         "plugin:react/jsx-runtime",
 11 |         "plugin:@typescript-eslint/recommended"
 12 |     ],
 13 |     "overrides": [ ],
 14 |     "parser": "@typescript-eslint/parser",
 15 |     "parserOptions": {
 16 |         "ecmaVersion": "latest",
 17 |         "sourceType": "module"
 18 |     },
 19 |     "plugins": [
 20 |         "react",
 21 |         "@typescript-eslint"
 22 |     ],
 23 |     "rules": {
 24 |         "array-bracket-newline": [
 25 |             "error",
 26 |             "consistent"
 27 |         ],
 28 |         "array-bracket-spacing": [
 29 |             "error",
 30 |             "always"
 31 |         ],
 32 |         "array-element-newline": [
 33 |             "error",
 34 |             "consistent"
 35 |         ],
 36 |         "indent": [
 37 |             "warn",
 38 |             4,
 39 |             {
 40 |                 "ignoredNodes": [
 41 |                     "VariableDeclaration[declarations.length=0]"
 42 |                 ]
 43 |             }
 44 |         ],
 45 |         "keyword-spacing": [
 46 |             "error",
 47 |             {
 48 |                 "before": true
 49 |             }
 50 |         ],
 51 |         "newline-before-return": "error",
 52 |         "no-unused-vars": "off",
 53 |         "@typescript-eslint/no-unused-vars": [
 54 |             "warn",
 55 |             {
 56 |                 "argsIgnorePattern": "^_"
 57 |             }
 58 |         ],
 59 |         "object-curly-newline": [
 60 |             "error",
 61 |             {
 62 |                 "multiline": true
 63 |             }
 64 |         ],
 65 |         "object-curly-spacing": [
 66 |             "error",
 67 |             "always"
 68 |         ],
 69 |         // "object-property-newline": "error",
 70 |         "padding-line-between-statements": [
 71 |             "error",
 72 |             {
 73 |                 "blankLine": "always",
 74 |                 "next": "block-like",
 75 |                 "prev": "*"
 76 |             },
 77 |             {
 78 |                 "blankLine": "always",
 79 |                 "next": "*",
 80 |                 "prev": "block-like"
 81 |             }
 82 |         ],
 83 |         "quotes": [
 84 |             "error",
 85 |             "double"
 86 |         ],
 87 |         "semi": [
 88 |             "error",
 89 |             "always"
 90 |         ],
 91 |         "space-before-function-paren": [
 92 |             "error",
 93 |             "always"
 94 |         ]
 95 |     },
 96 |     "settings": {
 97 |         "react": {
 98 |             "version": "detect"
 99 |         }
100 |     }
101 | }
102 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | build-*.zip
2 | *.crx
3 | *.pem
4 | node_modules
5 | package-lock.json
6 | .stylelintrc.json
7 | test
8 | dist/js/
9 | 


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "files.eol": "\n",
 3 |     "eslint.enable": true,
 4 |     "eslint.run": "onSave",
 5 |     "editor.formatOnSave": false,
 6 |     "editor.codeActionsOnSave": {
 7 |         "source.fixAll": "explicit",
 8 |         "source.organizeImports": "explicit"
 9 |     }
10 | }
11 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2023 Nelson Rodrigues
 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 | ## <img src="https://github.com/nelsonr/super_css_inject/raw/master/dist/icons/48x48.png" width="24" /> Super CSS Inject
 2 | 
 3 | Keep multiple stylesheets ready to inject and change on the fly. Works with **LiveReload**.
 4 | Compatible with Chrome and Firefox.
 5 | 
 6 | <img src="https://github.com/nelsonr/super_css_inject/raw/master/preview.png" />
 7 | 
 8 | ### How to install (Chrome)
 9 | 
10 | 1. Clone or download the repository zip file (extract it to a folder)
11 | 2. Open Chrome extensions page
12 | 3. Enable Developer Mode
13 | 4. Click on Load Unpacked Extension
14 | 5. Select the `dist` folder inside the extension folder
15 | 
16 | The extension icon should be now visible in Chrome menu.
17 | 
18 | ### How to Use?
19 | 
20 | 1. First, add a stylesheet URL to the list by using the Options page, acessible via the Popup page.
21 | 2. On the web page where you want to inject the stylesheet, click on the extension icon to open the popup, click on one or more stylesheets from the list to inject them on your web page.
22 | 3. If there's more than one stylesheet selected, they will be injected in the order of your selection.
23 | 
24 | ### Terminology
25 | 
26 | #### Endpoints
27 | 
28 | The extension is composed of multiple parts, you can think of them as being endpoints that can communicate with each other, these endpoints are:
29 | 
30 | -   Content Script
31 | -   Popup Page
32 | -   Options Page
33 | -   Background Worker
34 | 
35 | **Content Script**
36 | 
37 | The JavaScript file that gets injected into the web page and the final responsible for managing the HTML necessary to inject or remove the injected stylesheet from the web page.
38 | 
39 | **Popup Page**
40 | 
41 | The web page that shows up when you click on the extension icon on the browser. The popup page is responsible for listing the available stylesheets and also responsible for managing the injected stylesheets per tab. Each tab can have multiple stylesheets injected at once.
42 | 
43 | **Options Page**
44 | 
45 | The web page responsible for managing the available stylesheets, where you can **add**, **edit** or **remove** stylesheets.
46 | 
47 | **Background Worker**
48 | 
49 | A [web worker](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API) responsible for managing the communication between all the other endpoints. It also acts as a kind of session storage to keep track of all injected stylesheets in all browser tabs.
50 | 


--------------------------------------------------------------------------------
/dist/icons/128x128.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nelsonr/super-css-inject/23aecf3b5209da68e5dfbfe0a898d369cf05ba7b/dist/icons/128x128.png


--------------------------------------------------------------------------------
/dist/icons/48x48.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nelsonr/super-css-inject/23aecf3b5209da68e5dfbfe0a898d369cf05ba7b/dist/icons/48x48.png


--------------------------------------------------------------------------------
/dist/icons/64x64.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nelsonr/super-css-inject/23aecf3b5209da68e5dfbfe0a898d369cf05ba7b/dist/icons/64x64.png


--------------------------------------------------------------------------------
/dist/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "Super CSS Inject",
 3 |     "version": "1.5.0",
 4 |     "description": "Keep multiple stylesheets ready to inject and change on the fly!",
 5 |     "manifest_version": 3,
 6 |     "permissions": ["activeTab", "storage"],
 7 |     "icons": {
 8 |         "48": "icons/48x48.png",
 9 |         "64": "icons/64x64.png",
10 |         "128": "icons/128x128.png"
11 |     },
12 |     "background": {
13 |         "service_worker": "js/background.js"
14 |     },
15 |     "content_scripts": [
16 |         {
17 |             "js": ["js/SuperCSSInject.js"],
18 |             "matches": ["http://*/*", "https://*/*"],
19 |             "run_at": "document_end"
20 |         }
21 |     ],
22 |     "action": {
23 |         "default_title": "Enable Super CSS Inject",
24 |         "default_icon": "icons/48x48.png",
25 |         "default_popup": "popup.html"
26 |     },
27 |     "options_ui": {
28 |         "page": "options.html",
29 |         "open_in_tab": true
30 |     }
31 | }
32 | 


--------------------------------------------------------------------------------
/dist/options.css:
--------------------------------------------------------------------------------
  1 | /* ============================================= */
  2 | /* CSS Variables                                 */
  3 | /* ============================================= */
  4 | 
  5 | :root {
  6 |     --main-width: 800px;
  7 | 
  8 |     /* Color */
  9 |     --color-primary: #F03738;
 10 |     --color-primary-shade-1: #F98484;
 11 |     --color-primary-shade-2: #BC0303;
 12 | 
 13 |     --color-green: #16C18E;
 14 |     --color-green-shade-1: #14B082;
 15 | 
 16 |     --color-red: #C13016;
 17 |     --color-red-shade-1: #912511;
 18 | 
 19 |     --color-neutral-0: #FFF;
 20 |     --color-neutral-1: #F1F1F1;
 21 |     --color-neutral-2: #E4E4E4;
 22 |     --color-neutral-3: #D6D6D6;
 23 |     --color-neutral-4: #B0B0B0;
 24 |     --color-neutral-5: #909090;
 25 |     --color-neutral-6: #595959;
 26 |     --color-neutral-7: #424242;
 27 |     --color-neutral-8: #222;
 28 | 
 29 |     /* Border Radius */
 30 |     --border-radius: 4px;
 31 | 
 32 |     /* Spacing (4-point grid system, kinda) */
 33 |     --space-1: 4px;
 34 |     --space-2: 8px;
 35 |     --space-3: 12px;
 36 |     --space-4: 16px;
 37 |     --space-6: 24px;
 38 |     --space-8: 32px;
 39 | 
 40 |     /* Font Sizes */
 41 |     --font-size-1: 4px;
 42 |     --font-size-2: 8px;
 43 |     --font-size-3: 12px;
 44 |     --font-size-4: 16px;
 45 |     --font-size-6: 24px;
 46 |     --font-size-8: 32px;
 47 | }
 48 | 
 49 | /* ============================================= */
 50 | /* Base Styles                                   */
 51 | /* ============================================= */
 52 | 
 53 | * {
 54 |     box-sizing: border-box;
 55 | }
 56 | 
 57 | svg {
 58 |     fill: currentColor;
 59 | }
 60 | 
 61 | input[type="text"] {
 62 |     padding: var(--space-2) var(--space-3);
 63 |     border-radius: var(--border-radius);
 64 |     border: 1px solid var(--color-neutral-4);
 65 |     font-size: 14px;
 66 |     font-weight: 300;
 67 |     height: 40px;
 68 |     width: 100%;
 69 | }
 70 | 
 71 | input[type="text"]:focus {
 72 |     outline: none;
 73 |     border-color: var(--color-neutral-6);
 74 | }
 75 | 
 76 | input[type="text"].not-valid {
 77 |     border-color: var(--color-red);
 78 | }
 79 | 
 80 | a {
 81 |     color: var(--color-primary);
 82 |     text-underline-offset: 2px;
 83 |     text-decoration: none;
 84 | }
 85 | 
 86 | a:hover {
 87 |     text-decoration: underline;
 88 | }
 89 | 
 90 | code {
 91 |     background-color: var(--color-neutral-2);
 92 |     padding-inline: var(--space-1);
 93 | }
 94 | 
 95 | /* ============================================= */
 96 | /* Layout                                        */
 97 | /* ============================================= */
 98 | 
 99 | body {
100 |     height: 100%;
101 |     margin: 0;
102 |     padding: 0;
103 |     background-color: var(--color-neutral-1);
104 |     font-size: 16px;
105 |     font-family: Roboto, system-ui, sans-serif;
106 |     padding-top: 60px;
107 | }
108 | 
109 | .column {
110 |     max-width: var(--main-width);
111 |     margin: auto;
112 |     padding-inline: var(--space-4);
113 | }
114 | 
115 | .menu {
116 |     flex: 1;
117 |     display: flex;
118 |     justify-content: flex-end;
119 |     align-items: center;
120 | }
121 | 
122 | /* ============================================= */
123 | /* Form                                          */
124 | /* ============================================= */
125 | 
126 | .form-field {
127 |     margin-bottom: var(--space-4);
128 | }
129 | 
130 | .form-field label {
131 |     display: block;
132 |     color: var(--color-neutral-6);
133 |     font-size: var(--font-size-3);
134 |     margin-bottom: var(--space-1);
135 |     text-transform: uppercase;
136 | }
137 | 
138 | .form-actions {
139 |     margin-top: var(--space-6);
140 |     text-align: right;
141 | }
142 | 
143 | /* Not Valid */
144 | 
145 | .validation-message {
146 |     display: none;
147 |     color: var(--color-red);
148 |     font-size: var(--font-size-3);
149 |     margin-top: var(--space-1);
150 | }
151 | 
152 | .form-field--not-valid input[type="text"] {
153 |     border-color: var(--color-red);
154 | }
155 | 
156 | .form-field--not-valid .validation-message {
157 |     display: block;
158 | }
159 | 
160 | /* ============================================= */
161 | /* Header                                        */
162 | /* ============================================= */
163 | 
164 | header {
165 |     background-color: var(--color-neutral-7);
166 |     color: var(--color-neutral-0);
167 |     padding: var(--space-3);
168 |     padding-inline: 0;
169 |     position: fixed;
170 |     top: 0;
171 |     left: 0;
172 |     width: 100%;
173 |     z-index: 1;
174 | }
175 | 
176 | header .column {
177 |     display: flex;
178 |     align-items: center;
179 |     text-align: center;
180 | }
181 | 
182 | header .title {
183 |     display: inline-block;
184 |     margin: 0;
185 |     margin-left: var(--space-4);
186 |     font-weight: normal;
187 | }
188 | 
189 | /* ============================================= */
190 | /* Main                                          */
191 | /* ============================================= */
192 | 
193 | main {
194 |     height: 100%;
195 |     display: flex;
196 |     flex-direction: column;
197 |     align-items: center;
198 |     text-align: center;
199 | }
200 | 
201 | /* ============================================= */
202 | /* Buttons                                       */
203 | /* ============================================= */
204 | 
205 | button,
206 | .button {
207 |     background-color: var(--color-neutral-2);
208 |     cursor: pointer;
209 |     text-transform: uppercase;
210 |     font-weight: bold;
211 |     font-size: 12px;
212 |     border: 0;
213 |     padding-inline: var(--space-4);
214 |     border-radius: var(--border-radius);
215 |     height: 40px;
216 | }
217 | 
218 | .button:hover {
219 |     background-color: var(--color-neutral-3);
220 | }
221 | 
222 | button + button {
223 |     margin-left: var(--space-4);
224 | }
225 | 
226 | /* Buttons > Success */
227 | 
228 | .button--success {
229 |     color: var(--color-neutral-0);
230 |     background-color: var(--color-green);
231 |     border-color: var(--color-green);
232 | }
233 | 
234 | .button--success:hover {
235 |     background-color: var(--color-green-shade-1);
236 |     border-color: var(--color-green-shade-1);
237 | }
238 | 
239 | .button--success:active {
240 |     box-shadow: inset 0px 3px 5px rgba(0, 0, 0, 0.3);
241 | }
242 | 
243 | /* Buttons > Danger */
244 | 
245 | .button--danger {
246 |     color: var(--color-neutral-0);
247 |     background-color: var(--color-red);
248 | }
249 | 
250 | .button--danger:hover {
251 |     background-color: var(--color-red-shade-1);
252 | }
253 | 
254 | /* Buttons > Small */
255 | 
256 | .button--small {
257 |     display: inline-flex;
258 |     justify-content: center;
259 |     align-items: center;
260 |     min-width: 32px;
261 |     height: 32px;
262 |     border-radius: var(--border-radius);
263 |     padding-inline: var(--space-4);
264 |     margin-left: var(--space-2);
265 |     position: relative;
266 |     outline: 0;
267 |     cursor: pointer;
268 |     box-shadow: none;
269 | }
270 | 
271 | .button--small:active {
272 |     box-shadow: inset 0px 3px 5px rgba(0, 0, 0, 0.3);
273 | }
274 | 
275 | .button--small:first-child {
276 |     margin-left: 0;
277 | }
278 | 
279 | /* Buttons > Icons */
280 | 
281 | .button--icon {
282 |     width: 32px;
283 |     padding: 0;
284 | }
285 | 
286 | .button--icon svg {
287 |     width: 20px;
288 |     height: auto;
289 | }
290 | 
291 | /* ============================================= */
292 | /* Table                                         */
293 | /* ============================================= */
294 | 
295 | 
296 | table {
297 |     width: 100%;
298 |     border-collapse: collapse;
299 | }
300 | 
301 | table td,
302 | table th {
303 |     padding: var(--space-2);
304 | }
305 | 
306 | table th {
307 |     font-size: 12px;
308 |     text-transform: uppercase;
309 |     border-bottom: 1px solid var(--color-neutral-2);
310 | }
311 | 
312 | table tbody tr td {
313 |     border-bottom: 1px solid var(--color-neutral-2);
314 | }
315 | 
316 | table tbody tr td:first-child {
317 |     overflow: auto;
318 | }
319 | 
320 | table tr:last-child td {
321 |     border-bottom: 0;
322 | }
323 | 
324 | /* ============================================= */
325 | /* Stylesheet Form                               */
326 | /* ============================================= */
327 | 
328 | .stylesheets-form {
329 |     display: flex;
330 |     flex-direction: column;
331 |     gap: var(--space-2);
332 |     width: 100%;
333 |     margin-top: var(--space-6);
334 | }
335 | 
336 | .stylesheets-form__group {
337 |     display: flex;
338 |     gap: var(--space-2);
339 | }
340 | 
341 | .stylesheets-form input[type='text'] {
342 |     flex: 1;
343 | }
344 | 
345 | .stylesheets-form .note {
346 |     margin-top: var(--space-2);
347 | }
348 | 
349 | /* ============================================= */
350 | /* Stylesheet Empty Message                      */
351 | /* ============================================= */
352 | 
353 | .stylesheets-message {
354 |     margin-top: var(--space-6);
355 |     letter-spacing: 0.6px;
356 | }
357 | 
358 | /* ============================================= */
359 | /* Stylesheet List                               */
360 | /* ============================================= */
361 | 
362 | .stylesheets-list {
363 |     padding: var(--space-2);
364 |     margin-top: var(--space-6);
365 |     width: 100%;
366 |     text-align: left;
367 |     background-color: var(--color-neutral-0);
368 |     border-radius: var(--border-radius);
369 |     box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
370 | }
371 | 
372 | /* ============================================= */
373 | /* Stylesheet Item                               */
374 | /* ============================================= */
375 | 
376 | .stylesheet {
377 |     gap: var(--space-2);
378 |     height: 50px;
379 |     padding: var(--space-2);
380 |     padding-inline: var(--space-3);
381 |     margin-top: var(--space-4);
382 |     background-color: var(--color-neutral-0);
383 |     color: var(--color-neutral-8);
384 |     font-size: 14px;
385 |     font-weight: 300;
386 |     border-radius: var(--border-radius);
387 |     box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
388 | }
389 | 
390 | .stylesheet:first-child {
391 |     margin-top: 0;
392 | }
393 | 
394 | .stylesheet__url {
395 |     flex: 1;
396 |     overflow: hidden;
397 |     text-overflow: ellipsis;
398 |     text-align: left;
399 | }
400 | 
401 | .stylesheet__actions {
402 |     display: flex;
403 |     justify-content: space-between;
404 |     align-items: center;
405 | }
406 | 
407 | .stylesheet input[type="text"] {
408 |     height: 32px;
409 | }
410 | 
411 | /* ============================================= */
412 | /* Modal                                         */
413 | /* ============================================= */
414 | 
415 | .modal {
416 |     position: fixed;
417 |     top: 0;
418 |     left: 0;
419 |     width: 100%;
420 |     height: 100%;
421 |     display: flex;
422 |     justify-content: center;
423 |     align-items: center;
424 |     flex-direction: column;
425 |     z-index: 10;
426 |     opacity: 0;
427 |     pointer-events: none;
428 |     text-align: left;
429 | }
430 | 
431 | .modal__overlay {
432 |     position: absolute;
433 |     top: 0;
434 |     left: 0;
435 |     width: 100%;
436 |     height: 100%;
437 |     background-color: rgba(0, 0, 0, 0.3);
438 | }
439 | 
440 | .modal__main {
441 |     color: var(--color-neutral-7);
442 |     background-color: #FFF;
443 |     padding: var(--space-4);
444 |     position: relative;
445 |     z-index: 1;
446 |     opacity: 0;
447 |     border-radius: var(--border-radius);
448 |     width: 600px;
449 | }
450 | 
451 | .modal--show {
452 |     opacity: 1;
453 |     pointer-events: all;
454 | }
455 | 
456 | .modal--show .modal__main {
457 |     animation: fadeUp 300ms ease-out forwards;
458 | }
459 | 
460 | @keyframes fadeUp {
461 |     from {
462 |         transform: translateY(20px);
463 |         opacity: 0;
464 |     }
465 | 
466 |     to {
467 |         transform: translateY(0);
468 |         opacity: 1;
469 |     }
470 | }
471 | 
472 | /* ============================================= */
473 | /* Utilities                                     */
474 | /* ============================================= */
475 | 
476 | .hidden {
477 |     display: none;
478 | }
479 | 
480 | .note {
481 |     font-size: 12px;
482 |     color: var(--color-neutral-7);
483 |     margin-block: var(--space-2);
484 | }
485 | 
486 | .text-help {
487 |     font-size: 14px;
488 |     text-align: left;
489 | }
490 | 
491 | .text-error {
492 |     color: var(--color-red);
493 |     font-size: 12px;
494 |     text-align: left;
495 | }
496 | 
497 | .text-align-end {
498 |     text-align: end;
499 | }
500 | 
501 | .whitespace-nowrap {
502 |     white-space: nowrap;
503 | }
504 | 


--------------------------------------------------------------------------------
/dist/options.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 8 |     <title>Super CSS Inject Options</title>
 9 |     <link rel="preconnect" href="https://fonts.googleapis.com">
10 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11 |     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400&display=swap" rel="stylesheet">
12 |     <link rel="stylesheet" href="options.css" />
13 | </head>
14 | 
15 | <body>
16 |     <main id="root" class="column"></main>
17 | 
18 |     <script src="js/options.js"></script>
19 | </body>
20 | 
21 | </html>
22 | 


--------------------------------------------------------------------------------
/dist/popup.css:
--------------------------------------------------------------------------------
  1 | * {
  2 |     box-sizing: border-box;
  3 | }
  4 | 
  5 | :root {
  6 |     --primary-color: #F03738;
  7 |     --primary-color-light: #F98484;
  8 |     --primary-color-dark: #BC0303;
  9 | 
 10 |     --green: #16C18E;
 11 |     --green-shade-1: #14B082;
 12 | 
 13 |     --red: #C13016;
 14 |     --red-shade-1: #912511;
 15 | 
 16 |     --gray: #D6D6D6;
 17 |     --gray-shade-1: #B0B0B0;
 18 |     --gray-shade-2: #C9C9C9;
 19 |     --gray-shade-3: #424242;
 20 | 
 21 |     --background: #F2F2F2;
 22 | }
 23 | 
 24 | .hidden {
 25 |     display: none !important;
 26 | }
 27 | 
 28 | body {
 29 |     margin: 0;
 30 |     background: var(--background);
 31 |     width: 300px;
 32 |     font-family: Roboto, sans-serif;
 33 |     box-sizing: border-box;
 34 |     padding-inline: 4px;
 35 | }
 36 | 
 37 | .preferences {
 38 |     display: flex;
 39 |     justify-content: center;
 40 |     align-items: center;
 41 |     position: absolute;
 42 |     top: 10px;
 43 |     right: 10px;
 44 |     border: 1px solid var(--gray);
 45 |     width: 24px;
 46 |     height: 24px;
 47 |     border-radius: 4px;
 48 |     background: var(--gray);
 49 |     cursor: pointer;
 50 | }
 51 | 
 52 | .preferences svg {
 53 |     width: 16px;
 54 |     height: auto;
 55 |     fill: var(--gray-shade-3);
 56 | }
 57 | 
 58 | .preferences:hover {
 59 |     background-color: var(--gray-shade-1);
 60 |     border-color: var(--gray-shade-1);
 61 | }
 62 | 
 63 | header {
 64 |     padding: 10px;
 65 |     padding-top: 14px;
 66 | }
 67 | 
 68 | header .column {
 69 |     display: flex;
 70 |     align-items: center;
 71 | }
 72 | 
 73 | header .logo {
 74 |     display: flex;
 75 |     justify-content: center;
 76 |     align-items: center;
 77 |     width: 45px;
 78 |     height: 45px;
 79 |     background: rgba(215, 215, 215, 0.35);
 80 |     border-radius: 50%;
 81 | }
 82 | 
 83 | header .title {
 84 |     font-size: 14px;
 85 |     color: #131313;
 86 |     margin: 0;
 87 |     margin-left: 10px;
 88 | }
 89 | 
 90 | .title-wrapper {
 91 |     display: flex;
 92 |     flex-direction: column;
 93 |     justify-content: center;
 94 |     height: 45px;
 95 | }
 96 | 
 97 | .search {
 98 |     position: relative;
 99 |     margin: 5px 10px;
100 |     width: 145px;
101 | }
102 | 
103 | .search .icon-search {
104 |     width: 12px;
105 |     height: 12px;
106 |     position: absolute;
107 |     top: 50%;
108 |     left: 12px;
109 |     transform: translate(-50%, -50%);
110 | }
111 | 
112 | .search .icon-search path {
113 |     fill: var(--gray-shade-1);
114 | }
115 | 
116 | .search .icon-cross {
117 |     width: 8px;
118 |     height: 8px;
119 |     padding: 4px;
120 |     position: absolute;
121 |     top: 50%;
122 |     right: 4px;
123 |     transform: translateY(-50%);
124 |     cursor: pointer;
125 | }
126 | 
127 | .search .icon-cross path {
128 |     fill: var(--gray-shade-1);
129 | }
130 | 
131 | .search .icon-cross:hover path {
132 |     fill: var(--gray-shade-3);
133 | }
134 | 
135 | .search input {
136 |     border-radius: 3px;
137 |     border: 1px solid var(--gray-shade-2);
138 |     padding: 4px 6px;
139 |     padding-left: 20px;
140 |     padding-right: 18px;
141 |     font-size: 12px;
142 |     width: 100%;
143 |     box-sizing: border-box;
144 | }
145 | 
146 | .search input:focus {
147 |     outline: none;
148 | }
149 | 
150 | .stylesheets-message {
151 |     letter-spacing: 0.6px;
152 |     display: flex;
153 |     flex-direction: column;
154 |     justify-content: center;
155 |     align-items: center;
156 |     height: 60px;
157 |     padding: 0 10px;
158 |     margin-bottom: 20px;
159 |     text-transform: uppercase;
160 |     color: #C3C3C3;
161 |     font-size: 12px;
162 | }
163 | 
164 | .stylesheets-message button {
165 |     font-size: 12px;
166 |     font-weight: bold;
167 |     height: 30px;
168 |     line-height: 1;
169 |     background-color: var(--green);
170 |     border-color: var(--green);
171 |     color: #FFF;
172 |     cursor: pointer;
173 |     text-transform: uppercase;
174 |     border: 0;
175 |     margin-top: 10px;
176 |     padding: 10px 12px;
177 |     border-radius: 3px;
178 |     box-sizing: border-box;
179 | }
180 | 
181 | .stylesheets-message button:hover {
182 |     background-color: var(--green-shade-1);
183 |     border-color: var(--green-shade-1);
184 | }
185 | 
186 | .stylesheets-message button:active {
187 |     box-shadow: inset 0px 3px 5px rgba(0, 0, 0, 0.3);
188 | }
189 | 
190 | .stylesheets-message button:focus {
191 |     outline: none;
192 |     border-color: var(--green);
193 | }
194 | 
195 | .stylesheets-list {
196 |     padding: 10px;
197 |     padding-top: 2px;
198 |     max-height: 200px;
199 |     overflow: auto;
200 | }
201 | 
202 | .stylesheet {
203 |     display: flex;
204 |     justify-content: space-between;
205 |     align-items: center;
206 |     height: 30px;
207 |     padding: 10px;
208 |     margin-bottom: 10px;
209 |     background-color: #FFF;
210 |     color: #9D9D9D;
211 |     font-family: 'Roboto Condensed', Roboto, sans-serif;
212 |     font-size: 14px;
213 |     font-weight: 300;
214 |     border-radius: 4px;
215 |     box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
216 |     box-sizing: border-box;
217 |     cursor: pointer;
218 |     gap: 8px;
219 | }
220 | 
221 | .stylesheet--active,
222 | .stylesheet:hover {
223 |     color: #222;
224 | }
225 | 
226 | .stylesheet--active button.stylesheet__toggle {
227 |     background-color: var(--green);
228 | }
229 | 
230 | .stylesheet__url {
231 |     flex: 1;
232 |     overflow: hidden;
233 |     text-overflow: ellipsis;
234 |     text-align: start;
235 |     white-space: nowrap;
236 | }
237 | 
238 | .stylesheet__actions {
239 |     display: flex;
240 |     justify-content: space-between;
241 | }
242 | 
243 | .stylesheet button {
244 |     width: 20px;
245 |     height: 20px;
246 |     background-color: var(--gray);
247 |     color: #FFF;
248 |     border-radius: 4px;
249 |     margin-left: 10px;
250 |     position: relative;
251 |     border: transparent;
252 |     padding: 2px;
253 |     display: flex;
254 |     justify-content: center;
255 |     align-items: center;
256 |     outline: 0;
257 |     cursor: pointer;
258 |     box-shadow: none;
259 | }
260 | 
261 | .stylesheet:hover button {
262 |     background-color: var(--gray-shade-1);
263 | }
264 | 
265 | .stylesheet--active:hover button.stylesheet__toggle {
266 |     background-color: var(--green-shade-1);
267 | }
268 | 
269 | .stylesheet:active button,
270 | .stylesheet button:active {
271 |     box-shadow: inset 0px 3px 5px rgba(0, 0, 0, 0.3);
272 | }
273 | 
274 | .stylesheet button:first-child {
275 |     margin-left: 0;
276 | }
277 | 
278 | .stylesheet--show-order .stylesheet__toggle {
279 |     font-size: 0.9em;
280 |     line-height: 0;
281 | }
282 | 
283 | .stylesheet--show-order .stylesheet__toggle:after {
284 |     display: none;
285 | }
286 | 
287 | .stylesheets-list--emoji .stylesheet--show-order .stylesheet__toggle {
288 |     font-size: 1em;
289 | }
290 | 


--------------------------------------------------------------------------------
/dist/popup.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 8 |     <title>Super CSS Inject Popup</title>
 9 |     <link rel="preconnect" href="https://fonts.googleapis.com">
10 |     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11 |     <link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300;700&display=swap" rel="stylesheet">
12 |     <link rel="stylesheet" href="popup.css" />
13 | </head>
14 | 
15 | <body>
16 |     <div id="root"></div>
17 | 
18 |     <script src="js/popup.js"></script>
19 | </body>
20 | 
21 | </html>
22 | 


--------------------------------------------------------------------------------
/jest.config.ts:
--------------------------------------------------------------------------------
 1 | import chrome from "sinon-chrome";
 2 | 
 3 | const config = {
 4 |     roots: [
 5 |         "<rootDir>/src"
 6 |     ],
 7 |     testMatch: [
 8 |         "**/__tests__/**/*.+(ts|tsx|js)",
 9 |         "**/?(*.)+(spec|test).+(ts|tsx|js)"
10 |     ],
11 |     transform: { "^.+\\.(ts|tsx)$": "ts-jest" },
12 |     globals: { chrome }
13 | };
14 | 
15 | export default config;
16 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "app",
 3 |     "version": "0.1.0",
 4 |     "private": true,
 5 |     "scripts": {
 6 |         "build": "webpack --config webpack.prod.js",
 7 |         "dev": "webpack -w --config webpack.dev.js",
 8 |         "test": "jest"
 9 |     },
10 |     "dependencies": {
11 |         "react": "^18.2.0",
12 |         "react-dom": "^18.2.0"
13 |     },
14 |     "devDependencies": {
15 |         "@types/chrome": "^0.0.197",
16 |         "@types/eslint": "^8.4.6",
17 |         "@types/firefox-webext-browser": "^94.0.1",
18 |         "@types/jest": "^29.5.3",
19 |         "@types/node": "^18.7.14",
20 |         "@types/react": "^18.0.17",
21 |         "@types/react-dom": "^18.0.6",
22 |         "@types/sinon-chrome": "^2.2.11",
23 |         "@typescript-eslint/eslint-plugin": "^5.36.2",
24 |         "@typescript-eslint/parser": "^5.36.2",
25 |         "eslint": "^8.24.0",
26 |         "eslint-plugin-react": "^7.31.8",
27 |         "jest": "^29.6.1",
28 |         "sinon-chrome": "^3.0.1",
29 |         "ts-jest": "^29.1.1",
30 |         "ts-loader": "^9.4.1",
31 |         "ts-node": "^10.9.1",
32 |         "typescript": "^4.8.3",
33 |         "webpack": "^5.65.0",
34 |         "webpack-cli": "^4.9.1",
35 |         "webpack-merge": "^5.8.0"
36 |     }
37 | }
38 | 


--------------------------------------------------------------------------------
/preview.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nelsonr/super-css-inject/23aecf3b5209da68e5dfbfe0a898d369cf05ba7b/preview.png


--------------------------------------------------------------------------------
/src/Stylesheet.ts:
--------------------------------------------------------------------------------
 1 | import { getStylesheetName } from "./utils";
 2 | 
 3 | export class Stylesheet {
 4 |     url: string;
 5 |     shortname: string;
 6 | 
 7 |     constructor (url: string, shortname = "") {
 8 |         this.url = url;
 9 |         this.shortname = shortname;
10 |     }
11 | 
12 |     get name () {
13 |         return this.shortname || getStylesheetName(this.url);
14 |     }
15 | }
16 | 


--------------------------------------------------------------------------------
/src/SuperCSSInject.ts:
--------------------------------------------------------------------------------
  1 | import { Message } from "./types";
  2 | import { env } from "./utils";
  3 | 
  4 | let liveReloadSocket: WebSocket;
  5 | let liveReloadConnectionAttempts = 0;
  6 | let liveReloadIsConnected = false;
  7 | const liveReloadMaxAttempts = 3;
  8 | 
  9 | function main () {
 10 |     env.runtime.onMessage.addListener((message: Message) => {
 11 |         const { action, urlList, webSocketServerURL } = message;
 12 | 
 13 |         if (action == "inject") {
 14 |             updateInjectedStylesheets(urlList);
 15 | 
 16 |             if (urlList.length > 0) {
 17 |                 if (!liveReloadSocket || liveReloadSocket.readyState === WebSocket.CLOSED) {
 18 |                     if (liveReloadConnectionAttempts < liveReloadMaxAttempts) {
 19 |                         console.log(`[SuperCSSInject]: Attempting to connect to Live Reload server on: "${webSocketServerURL}"`);
 20 |                         listenToLiveReload(webSocketServerURL);
 21 |                     }
 22 |                 }
 23 |             }
 24 |         }
 25 |     });
 26 | 
 27 |     env.runtime.sendMessage({ action: "load" });
 28 |     maintainStylesheetsOrder();
 29 | }
 30 | 
 31 | function listenToLiveReload (websocketServerURL: string) {
 32 |     liveReloadSocket = new WebSocket(websocketServerURL);
 33 | 
 34 |     liveReloadSocket.addEventListener("open", () => {
 35 |         console.log("[SuperCSSInject]: Connected successfully to Live Reload server:", websocketServerURL);
 36 |         liveReloadIsConnected = true;
 37 |         env.runtime.sendMessage({ action: "livereload_connect" });
 38 |     });
 39 | 
 40 |     liveReloadSocket.addEventListener("error", () => {
 41 |         liveReloadConnectionAttempts++;
 42 |         console.log("[SuperCSSInject]: Failed to connect to Live Reload server.");
 43 |         console.log("[SuperCSSInject]: Attempts remaining:", liveReloadMaxAttempts - liveReloadConnectionAttempts);
 44 |     });
 45 | 
 46 |     liveReloadSocket.addEventListener("message", () => {
 47 |         console.log("[SuperCSSInject]: Injected stylesheets changed, refreshing...");
 48 |         const injectedStylesheets: NodeListOf<HTMLLinkElement> = document.head.querySelectorAll(".SuperCSSInject");
 49 | 
 50 |         injectedStylesheets.forEach((stylesheet: HTMLLinkElement) => {
 51 |             // eslint-disable-next-line no-self-assign
 52 |             stylesheet.href = stylesheet.href;
 53 |         });
 54 |     });
 55 | 
 56 |     liveReloadSocket.addEventListener("close", () => {
 57 |         if (liveReloadIsConnected) {
 58 |             console.log("[SuperCSSInject]: Connection to Live Reload server was closed.");
 59 |             liveReloadIsConnected = false;
 60 |             liveReloadConnectionAttempts = 0;
 61 |         }
 62 |     });
 63 | }
 64 | 
 65 | function updateInjectedStylesheets (urlList: string[]) {
 66 |     const links: NodeListOf<HTMLLinkElement> = document.querySelectorAll("link.SuperCSSInject");
 67 |     const currentList = Array.from(links).map((link) => link.href);
 68 | 
 69 |     if (currentList.length > urlList.length) {
 70 |         for (const url of currentList) {
 71 |             if (!urlList.includes(url)) {
 72 |                 clearStylesheet(url);
 73 |             }
 74 |         }
 75 |     } else {
 76 |         for (const url of urlList) {
 77 |             if (!currentList.includes(url)) {
 78 |                 injectStylesheet(url);
 79 |             }
 80 |         }
 81 |     }
 82 | }
 83 | 
 84 | function clearStylesheet (url: string) {
 85 |     const link = document.querySelector(`link[href="${url}"].SuperCSSInject`);
 86 |     link && link.remove();
 87 | }
 88 | 
 89 | function injectStylesheet (url: string) {
 90 |     const link = createLinkElement(url);
 91 |     document.head.append(link);
 92 | }
 93 | 
 94 | function createLinkElement (url: string) {
 95 |     const link = document.createElement("link");
 96 | 
 97 |     link.rel = "stylesheet";
 98 |     link.type = "text/css";
 99 |     link.href = url;
100 |     link.classList.add("SuperCSSInject");
101 | 
102 |     return link;
103 | }
104 | 
105 | /**
106 |  * Make sure the injected stylesheets are always placed last on the DOM
107 |  *
108 |  * This handles SPAs where is common for additional assets to be loaded after
109 |  * the initial page load and ensures the injected styles retain priority.
110 |  */
111 | function maintainStylesheetsOrder () {
112 |     const observer = new MutationObserver(() => {
113 |         const injectedLinks: NodeListOf<HTMLLinkElement> = document.head.querySelectorAll("link.SuperCSSInject");
114 | 
115 |         if (injectedLinks.length > 0) {
116 |             const links: NodeListOf<HTMLLinkElement> = document.head.querySelectorAll("link[rel='stylesheet']");
117 |             const lastLink: HTMLLinkElement = links[links.length - 1];
118 |             const isInjectedStylesheetLast = lastLink.className === "SuperCSSInject";
119 | 
120 |             if (!isInjectedStylesheetLast) {
121 |                 observer.disconnect();
122 |                 moveInjectedStylesheets();
123 |             }
124 |         }
125 |     });
126 | 
127 |     observer.observe(document.head, { childList: true });
128 | }
129 | 
130 | function moveInjectedStylesheets () {
131 |     const links: NodeListOf<HTMLLinkElement> = document.head.querySelectorAll("link.SuperCSSInject");
132 | 
133 |     for (const link of links) {
134 |         document.head.appendChild(link);
135 |     }
136 | 
137 |     maintainStylesheetsOrder();
138 | }
139 | 
140 | window.addEventListener("load", main);
141 | 
142 | // This is just to make the TS compiler happy
143 | export { };
144 | 


--------------------------------------------------------------------------------
/src/common/If.tsx:
--------------------------------------------------------------------------------
 1 | interface IProps {
 2 |     children: JSX.Element | JSX.Element[] | string;
 3 |     condition: boolean;
 4 | }
 5 | 
 6 | function If (props: IProps) {
 7 |     const { children, condition } = props;
 8 | 
 9 |     if (condition) {
10 |         return <>{children}</>;
11 |     }
12 | 
13 |     return null;
14 | }
15 | 
16 | export default If;
17 | 


--------------------------------------------------------------------------------
/src/options/Options.tsx:
--------------------------------------------------------------------------------
 1 | import { useEffect, useReducer, useState } from "react";
 2 | import { Stylesheet } from "../Stylesheet";
 3 | import { updateStorage } from "../storage";
 4 | import { Config, StorageData } from "../types";
 5 | import { OptionsReducer } from "./OptionsReducer";
 6 | import { ConfigModal } from "./components/ConfigModal";
 7 | import { StylesheetForm } from "./components/StylesheetForm";
 8 | import { StylesheetListTable } from "./components/StylesheetListTable";
 9 | 
10 | interface IProps {
11 |     initialState: StorageData;
12 | }
13 | 
14 | function Options (props: IProps) {
15 |     const [ state, setState ] = useReducer(OptionsReducer, props.initialState);
16 |     const [ showConfigModal, setShowConfigModal ] = useState(false);
17 | 
18 |     useEffect(() => {
19 |         updateStorage(state);
20 |     }, [ state ]);
21 | 
22 |     const addStylesheet = (url: string) => {
23 |         setState({
24 |             type: "add",
25 |             url: url,
26 |         });
27 |     };
28 | 
29 |     const updateStylesheet = (prevStylesheet: Stylesheet, newStylesheet: Stylesheet) => {
30 |         setState({
31 |             type: "update",
32 |             prevStyleheet: prevStylesheet,
33 |             newStylesheet: newStylesheet
34 |         });
35 |     };
36 | 
37 |     const removeStylesheet = (url: string) => {
38 |         setState({
39 |             type: "remove",
40 |             url: url
41 |         });
42 |     };
43 | 
44 |     const updateConfig = (config: Config) => {
45 |         setState({
46 |             type: "updateConfig",
47 |             config: config
48 |         });
49 |         setShowConfigModal(false);
50 |     };
51 | 
52 |     return (
53 |         <>
54 |             <header>
55 |                 <div className="column">
56 |                     <img className="logo" src="icons/128x128.png" width="36" alt="" />
57 |                     <h3 className="title">Super CSS Inject Options</h3>
58 | 
59 |                     <div className="menu">
60 |                         <button className="button--small" onClick={() => setShowConfigModal(!showConfigModal)}>Config</button>
61 |                         {showConfigModal && (
62 |                             <ConfigModal config={state.config}
63 |                                 onUpdate={updateConfig}
64 |                                 onCancel={() => setShowConfigModal(false)}
65 |                             ></ConfigModal>
66 |                         )}
67 |                     </div>
68 |                 </div>
69 |             </header>
70 | 
71 |             <StylesheetForm onSubmit={addStylesheet} />
72 |             <StylesheetListTable
73 |                 list={state?.stylesheets}
74 |                 onRemove={removeStylesheet}
75 |                 onUpdate={updateStylesheet}
76 |             />
77 |         </>
78 |     );
79 | }
80 | 
81 | export default Options;
82 | 


--------------------------------------------------------------------------------
/src/options/OptionsReducer.test.ts:
--------------------------------------------------------------------------------
  1 | import { Stylesheet } from "../Stylesheet";
  2 | import { StorageData } from "../types";
  3 | import { OptionsReducer } from "./OptionsReducer";
  4 | 
  5 | const webSocketServerURL = "ws://localhost:35729/livereload";
  6 | 
  7 | const states: Record<string, StorageData> = {
  8 |     empty: {
  9 |         stylesheets: [],
 10 |         injected: {},
 11 |         config: { webSocketServerURL: webSocketServerURL }
 12 | 
 13 |     },
 14 |     oneStylesheet: {
 15 |         stylesheets: [
 16 |             new Stylesheet("http://127.0.0.1:3000/public/css/theme-A.css"),
 17 |         ],
 18 |         injected: {},
 19 |         config: { webSocketServerURL: webSocketServerURL }
 20 | 
 21 |     },
 22 |     renamedStyleSheet: {
 23 |         stylesheets: [
 24 |             new Stylesheet("http://127.0.0.1:3000/public/css/theme-B.css"),
 25 |         ],
 26 |         injected: {},
 27 |         config: { webSocketServerURL: webSocketServerURL }
 28 | 
 29 |     },
 30 |     oneInjectedStylesheet: {
 31 |         stylesheets: [
 32 |             new Stylesheet("http://127.0.0.1:3000/public/css/theme-A.css"),
 33 |         ],
 34 |         injected: {
 35 |             "1010977386": [
 36 |                 "http://127.0.0.1:3000/public/css/theme-A.css",
 37 |             ]
 38 |         },
 39 |         config: { webSocketServerURL: webSocketServerURL }
 40 | 
 41 |     },
 42 |     multipleTabsInjected: {
 43 |         stylesheets: [
 44 |             new Stylesheet("http://127.0.0.1:3000/public/css/theme-A.css"),
 45 |         ],
 46 |         injected: {
 47 |             "1010977386": [
 48 |                 "http://127.0.0.1:3000/public/css/theme-A.css",
 49 |             ],
 50 |             "2021021202": [
 51 |                 "http://127.0.0.1:3000/public/css/theme-A.css",
 52 |             ]
 53 |         },
 54 |         config: { webSocketServerURL: webSocketServerURL }
 55 | 
 56 |     },
 57 |     multipleInjectedStylesheets: {
 58 |         stylesheets: [
 59 |             new Stylesheet("http://127.0.0.1:3000/public/css/theme-A.css"),
 60 |             new Stylesheet("http://127.0.0.1:3000/public/css/theme-B.css"),
 61 |         ],
 62 |         injected: {
 63 |             "1010977386": [
 64 |                 "http://127.0.0.1:3000/public/css/theme-A.css",
 65 |                 "http://127.0.0.1:3000/public/css/theme-B.css"
 66 |             ]
 67 |         },
 68 | 
 69 |         config: { webSocketServerURL: webSocketServerURL }
 70 | 
 71 |     },
 72 | };
 73 | 
 74 | describe("Adding and updating stylesheets", () => {
 75 |     test("Adds a stylesheet", () => {
 76 |         const urlToAdd = "http://127.0.0.1:3000/public/css/theme-A.css";
 77 |         const updatedState = OptionsReducer(states.empty, {
 78 |             type: "add",
 79 |             url: urlToAdd
 80 |         });
 81 | 
 82 |         expect(updatedState).toStrictEqual(states.oneStylesheet);
 83 |     });
 84 | 
 85 |     test("Renames a stylesheet", () => {
 86 |         const prevStylesheet = new Stylesheet("http://127.0.0.1:3000/public/css/theme-A.css");
 87 |         const newStylesheet = new Stylesheet("http://127.0.0.1:3000/public/css/theme-B.css");
 88 | 
 89 |         const updatedState = OptionsReducer(states.oneStylesheet, {
 90 |             type: "update",
 91 |             prevStyleheet: prevStylesheet,
 92 |             newStylesheet: newStylesheet
 93 |         });
 94 | 
 95 |         expect(updatedState).toStrictEqual(states.renamedStyleSheet);
 96 |     });
 97 | });
 98 | 
 99 | describe("Removing stylesheets", () => {
100 |     test("Removes a stylesheet", () => {
101 |         const urlToRemove = "http://127.0.0.1:3000/public/css/theme-A.css";
102 |         const updatedState = OptionsReducer(states.oneStylesheet, {
103 |             type: "remove",
104 |             url: urlToRemove
105 |         });
106 | 
107 |         expect(updatedState).toStrictEqual(states.empty);
108 |     });
109 | 
110 |     test("Clears from the injected stylesheets when removed", () => {
111 |         const urlToRemove = "http://127.0.0.1:3000/public/css/theme-A.css";
112 |         const updatedState = OptionsReducer(states.oneInjectedStylesheet, {
113 |             type: "remove",
114 |             url: urlToRemove
115 |         });
116 | 
117 |         expect(updatedState).toStrictEqual(states.empty);
118 |     });
119 | 
120 |     test("Clears the stylesheet from all injected browser tabs", () => {
121 |         const urlToRemove = "http://127.0.0.1:3000/public/css/theme-A.css";
122 |         const updatedState = OptionsReducer(states.multipleTabsInjected, {
123 |             type: "remove",
124 |             url: urlToRemove
125 |         });
126 | 
127 |         expect(updatedState).toStrictEqual(states.empty);
128 |     });
129 | 
130 |     test("Leaves other injected stylesheets untouched", () => {
131 |         const urlToRemove = "http://127.0.0.1:3000/public/css/theme-B.css";
132 |         const updatedState = OptionsReducer(states.multipleInjectedStylesheets, {
133 |             type: "remove",
134 |             url: urlToRemove
135 |         });
136 | 
137 |         expect(updatedState).toStrictEqual(states.oneInjectedStylesheet);
138 |     });
139 | });
140 | 
141 | export { };
142 | 


--------------------------------------------------------------------------------
/src/options/OptionsReducer.ts:
--------------------------------------------------------------------------------
  1 | import { Stylesheet } from "../Stylesheet";
  2 | import { Config, InjectedTabs, StorageData } from "../types";
  3 | import { cond, validateURL } from "../utils";
  4 | 
  5 | type Action =
  6 |     | { type: "add"; url: string; }
  7 |     | { type: "update"; prevStyleheet: Stylesheet; newStylesheet: Stylesheet; }
  8 |     | { type: "remove"; url: string; }
  9 |     | { type: "updateConfig"; config: Config; };
 10 | 
 11 | export function OptionsReducer (state: StorageData, action: Action): StorageData {
 12 |     switch (action.type) {
 13 |     case "add":
 14 |         return add(state, action.url);
 15 | 
 16 |     case "update":
 17 |         return update(state, action.prevStyleheet, action.newStylesheet);
 18 | 
 19 |     case "remove":
 20 |         return remove(state, action.url);
 21 | 
 22 |     case "updateConfig":
 23 |         return updateConfig(state, action.config);
 24 | 
 25 |     default:
 26 |         return state;
 27 |     }
 28 | }
 29 | 
 30 | function add (state: StorageData, url: string): StorageData {
 31 |     const urlExists = state.stylesheets.find((stylesheet: Stylesheet) => stylesheet.url === url);
 32 |     const isValid = validateURL(url);
 33 | 
 34 |     if (urlExists || !isValid) {
 35 |         return state;
 36 |     }
 37 | 
 38 |     return {
 39 |         ...state,
 40 |         stylesheets: [
 41 |             ...state.stylesheets,
 42 |             (new Stylesheet(url))
 43 |         ]
 44 |     };
 45 | }
 46 | 
 47 | function update (state: StorageData, prevStylesheet: Stylesheet, newStylesheet: Stylesheet): StorageData {
 48 |     const isDuplicated = state.stylesheets.find((item) => { return item.url === newStylesheet.url; }) && prevStylesheet.url !== newStylesheet.url;
 49 | 
 50 |     // If the new URL already exists, do nothing
 51 |     if (isDuplicated) {
 52 |         return state;
 53 |     }
 54 | 
 55 |     const updateStylesheet = (item: Stylesheet) => cond((item.url === prevStylesheet.url), newStylesheet, item);
 56 |     const stylesheets = state.stylesheets.map(updateStylesheet);
 57 |     const injected = updateInjectedURL(state.injected, prevStylesheet.url, newStylesheet.url);
 58 | 
 59 |     return { ...state, stylesheets, injected };
 60 | }
 61 | 
 62 | function remove (state: StorageData, url: string): StorageData {
 63 |     const stylesheets = state.stylesheets.filter((item: Stylesheet) => item.url !== url);
 64 |     const injected = removeInjectedURL(state.injected, url);
 65 | 
 66 |     return { ...state, stylesheets, injected };
 67 | }
 68 | 
 69 | function updateInjectedURL (injected: InjectedTabs, urlToUpdate: string, newURL: string): InjectedTabs {
 70 |     const updatedTabs = Object
 71 |         .entries(injected)
 72 |         .map(([ tabId, urlList ]) => {
 73 |             return [
 74 |                 tabId,
 75 |                 urlList.map((url: string) => cond((url === urlToUpdate), newURL, url))
 76 |             ];
 77 |         })
 78 |         .filter(([ _tabId, urlList ]) => urlList.length > 0);
 79 | 
 80 |     return Object.fromEntries(updatedTabs);
 81 | }
 82 | 
 83 | function removeInjectedURL (injected: InjectedTabs, urlToRemove: string): InjectedTabs {
 84 |     const updatedTabs = Object
 85 |         .entries(injected)
 86 |         .map(([ tabId, urlList ]) => {
 87 |             return [
 88 |                 tabId,
 89 |                 urlList.filter((url: string) => url !== urlToRemove)
 90 |             ];
 91 |         })
 92 |         .filter(([ _tabId, urlList ]) => urlList.length > 0);
 93 | 
 94 |     return Object.fromEntries(updatedTabs);
 95 | }
 96 | 
 97 | function updateConfig (state: StorageData, config: Config): StorageData {
 98 |     console.log("Update config:", config);
 99 | 
100 |     return { ...state, config: config };
101 | }
102 | 


--------------------------------------------------------------------------------
/src/options/components/ConfigModal.tsx:
--------------------------------------------------------------------------------
 1 | import { ChangeEvent, FormEvent, useState } from "react";
 2 | import { defaultConfig } from "../../storage";
 3 | import { Config } from "../../types";
 4 | import { getClassName, validateWebSocketURL } from "../../utils";
 5 | 
 6 | interface IProps {
 7 |     config: Config;
 8 |     onUpdate: (config: Config) => unknown;
 9 |     onCancel: () => unknown;
10 | }
11 | 
12 | export function ConfigModal (props: IProps) {
13 |     const { config, onUpdate, onCancel } = props;
14 |     const [ url, setURL ] = useState(config.webSocketServerURL);
15 |     const [ formValidations, setFormValidations ] = useState({
16 |         websocketServerURL: {
17 |             isValid: true,
18 |             validationMessage: ""
19 |         },
20 |     });
21 | 
22 |     const validateForm = () => {
23 |         const validations = structuredClone(formValidations);
24 | 
25 |         if (url.length > 0 && validateWebSocketURL(url)) {
26 |             validations.websocketServerURL.isValid = true;
27 |             validations.websocketServerURL.validationMessage = "";
28 |         } else {
29 |             validations.websocketServerURL.isValid = false;
30 |             validations.websocketServerURL.validationMessage = "The URL is not valid.";
31 |         }
32 | 
33 |         setFormValidations(validations);
34 | 
35 |         return validations.websocketServerURL.isValid;
36 |     };
37 | 
38 |     const onSave = (ev: FormEvent) => {
39 |         ev.preventDefault();
40 | 
41 |         if (validateForm()) {
42 |             onUpdate({ ...config, webSocketServerURL: url });
43 |         }
44 |     };
45 | 
46 |     const onResetDefaults = () => {
47 |         setURL(defaultConfig.webSocketServerURL);
48 |     };
49 | 
50 |     const onEditURL = (ev: ChangeEvent<HTMLInputElement>) => {
51 |         setURL(ev.target.value);
52 |     };
53 | 
54 |     const classNames = {
55 |         websocketServerURL: getClassName([
56 |             "form-field",
57 |             (formValidations.websocketServerURL.isValid ? "" : "form-field--not-valid")
58 |         ]),
59 |     };
60 | 
61 |     return (
62 |         <div className="modal modal--show">
63 |             <div className="modal__overlay" onClick={onCancel}></div>
64 | 
65 |             <div className="modal__main">
66 |                 <div className="modal__content">
67 |                     <form onSubmit={onSave} className="form">
68 |                         <div className={classNames.websocketServerURL}>
69 |                             <label htmlFor="websocket-server-url">WebSocket Server URL</label>
70 |                             <input id="websocket-server-url" type="text" value={url} onInput={onEditURL} />
71 |                             <div className="validation-message">{formValidations.websocketServerURL.validationMessage}</div>
72 |                             <div className="note">The URL for the WebSocket server that Super CSS Inject will attempt to connect to enable live reload whenever there&apos;s a change to the injected stylesheets.</div>
73 |                         </div>
74 | 
75 |                         <div className="form-actions">
76 |                             <button className="button button--small" type="button" onClick={onResetDefaults}>Reset Defaults</button>
77 |                             <button className="button button--small" type="button" onClick={onCancel}>Cancel</button>
78 |                             <button className="button button--small button--success" type="submit">Save</button>
79 |                         </div>
80 |                     </form>
81 |                 </div>
82 |             </div>
83 |         </div>
84 |     );
85 | }
86 | 


--------------------------------------------------------------------------------
/src/options/components/EditModal.tsx:
--------------------------------------------------------------------------------
 1 | import { ChangeEvent, FormEvent, useState } from "react";
 2 | import { Stylesheet } from "../../Stylesheet";
 3 | import { assign, getClassName, validateURL } from "../../utils";
 4 | 
 5 | interface IProps {
 6 |     stylesheet: Stylesheet;
 7 |     onUpdate: (stylesheet: Stylesheet) => unknown;
 8 |     onCancel: () => unknown;
 9 | }
10 | 
11 | export function EditModal (props: IProps) {
12 |     const { stylesheet, onUpdate, onCancel } = props;
13 |     const [ editStylesheet, setEditStylesheet ] = useState(stylesheet);
14 |     const [ formValidations, setFormValidations ] = useState({
15 |         url: {
16 |             isValid: true,
17 |             validationMessage: ""
18 |         },
19 |         shortname: {
20 |             isValid: true,
21 |             validationMessage: ""
22 |         }
23 |     });
24 | 
25 |     const validateForm = () => {
26 |         const validations = structuredClone(formValidations);
27 | 
28 |         if (editStylesheet.url.length > 0 && validateURL(editStylesheet.url)) {
29 |             validations.url.isValid = true;
30 |             validations.url.validationMessage = "";
31 |         } else {
32 |             validations.url.isValid = false;
33 |             validations.url.validationMessage = "The URL is not valid.";
34 |         }
35 | 
36 |         setFormValidations(validations);
37 | 
38 |         if (validations.url.isValid && validations.shortname.isValid) {
39 |             return true;
40 |         }
41 | 
42 |         return false;
43 |     };
44 | 
45 |     const onSave = (ev: FormEvent) => {
46 |         ev.preventDefault();
47 | 
48 |         if (validateForm()) {
49 |             onUpdate(editStylesheet);
50 |         }
51 |     };
52 | 
53 |     const onEdit = (key: string, value: string) => setEditStylesheet(assign(editStylesheet, key, value));
54 |     const onEditURL = (ev: ChangeEvent<HTMLInputElement>) => onEdit("url", ev.target.value);
55 |     const onEditShortname = (ev: ChangeEvent<HTMLInputElement>) => onEdit("shortname", ev.target.value);
56 | 
57 |     const classNames = {
58 |         formFieldURL: getClassName([
59 |             "form-field",
60 |             (formValidations.url.isValid ? "" : "form-field--not-valid")
61 |         ]),
62 |         formFieldShortname: getClassName([
63 |             "form-field",
64 |             (formValidations.shortname.isValid ? "" : "form-field--not-valid")
65 |         ])
66 |     };
67 | 
68 |     return (
69 |         <div className="modal modal--show">
70 |             <div className="modal__overlay" onClick={onCancel}></div>
71 | 
72 |             <div className="modal__main">
73 |                 <div className="modal__content">
74 |                     <form onSubmit={onSave} className="form">
75 |                         <div className={classNames.formFieldURL}>
76 |                             <label htmlFor="url">URL</label>
77 |                             <input id="url" type="text" value={editStylesheet.url} onInput={onEditURL} />
78 |                             <div className="validation-message">{formValidations.url.validationMessage}</div>
79 |                         </div>
80 | 
81 |                         <div className={classNames.formFieldShortname}>
82 |                             <label htmlFor="shortname">Shortname</label>
83 |                             <input id="shortname" type="text" placeholder="Choose a shortname for your stylesheet, e.g. My Amazing Theme" value={editStylesheet.shortname} onInput={onEditShortname} />
84 |                             <div className="validation-message">{formValidations.shortname.validationMessage}</div>
85 |                         </div>
86 | 
87 |                         <div className="form-actions">
88 |                             <button className="button button--small" type="button" onClick={onCancel}>Cancel</button>
89 |                             <button className="button button--small button--success" type="submit">Save</button>
90 |                         </div>
91 |                     </form>
92 |                 </div>
93 |             </div>
94 |         </div>
95 |     );
96 | }
97 | 


--------------------------------------------------------------------------------
/src/options/components/StylesheetForm.tsx:
--------------------------------------------------------------------------------
 1 | import { FormEvent, useState } from "react";
 2 | import { getClassName, validateURL } from "../../utils";
 3 | 
 4 | const isFirefox = /Firefox\/\d{1,2}/.test(navigator.userAgent);
 5 | const mixedContentURL = "https://developer.mozilla.org/en-US/docs/Web/Security/Mixed_content#Warnings_in_Web_Console";
 6 | 
 7 | interface IProps {
 8 |     onSubmit: (url: string) => unknown;
 9 | }
10 | 
11 | export function StylesheetForm (props: IProps) {
12 |     const { onSubmit } = props;
13 |     const [ url, setURL ] = useState("");
14 |     const [ isFormValid, setValidForm ] = useState(true);
15 | 
16 |     const handleSubmit = (ev: FormEvent<HTMLFormElement>) => {
17 |         ev.preventDefault();
18 | 
19 |         const newURL = url.trim();
20 | 
21 |         if (newURL.length === 0) {
22 |             return false;
23 |         }
24 | 
25 |         const isValid = validateURL(newURL);
26 | 
27 |         if (isValid) {
28 |             setURL("");
29 |             onSubmit(newURL);
30 |             setValidForm(true);
31 |         } else {
32 |             setValidForm(false);
33 |         }
34 |     };
35 | 
36 |     const inputClassName = isFormValid ? "" : "not-valid";
37 | 
38 |     const errorClassName = getClassName([
39 |         "text-error",
40 |         isFormValid ? "hidden" : "",
41 |     ]);
42 | 
43 |     const mixedContentClassName = getClassName([
44 |         "text-help",
45 |         isFirefox ? "" : "hidden",
46 |     ]);
47 | 
48 |     return (
49 |         <form className="stylesheets-form" onSubmit={handleSubmit}>
50 |             <div className="stylesheets-form__group">
51 |                 <input
52 |                     type="text"
53 |                     name="stylesheet-url"
54 |                     value={url}
55 |                     onInput={(ev) => setURL(ev.target.value)}
56 |                     placeholder="Add a CSS file URL here..."
57 |                     className={inputClassName}
58 |                 />
59 |                 <input
60 |                     type="submit"
61 |                     className="button button--success"
62 |                     value="Add Stylesheet"
63 |                 />
64 |             </div>
65 | 
66 |             <div className={errorClassName}>
67 |                 Please provide a valid URL. Example: <code>http://localhost/my-theme.css</code>
68 |             </div>
69 | 
70 |             <div className={mixedContentClassName}>
71 |                 <strong>Note:</strong> Firefox uses <code>http://127.0.0.1</code> instead of <code>http://localhost</code>.
72 |                 Click <a href={mixedContentURL} target="_blank" rel="noreferrer">here</a> for more info.
73 |             </div>
74 |         </form>
75 |     );
76 | }
77 | 


--------------------------------------------------------------------------------
/src/options/components/StylesheetItemTableRow.tsx:
--------------------------------------------------------------------------------
 1 | import { Stylesheet } from "../../Stylesheet";
 2 | 
 3 | interface IProps {
 4 |     stylesheet: Stylesheet;
 5 |     onEdit: (stylesheet: Stylesheet) => unknown;
 6 |     onRemove: (url: string) => unknown;
 7 | }
 8 | 
 9 | const iconEdit = <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fillRule="evenodd" clipRule="evenodd" d="M20.5337 3.3916C20.2236 3.08142 19.9559 2.81378 19.7193 2.60738C19.4702 2.39007 19.2019 2.1918 18.876 2.05679C18.1409 1.75231 17.3149 1.75231 16.5799 2.05679C16.2539 2.1918 15.9856 2.39007 15.7365 2.60738C15.4999 2.81378 15.2323 3.08141 14.9221 3.39159L8.93751 9.37615C8.52251 9.79078 8.20882 10.1042 7.97173 10.477C7.77111 10.7924 7.61569 11.1344 7.51002 11.4929C7.38514 11.9167 7.35534 12.3591 7.31592 12.9444L7.1842 14.8876C7.17485 15.0247 7.16396 15.1845 7.16666 15.3246C7.16974 15.4838 7.18962 15.7203 7.30999 15.9677C7.45687 16.2697 7.70083 16.5137 8.00282 16.6606C8.25029 16.7809 8.48679 16.8008 8.64598 16.8039C8.78602 16.8066 8.94585 16.7957 9.08298 16.7863L11.0261 16.6546C11.6114 16.6152 12.0539 16.5854 12.4776 16.4605C12.8362 16.3549 13.1782 16.1994 13.4936 15.9988C13.8664 15.7617 14.1798 15.448 14.5944 15.033L20.579 9.04845C20.8891 8.73829 21.1568 8.47067 21.3632 8.23405C21.5805 7.98491 21.7788 7.71662 21.9138 7.39069C22.2182 6.65561 22.2182 5.82968 21.9138 5.09459C21.7788 4.76867 21.5805 4.50038 21.3632 4.25124C21.1568 4.01464 20.8892 3.74704 20.579 3.43691L20.5337 3.3916ZM18.1106 3.90455C18.1522 3.92179 18.2324 3.96437 18.4046 4.11458C18.5836 4.27072 18.803 4.48928 19.1421 4.82843C19.4813 5.16758 19.6998 5.3869 19.856 5.56591C20.0062 5.73813 20.0488 5.81835 20.066 5.85996C20.1675 6.10499 20.1675 6.3803 20.066 6.62533C20.0488 6.66694 20.0062 6.74716 19.856 6.91938C19.7482 7.04288 19.6108 7.18558 19.4245 7.37359L16.597 4.54602C16.785 4.35976 16.9277 4.22231 17.0512 4.11458C17.2234 3.96437 17.3036 3.92179 17.3452 3.90455C17.5903 3.80306 17.8656 3.80306 18.1106 3.90455ZM15.1823 5.9598L18.0107 8.78823L13.2465 13.5525C12.7366 14.0624 12.5842 14.207 12.4202 14.3112C12.2625 14.4116 12.0915 14.4893 11.9122 14.5421C11.7258 14.597 11.5167 14.6168 10.7973 14.6655L9.19649 14.7741L9.30502 13.1732C9.3538 12.4538 9.37351 12.2447 9.42845 12.0583C9.48128 11.879 9.55899 11.708 9.6593 11.5503C9.76359 11.3863 9.90816 11.234 10.418 10.7241L15.1823 5.9598Z" fill="#0F1729"/> <path d="M11.0055 2C9.61949 1.99999 8.51721 1.99999 7.62839 2.0738C6.71811 2.14939 5.94253 2.30755 5.23415 2.67552C4.1383 3.24478 3.24477 4.1383 2.67552 5.23416C2.30755 5.94253 2.14939 6.71811 2.0738 7.6284C1.99999 8.51721 1.99999 9.61949 2 11.0055V12.9945C1.99999 14.3805 1.99999 15.4828 2.0738 16.3716C2.14939 17.2819 2.30755 18.0575 2.67552 18.7659C3.24477 19.8617 4.1383 20.7552 5.23415 21.3245C5.94253 21.6925 6.71811 21.8506 7.62839 21.9262C8.5172 22 9.61946 22 11.0054 22H13.0438C14.4068 22 15.4909 22 16.3654 21.9286C17.261 21.8554 18.0247 21.7023 18.7239 21.346C19.8529 20.7708 20.7708 19.8529 21.346 18.7239C21.7023 18.0247 21.8554 17.261 21.9286 16.3654C22 15.4909 22 14.4069 22 13.0439V13C22 12.4477 21.5523 12 21 12C20.4477 12 20 12.4477 20 13C20 14.4166 19.9992 15.419 19.9352 16.2026C19.8721 16.9745 19.7527 17.4457 19.564 17.816C19.1805 18.5686 18.5686 19.1805 17.816 19.564C17.4457 19.7527 16.9745 19.8721 16.2026 19.9352C15.419 19.9992 14.4166 20 13 20H11.05C9.60949 20 8.59025 19.9992 7.79391 19.9331C7.00955 19.8679 6.53142 19.7446 6.1561 19.5497C5.42553 19.1702 4.82985 18.5745 4.45035 17.8439C4.25538 17.4686 4.13208 16.9905 4.06694 16.2061C4.0008 15.4097 4 14.3905 4 12.95V11.05C4 9.60949 4.0008 8.59026 4.06694 7.79392C4.13208 7.00955 4.25538 6.53142 4.45035 6.15611C4.82985 5.42553 5.42553 4.82985 6.1561 4.45035C6.53142 4.25539 7.00955 4.13208 7.79391 4.06694C8.59025 4.00081 9.60949 4 11.05 4H12C12.5523 4 13 3.55229 13 3C13 2.44772 12.5523 2 12 2L11.0055 2Z"/> </svg>;
10 | const iconDelete = <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fillRule="evenodd" clipRule="evenodd" d="M7.10002 5H3C2.44772 5 2 5.44772 2 6C2 6.55228 2.44772 7 3 7H4.06055L4.88474 20.1871C4.98356 21.7682 6.29471 23 7.8789 23H16.1211C17.7053 23 19.0164 21.7682 19.1153 20.1871L19.9395 7H21C21.5523 7 22 6.55228 22 6C22 5.44772 21.5523 5 21 5H19.0073C19.0018 4.99995 18.9963 4.99995 18.9908 5H16.9C16.4367 2.71776 14.419 1 12 1C9.58104 1 7.56329 2.71776 7.10002 5ZM9.17071 5H14.8293C14.4175 3.83481 13.3062 3 12 3C10.6938 3 9.58254 3.83481 9.17071 5ZM17.9355 7H6.06445L6.88085 20.0624C6.91379 20.5894 7.35084 21 7.8789 21H16.1211C16.6492 21 17.0862 20.5894 17.1192 20.0624L17.9355 7ZM14.279 10.0097C14.83 10.0483 15.2454 10.5261 15.2068 11.0771L14.7883 17.0624C14.7498 17.6134 14.2719 18.0288 13.721 17.9903C13.17 17.9517 12.7546 17.4739 12.7932 16.9229L13.2117 10.9376C13.2502 10.3866 13.7281 9.97122 14.279 10.0097ZM9.721 10.0098C10.2719 9.97125 10.7498 10.3866 10.7883 10.9376L11.2069 16.923C11.2454 17.4739 10.83 17.9518 10.2791 17.9903C9.72811 18.0288 9.25026 17.6134 9.21173 17.0625L8.79319 11.0771C8.75467 10.5262 9.17006 10.0483 9.721 10.0098Z"/> </svg>;
11 | 
12 | export function StylesheetItemTableRow (props: IProps) {
13 |     const { stylesheet, onEdit, onRemove } = props;
14 | 
15 |     const handleRemove = () => onRemove(stylesheet.url);
16 |     const handleEdit = () => onEdit(stylesheet);
17 | 
18 |     return (
19 |         <>
20 |             <tr className="">
21 |                 <td>
22 |                     <a href={stylesheet.url} target="_blank" rel="noreferrer">
23 |                         {stylesheet.url}
24 |                     </a>
25 |                 </td>
26 |                 <td className="whitespace-nowrap">
27 |                     {stylesheet.shortname !== "" && (
28 |                         <a href={stylesheet.url} target="_blank" rel="noreferrer">
29 |                             {stylesheet.shortname}
30 |                         </a>
31 |                     )}
32 |                     
33 |                     {stylesheet.shortname === "" && (
34 |                         <span>&mdash;</span>
35 |                     )}
36 |                 </td>
37 |                 <td className="whitespace-nowrap text-align-end">
38 |                     <button
39 |                         className="button button--small button--icon"
40 |                         onClick={handleEdit}
41 |                         title="Edit"
42 |                     >
43 |                         {iconEdit}
44 |                     </button>
45 |                     <button
46 |                         className="button button--small button--icon button--danger"
47 |                         onClick={handleRemove}
48 |                         title="Delete"
49 |                     >
50 |                         {iconDelete}
51 |                     </button>
52 |                 </td>
53 |             </tr>
54 |         </>
55 |     );
56 | }
57 | 


--------------------------------------------------------------------------------
/src/options/components/StylesheetListTable.tsx:
--------------------------------------------------------------------------------
 1 | import { useState } from "react";
 2 | import { Stylesheet } from "../../Stylesheet";
 3 | import If from "../../common/If";
 4 | import { getClassName } from "../../utils";
 5 | import { EditModal } from "./EditModal";
 6 | import { StylesheetItemTableRow } from "./StylesheetItemTableRow";
 7 | 
 8 | interface IProps {
 9 |     list: Stylesheet[];
10 |     onRemove: (url: string) => unknown;
11 |     onUpdate: (prevStylesheet: Stylesheet, newStylesheet: Stylesheet) => unknown;
12 | }
13 | 
14 | export function StylesheetListTable (props: IProps) {
15 |     const { list, onRemove, onUpdate } = props;
16 |     const [ isEdit, setIsEdit ] = useState(false);
17 |     const [ editStylesheet, setEditStylesheet ] = useState<Stylesheet>();
18 | 
19 |     const handleEdit = (stylesheet: Stylesheet) => {
20 |         setEditStylesheet(stylesheet);
21 |         setIsEdit(true);
22 |     };
23 | 
24 |     const handleCancel = () => setIsEdit(false);
25 | 
26 |     const handleUpdate = (newStylesheet: Stylesheet) => {
27 |         if (editStylesheet) {
28 |             onUpdate(editStylesheet, newStylesheet);
29 |             setIsEdit(false);
30 |         }
31 |     };
32 | 
33 |     const messageClassName = getClassName([
34 |         "stylesheets-message",
35 |         (list.length > 0 ? "hidden" : "")
36 |     ]);
37 | 
38 |     const showEditModal = () => {
39 |         if (editStylesheet && isEdit) {
40 |             return (
41 |                 <EditModal
42 |                     stylesheet={editStylesheet}
43 |                     onUpdate={handleUpdate}
44 |                     onCancel={handleCancel}
45 |                 ></EditModal>
46 |             );
47 |         }
48 | 
49 |         return <></>;
50 |     };
51 | 
52 |     return (
53 |         <>
54 |             <div className={messageClassName}>No stylesheets added yet.</div>
55 |             <If condition={list.length > 0}>
56 |                 <div className="stylesheets-list">
57 |                     <table>
58 |                         <thead>
59 |                             <tr>
60 |                                 <th>URL</th>
61 |                                 <th className="whitespace-nowrap">Short Name</th>
62 |                                 <th className="whitespace-nowrap"></th>
63 |                             </tr>
64 |                         </thead>
65 |                         <tbody>
66 |                             {list.map((stylesheet, index) => {
67 |                                 return (
68 |                                     <StylesheetItemTableRow
69 |                                         key={index}
70 |                                         stylesheet={stylesheet}
71 |                                         onRemove={onRemove}
72 |                                         onEdit={handleEdit}
73 |                                     />
74 |                                 );
75 |                             })}
76 |                         </tbody>
77 |                     </table>
78 | 
79 |                     {showEditModal()}
80 |                 </div>
81 |             </If>
82 |         </>
83 |     );
84 | }
85 | 


--------------------------------------------------------------------------------
/src/options/index.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import ReactDOM from "react-dom/client";
 3 | import { loadStorage } from "../storage";
 4 | import { StorageData } from "../types";
 5 | import Options from "./Options";
 6 | 
 7 | loadStorage().then((state: StorageData) => {
 8 |     ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
 9 |         <React.StrictMode>
10 |             <Options initialState={state} />
11 |         </React.StrictMode>
12 |     );
13 | });
14 | 


--------------------------------------------------------------------------------
/src/popup/Popup.tsx:
--------------------------------------------------------------------------------
 1 | import { useEffect, useReducer, useState } from "react";
 2 | import { updateStorage } from "../storage";
 3 | import { PopupState } from "../types";
 4 | import { sendInjectMessageToTab, updateBadgesCount } from "../utils";
 5 | import { PopupEmptyMessage } from "./PopupEmptyMessage";
 6 | import { PopupHeader } from "./PopupHeader";
 7 | import { PopupPreferences } from "./PopupPreferences";
 8 | import { PopupReducer } from "./PopupReducer";
 9 | import { PopupSearch } from "./PopupSearch";
10 | import { StylesheetList } from "./StylesheetList";
11 | 
12 | interface IProps {
13 |     initialState: PopupState;
14 | }
15 | 
16 | function Popup (props: IProps) {
17 |     const [ state, setState ] = useReducer(PopupReducer, props.initialState);
18 |     const [ searchValue, setSearchValue ] = useState("");
19 | 
20 |     useEffect(() => {
21 |         if (state.tabId) {
22 |             const tabId = state.tabId;
23 | 
24 |             updateStorage(state).then(() => {
25 |                 sendInjectMessageToTab({
26 |                     tabId: tabId,
27 |                     urlList: (state.injected[tabId] || []),
28 |                     webSocketServerURL: state.config.webSocketServerURL
29 |                 });
30 |                 updateBadgesCount();
31 |             });
32 |         }
33 |     }, [ state ]);
34 | 
35 |     const handleSelection = (isActive: boolean, url: string) => {
36 |         if (state.tabId) {
37 |             console.log("Toggle active Stylesheet");
38 | 
39 |             setState({
40 |                 type: isActive ? "inject" : "clear",
41 |                 tabId: state.tabId,
42 |                 url: url,
43 |             });
44 |         }
45 |     };
46 | 
47 |     const activeStylesheets = (): string[] => {
48 |         if (state.tabId) {
49 |             return state.injected[state.tabId] || [];
50 |         }
51 | 
52 |         return [];
53 |     };
54 | 
55 |     const renderStylesheetsList = () => {
56 |         if (state.stylesheets.length > 0) {
57 |             return (
58 |                 <StylesheetList
59 |                     list={state.stylesheets}
60 |                     activeList={activeStylesheets()}
61 |                     onSelectionChange={handleSelection}
62 |                     search={searchValue}
63 |                 />
64 |             );
65 |         }
66 | 
67 |         return <PopupEmptyMessage />;
68 |     };
69 | 
70 |     const renderSearch = () => {
71 |         if (state.stylesheets.length >= 6) {
72 |             return (
73 |                 <PopupSearch search={searchValue} onChange={setSearchValue} />
74 |             );
75 |         }
76 | 
77 |         return null;
78 |     };
79 | 
80 |     return (
81 |         <>
82 |             <PopupPreferences />
83 |             <PopupHeader>{renderSearch()}</PopupHeader>
84 |             {renderStylesheetsList()}
85 |         </>
86 |     );
87 | }
88 | 
89 | export default Popup;
90 | 


--------------------------------------------------------------------------------
/src/popup/PopupEmptyMessage.tsx:
--------------------------------------------------------------------------------
 1 | import { env } from "../utils";
 2 | 
 3 | export function PopupEmptyMessage () {
 4 |     const openOptionsPage = () => env.runtime.openOptionsPage();
 5 | 
 6 |     return (
 7 |         <div className="stylesheets-message">
 8 |             <div>No stylesheets added yet.</div>
 9 |             <button data-action="preferences" onClick={openOptionsPage}>Add stylesheet</button>
10 |         </div>
11 |     );
12 | }
13 | 


--------------------------------------------------------------------------------
/src/popup/PopupHeader.tsx:
--------------------------------------------------------------------------------
 1 | interface IProps {
 2 |     children: JSX.Element | JSX.Element[] | null;
 3 | }
 4 | 
 5 | export function PopupHeader (props: IProps) {
 6 |     const { children } = props;
 7 |     
 8 |     return (
 9 |         <header>
10 |             <div className="column">
11 |                 <div className="logo">
12 |                     <img src="icons/128x128.png" width="26" alt="" />
13 |                 </div>
14 | 
15 |                 <div className="title-wrapper">
16 |                     <h3 className="title">Super CSS Inject</h3>
17 |                     {children}
18 |                 </div>
19 |             </div>
20 |         </header>
21 |     );
22 | }
23 | 


--------------------------------------------------------------------------------
/src/popup/PopupPreferences.tsx:
--------------------------------------------------------------------------------
 1 | import { env } from "../utils";
 2 | 
 3 | export function PopupPreferences () {
 4 |     const openOptionsPage = () => env.runtime.openOptionsPage();
 5 | 
 6 |     return (
 7 |         <div
 8 |             className="preferences"
 9 |             data-action="preferences"
10 |             title="Options"
11 |             onClick={openOptionsPage}
12 |         >
13 |             <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
14 |                 <path fillRule="evenodd" clipRule="evenodd" d="M12 8.00002C9.79085 8.00002 7.99999 9.79088 7.99999 12C7.99999 14.2092 9.79085 16 12 16C14.2091 16 16 14.2092 16 12C16 9.79088 14.2091 8.00002 12 8.00002ZM9.99999 12C9.99999 10.8955 10.8954 10 12 10C13.1046 10 14 10.8955 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 9.99999 13.1046 9.99999 12Z"/>
15 |                 <path fillRule="evenodd" clipRule="evenodd" d="M12 8.00002C9.79085 8.00002 7.99999 9.79088 7.99999 12C7.99999 14.2092 9.79085 16 12 16C14.2091 16 16 14.2092 16 12C16 9.79088 14.2091 8.00002 12 8.00002ZM9.99999 12C9.99999 10.8955 10.8954 10 12 10C13.1046 10 14 10.8955 14 12C14 13.1046 13.1046 14 12 14C10.8954 14 9.99999 13.1046 9.99999 12Z"/>
16 |                 <path fillRule="evenodd" clipRule="evenodd" d="M10.7673 1.01709C10.9925 0.999829 11.2454 0.99993 11.4516 1.00001L12.5484 1.00001C12.7546 0.99993 13.0075 0.999829 13.2327 1.01709C13.4989 1.03749 13.8678 1.08936 14.2634 1.26937C14.7635 1.49689 15.1915 1.85736 15.5007 2.31147C15.7454 2.67075 15.8592 3.0255 15.9246 3.2843C15.9799 3.50334 16.0228 3.75249 16.0577 3.9557L16.1993 4.77635L16.2021 4.77788C16.2369 4.79712 16.2715 4.81659 16.306 4.8363L16.3086 4.83774L17.2455 4.49865C17.4356 4.42978 17.6693 4.34509 17.8835 4.28543C18.1371 4.2148 18.4954 4.13889 18.9216 4.17026C19.4614 4.20998 19.9803 4.39497 20.4235 4.70563C20.7734 4.95095 21.0029 5.23636 21.1546 5.4515C21.2829 5.63326 21.4103 5.84671 21.514 6.02029L22.0158 6.86003C22.1256 7.04345 22.2594 7.26713 22.3627 7.47527C22.4843 7.7203 22.6328 8.07474 22.6777 8.52067C22.7341 9.08222 22.6311 9.64831 22.3803 10.1539C22.1811 10.5554 21.9171 10.8347 21.7169 11.0212C21.5469 11.1795 21.3428 11.3417 21.1755 11.4746L20.5 12L21.1755 12.5254C21.3428 12.6584 21.5469 12.8205 21.7169 12.9789C21.9171 13.1653 22.1811 13.4446 22.3802 13.8461C22.631 14.3517 22.7341 14.9178 22.6776 15.4794C22.6328 15.9253 22.4842 16.2797 22.3626 16.5248C22.2593 16.7329 22.1255 16.9566 22.0158 17.14L21.5138 17.9799C21.4102 18.1535 21.2828 18.3668 21.1546 18.5485C21.0028 18.7637 20.7734 19.0491 20.4234 19.2944C19.9803 19.6051 19.4613 19.7901 18.9216 19.8298C18.4954 19.8612 18.1371 19.7852 17.8835 19.7146C17.6692 19.6549 17.4355 19.5703 17.2454 19.5014L16.3085 19.1623L16.306 19.1638C16.2715 19.1835 16.2369 19.2029 16.2021 19.2222L16.1993 19.2237L16.0577 20.0443C16.0228 20.2475 15.9799 20.4967 15.9246 20.7157C15.8592 20.9745 15.7454 21.3293 15.5007 21.6886C15.1915 22.1427 14.7635 22.5032 14.2634 22.7307C13.8678 22.9107 13.4989 22.9626 13.2327 22.983C13.0074 23.0002 12.7546 23.0001 12.5484 23H11.4516C11.2454 23.0001 10.9925 23.0002 10.7673 22.983C10.5011 22.9626 10.1322 22.9107 9.73655 22.7307C9.23648 22.5032 8.80849 22.1427 8.49926 21.6886C8.25461 21.3293 8.14077 20.9745 8.07542 20.7157C8.02011 20.4967 7.97723 20.2475 7.94225 20.0443L7.80068 19.2237L7.79791 19.2222C7.7631 19.2029 7.72845 19.1835 7.69396 19.1637L7.69142 19.1623L6.75458 19.5014C6.5645 19.5702 6.33078 19.6549 6.11651 19.7146C5.86288 19.7852 5.50463 19.8611 5.07841 19.8298C4.53866 19.7901 4.01971 19.6051 3.57654 19.2944C3.2266 19.0491 2.99714 18.7637 2.84539 18.5485C2.71718 18.3668 2.58974 18.1534 2.4861 17.9798L1.98418 17.14C1.87447 16.9566 1.74067 16.7329 1.63737 16.5248C1.51575 16.2797 1.36719 15.9253 1.32235 15.4794C1.26588 14.9178 1.36897 14.3517 1.61976 13.8461C1.81892 13.4446 2.08289 13.1653 2.28308 12.9789C2.45312 12.8205 2.65717 12.6584 2.82449 12.5254L3.47844 12.0054V11.9947L2.82445 11.4746C2.65712 11.3417 2.45308 11.1795 2.28304 11.0212C2.08285 10.8347 1.81888 10.5554 1.61972 10.1539C1.36893 9.64832 1.26584 9.08224 1.3223 8.52069C1.36714 8.07476 1.51571 7.72032 1.63732 7.47528C1.74062 7.26715 1.87443 7.04347 1.98414 6.86005L2.48605 6.02026C2.58969 5.84669 2.71714 5.63326 2.84534 5.45151C2.9971 5.23637 3.22655 4.95096 3.5765 4.70565C4.01966 4.39498 4.53862 4.20999 5.07837 4.17027C5.50458 4.1389 5.86284 4.21481 6.11646 4.28544C6.33072 4.34511 6.56444 4.4298 6.75451 4.49867L7.69141 4.83775L7.69394 4.8363C7.72844 4.8166 7.7631 4.79712 7.79791 4.77788L7.80068 4.77635L7.94225 3.95571C7.97723 3.7525 8.02011 3.50334 8.07542 3.2843C8.14077 3.0255 8.25461 2.67075 8.49926 2.31147C8.80849 1.85736 9.23648 1.49689 9.73655 1.26937C10.1322 1.08936 10.5011 1.03749 10.7673 1.01709ZM14.0938 4.3363C14.011 3.85634 13.9696 3.61637 13.8476 3.43717C13.7445 3.2858 13.6019 3.16564 13.4352 3.0898C13.2378 3.00002 12.9943 3.00002 12.5073 3.00002H11.4927C11.0057 3.00002 10.7621 3.00002 10.5648 3.0898C10.3981 3.16564 10.2555 3.2858 10.1524 3.43717C10.0304 3.61637 9.98895 3.85634 9.90615 4.3363L9.75012 5.24064C9.69445 5.56333 9.66662 5.72467 9.60765 5.84869C9.54975 5.97047 9.50241 6.03703 9.40636 6.13166C9.30853 6.22804 9.12753 6.3281 8.76554 6.52822C8.73884 6.54298 8.71227 6.55791 8.68582 6.57302C8.33956 6.77078 8.16643 6.86966 8.03785 6.90314C7.91158 6.93602 7.83293 6.94279 7.70289 6.93196C7.57049 6.92094 7.42216 6.86726 7.12551 6.7599L6.11194 6.39308C5.66271 6.2305 5.43809 6.14921 5.22515 6.16488C5.04524 6.17811 4.87225 6.23978 4.72453 6.34333C4.5497 6.46589 4.42715 6.67094 4.18206 7.08103L3.72269 7.84965C3.46394 8.2826 3.33456 8.49907 3.31227 8.72078C3.29345 8.90796 3.32781 9.09665 3.41141 9.26519C3.51042 9.4648 3.7078 9.62177 4.10256 9.9357L4.82745 10.5122C5.07927 10.7124 5.20518 10.8126 5.28411 10.9199C5.36944 11.036 5.40583 11.1114 5.44354 11.2504C5.47844 11.379 5.47844 11.586 5.47844 12C5.47844 12.414 5.47844 12.621 5.44354 12.7497C5.40582 12.8887 5.36944 12.9641 5.28413 13.0801C5.20518 13.1875 5.07927 13.2876 4.82743 13.4879L4.10261 14.0643C3.70785 14.3783 3.51047 14.5352 3.41145 14.7349C3.32785 14.9034 3.29349 15.0921 3.31231 15.2793C3.33461 15.501 3.46398 15.7174 3.72273 16.1504L4.1821 16.919C4.4272 17.3291 4.54974 17.5342 4.72457 17.6567C4.8723 17.7603 5.04528 17.8219 5.2252 17.8352C5.43813 17.8508 5.66275 17.7695 6.11199 17.607L7.12553 17.2402C7.42216 17.1328 7.5705 17.0791 7.7029 17.0681C7.83294 17.0573 7.91159 17.064 8.03786 17.0969C8.16644 17.1304 8.33956 17.2293 8.68582 17.427C8.71228 17.4421 8.73885 17.4571 8.76554 17.4718C9.12753 17.6719 9.30853 17.772 9.40635 17.8684C9.50241 17.963 9.54975 18.0296 9.60765 18.1514C9.66662 18.2754 9.69445 18.4367 9.75012 18.7594L9.90615 19.6637C9.98895 20.1437 10.0304 20.3837 10.1524 20.5629C10.2555 20.7142 10.3981 20.8344 10.5648 20.9102C10.7621 21 11.0057 21 11.4927 21H12.5073C12.9943 21 13.2378 21 13.4352 20.9102C13.6019 20.8344 13.7445 20.7142 13.8476 20.5629C13.9696 20.3837 14.011 20.1437 14.0938 19.6637L14.2499 18.7594C14.3055 18.4367 14.3334 18.2754 14.3923 18.1514C14.4502 18.0296 14.4976 17.963 14.5936 17.8684C14.6915 17.772 14.8725 17.6719 15.2344 17.4718C15.2611 17.4571 15.2877 17.4421 15.3141 17.427C15.6604 17.2293 15.8335 17.1304 15.9621 17.0969C16.0884 17.064 16.167 17.0573 16.2971 17.0681C16.4295 17.0791 16.5778 17.1328 16.8744 17.2402L17.888 17.607C18.3372 17.7696 18.5619 17.8509 18.7748 17.8352C18.9547 17.8219 19.1277 17.7603 19.2754 17.6567C19.4502 17.5342 19.5728 17.3291 19.8179 16.919L20.2773 16.1504C20.536 15.7175 20.6654 15.501 20.6877 15.2793C20.7065 15.0921 20.6721 14.9034 20.5885 14.7349C20.4895 14.5353 20.2921 14.3783 19.8974 14.0643L19.1726 13.4879C18.9207 13.2876 18.7948 13.1875 18.7159 13.0801C18.6306 12.9641 18.5942 12.8887 18.5564 12.7497C18.5215 12.6211 18.5215 12.414 18.5215 12C18.5215 11.586 18.5215 11.379 18.5564 11.2504C18.5942 11.1114 18.6306 11.036 18.7159 10.9199C18.7948 10.8126 18.9207 10.7124 19.1725 10.5122L19.8974 9.9357C20.2922 9.62176 20.4896 9.46479 20.5886 9.26517C20.6722 9.09664 20.7065 8.90795 20.6877 8.72076C20.6654 8.49906 20.5361 8.28259 20.2773 7.84964L19.8179 7.08102C19.5728 6.67093 19.4503 6.46588 19.2755 6.34332C19.1277 6.23977 18.9548 6.1781 18.7748 6.16486C18.5619 6.14919 18.3373 6.23048 17.888 6.39307L16.8745 6.75989C16.5778 6.86725 16.4295 6.92093 16.2971 6.93195C16.167 6.94278 16.0884 6.93601 15.9621 6.90313C15.8335 6.86965 15.6604 6.77077 15.3142 6.57302C15.2877 6.55791 15.2611 6.54298 15.2345 6.52822C14.8725 6.3281 14.6915 6.22804 14.5936 6.13166C14.4976 6.03703 14.4502 5.97047 14.3923 5.84869C14.3334 5.72467 14.3055 5.56332 14.2499 5.24064L14.0938 4.3363Z"/>
17 |             </svg>
18 |         </div>
19 |     );
20 | }
21 | 


--------------------------------------------------------------------------------
/src/popup/PopupReducer.test.ts:
--------------------------------------------------------------------------------
  1 | import { PopupState } from "../types";
  2 | import { PopupReducer } from "./PopupReducer";
  3 | 
  4 | const tabId = 1010977386;
  5 | const stylesheetA = "http://127.0.0.1:3000/public/css/theme-A.css";
  6 | const stylesheetB = "http://127.0.0.1:3000/public/css/theme-B.css";
  7 | const webSocketServerURL = "ws://localhost:35729/livereload";
  8 | 
  9 | const states: Record<string, PopupState> = {
 10 |     noInjectedStylesheet:  {
 11 |         tabId: tabId,
 12 |         stylesheets: [
 13 |             stylesheetA,
 14 |             stylesheetB,
 15 |         ],
 16 |         injected: {},
 17 |         config: { webSocketServerURL: webSocketServerURL }
 18 |     },
 19 |     oneInjectedStylesheet: {
 20 |         tabId: tabId,
 21 |         stylesheets: [
 22 |             stylesheetA,
 23 |             stylesheetB,
 24 |         ],
 25 |         injected: {
 26 |             [tabId]: [
 27 |                 stylesheetA,
 28 |             ]
 29 |         },
 30 |         config: { webSocketServerURL: webSocketServerURL }
 31 |     },
 32 |     multipleInjectedStylesheets: {
 33 |         tabId: tabId,
 34 |         stylesheets: [
 35 |             stylesheetA,
 36 |             stylesheetB,
 37 |         ],
 38 |         injected: {
 39 |             [tabId]: [
 40 |                 stylesheetA,
 41 |                 stylesheetB,
 42 |             ]
 43 |         },
 44 |         config: { webSocketServerURL: webSocketServerURL }
 45 |     },
 46 | };
 47 | 
 48 | describe("Injecting stylesheets", () => {
 49 |     test("Injects one stylesheet", () => {
 50 |         const initialState = states.noInjectedStylesheet;
 51 |         const expectedState = states.oneInjectedStylesheet;
 52 | 
 53 |         const updatedState = PopupReducer(initialState, {
 54 |             type: "inject",
 55 |             tabId: tabId,
 56 |             url: stylesheetA
 57 |         });
 58 | 
 59 |         expect(updatedState).toEqual(expectedState);
 60 |     });
 61 | 
 62 |     test("Injects additional stylesheets", () => {
 63 |         const initialState = states.oneInjectedStylesheet;
 64 |         const expectedState = states.multipleInjectedStylesheets;
 65 | 
 66 |         const updatedState = PopupReducer(initialState, {
 67 |             type: "inject",
 68 |             tabId: tabId,
 69 |             url: stylesheetB
 70 |         });
 71 | 
 72 |         expect(updatedState).toEqual(expectedState);
 73 |     });
 74 | });
 75 | 
 76 | describe("Clearing injected stylesheets", () => {
 77 |     test("Clears one injected stylesheet", () => {
 78 |         const initialState = states.multipleInjectedStylesheets;
 79 |         const expectedState = states.oneInjectedStylesheet;
 80 | 
 81 |         const updatedState = PopupReducer(initialState, {
 82 |             type: "clear",
 83 |             tabId: tabId,
 84 |             url: stylesheetB
 85 |         });
 86 | 
 87 |         expect(updatedState).toEqual(expectedState);
 88 |     });
 89 | 
 90 |     test("Clears remaining injected stylesheet", () => {
 91 |         const initialState = states.oneInjectedStylesheet;
 92 |         const expectedState = states.noInjectedStylesheet;
 93 | 
 94 |         const updatedState = PopupReducer(initialState, {
 95 |             type: "clear",
 96 |             tabId: tabId,
 97 |             url: stylesheetA
 98 |         });
 99 | 
100 |         expect(updatedState).toEqual(expectedState);
101 |     });
102 | });
103 | 
104 | export { };
105 | 


--------------------------------------------------------------------------------
/src/popup/PopupReducer.ts:
--------------------------------------------------------------------------------
 1 | import { PopupState } from "../types";
 2 | 
 3 | type Action =
 4 |     | { type: "inject"; url: string; tabId: number; }
 5 |     | { type: "clear"; url: string; tabId: number; };
 6 | 
 7 | export function PopupReducer (state: PopupState, action: Action): PopupState {
 8 |     switch (action.type) {
 9 |     case "inject":
10 |         return inject(state, action.tabId, action.url);
11 | 
12 |     case "clear":
13 |         return clear(state, action.tabId, action.url);
14 | 
15 |     default:
16 |         return state;
17 |     }
18 | }
19 | 
20 | function inject (state: PopupState, tabId: number, url: string): PopupState {
21 |     const { injected } = structuredClone(state);
22 | 
23 |     if (injected[tabId]) {
24 |         if (!injected[tabId]?.includes(url)) {
25 |             injected[tabId]?.push(url);
26 |         }
27 |     } else {
28 |         injected[tabId] = [ url ];
29 |     }
30 | 
31 |     return {
32 |         ...state,
33 |         injected
34 |     };
35 | }
36 | 
37 | function clear (state: PopupState, tabId: number, url: string): PopupState {
38 |     const { injected } = structuredClone(state);
39 | 
40 |     if (injected[tabId]) {
41 |         injected[tabId] = injected[tabId]?.filter((_url: string) => _url !== url);
42 | 
43 |         if (injected[tabId]?.length == 0) {
44 |             delete injected[tabId];
45 |         }
46 |     }
47 | 
48 |     return {
49 |         ...state,
50 |         injected
51 |     };
52 | }
53 | 


--------------------------------------------------------------------------------
/src/popup/PopupSearch.tsx:
--------------------------------------------------------------------------------
 1 | import { useRef } from "react";
 2 | import { getClassName } from "../utils";
 3 | 
 4 | interface IProps {
 5 |     search: string;
 6 |     onChange: (search: string) => unknown;
 7 | }
 8 | 
 9 | export function PopupSearch (props: IProps) {
10 |     const { search, onChange } = props;
11 |     const searchInputEl = useRef<HTMLInputElement>(null);
12 | 
13 |     const handleOnChange = () => {
14 |         if (searchInputEl.current) {
15 |             onChange(searchInputEl.current.value);
16 |         }
17 |     };
18 | 
19 |     const clearInput = () => {
20 |         if (searchInputEl.current) {
21 |             searchInputEl.current.focus();
22 |             onChange("");
23 |         }
24 |     };
25 | 
26 |     const iconClassName = getClassName([
27 |         "icon-cross",
28 |         search.length > 0 ? "" : "hidden",
29 |     ]);
30 | 
31 |     return (
32 |         <div className="search">
33 |             <svg
34 |                 className="icon-search"
35 |                 xmlns="http://www.w3.org/2000/svg"
36 |                 viewBox="294 210 32 32"
37 |                 width="32pt"
38 |                 height="32pt"
39 |             >
40 |                 <path
41 |                     d=" M 316.564 231.253 C 318.412 229.093 319.44 226.336 319.44 223.475 C 319.44 220.306 318.18 217.266 315.94 215.022 C 313.7 212.782 310.656 211.526 307.491 211.526 C 304.322 211.526 301.278 212.782 299.038 215.022 C 296.798 217.266 295.538 220.306 295.538 223.475 C 295.538 226.644 296.798 229.684 299.038 231.928 L 299.038 231.928 C 301.278 234.168 304.322 235.424 307.491 235.424 C 310.336 235.424 313.084 234.409 315.237 232.576 L 322.862 240.205 C 323.038 240.38 323.28 240.478 323.526 240.478 C 323.776 240.478 324.014 240.38 324.189 240.205 C 324.365 240.029 324.462 239.787 324.462 239.541 C 324.462 239.292 324.365 239.054 324.189 238.878 L 316.564 231.253 Z  M 300.357 230.605 C 298.468 228.716 297.407 226.148 297.407 223.475 C 297.407 220.802 298.468 218.234 300.357 216.345 C 302.25 214.457 304.818 213.391 307.491 213.395 C 310.164 213.391 312.728 214.457 314.62 216.345 C 316.509 218.234 317.571 220.802 317.571 223.475 C 317.571 226.148 316.509 228.716 314.62 230.605 C 312.728 232.494 310.164 233.555 307.491 233.555 C 304.818 233.555 302.25 232.494 300.357 230.605 L 300.357 230.605 Z "
42 |                     fillRule="evenodd"
43 |                     fill="rgb(0,0,0)"
44 |                 ></path>
45 |             </svg>
46 | 
47 |             <svg
48 |                 className={iconClassName}
49 |                 xmlns="http://www.w3.org/2000/svg"
50 |                 viewBox="4.5 4.5 23 23"
51 |                 width="23pt"
52 |                 height="23pt"
53 |                 onClick={clearInput}
54 |             >
55 |                 <path
56 |                     d=" M 13.88 16 L 4.94 24.94 C 4.66 25.22 4.5 25.6 4.5 26 C 4.5 26.4 4.66 26.78 4.94 27.06 C 5.22 27.34 5.6 27.5 6 27.5 C 6.4 27.5 6.78 27.34 7.06 27.06 L 16 18.12 L 24.94 27.06 C 25.22 27.34 25.6 27.5 26 27.5 C 26.4 27.5 26.78 27.34 27.06 27.06 C 27.34 26.78 27.5 26.4 27.5 26 C 27.5 25.6 27.34 25.22 27.06 24.94 L 18.12 16 L 27.06 7.06 C 27.34 6.78 27.5 6.4 27.5 6 C 27.5 5.6 27.34 5.22 27.06 4.94 C 26.78 4.66 26.4 4.5 26 4.5 C 25.6 4.5 25.22 4.66 24.94 4.94 L 16 13.88 L 7.06 4.94 C 6.78 4.66 6.4 4.5 6 4.5 C 5.6 4.5 5.22 4.66 4.94 4.94 C 4.66 5.22 4.5 5.6 4.5 6 C 4.5 6.4 4.66 6.78 4.94 7.06 L 13.88 16 Z "
57 |                     fill="rgb(0,0,0)"
58 |                 ></path>
59 |             </svg>
60 | 
61 |             <input
62 |                 type="text"
63 |                 placeholder="Search"
64 |                 value={search}
65 |                 onInput={handleOnChange}
66 |                 ref={searchInputEl}
67 |             />
68 |         </div>
69 |     );
70 | }
71 | 


--------------------------------------------------------------------------------
/src/popup/StylesheetItem.tsx:
--------------------------------------------------------------------------------
 1 | import { Stylesheet } from "../Stylesheet";
 2 | import { getClassName } from "../utils";
 3 | 
 4 | interface IProps {
 5 |     stylesheet: Stylesheet;
 6 |     isSelected: boolean;
 7 |     isHidden: boolean;
 8 |     selectionOrder: string | null;
 9 |     onActiveToggle: (active: boolean) => unknown;
10 | }
11 | 
12 | const iconCheck = <svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> <path fillRule="evenodd" clipRule="evenodd" d="M19.7071 6.29289C20.0976 6.68342 20.0976 7.31658 19.7071 7.70711L10.4142 17C9.63316 17.7811 8.36683 17.781 7.58579 17L3.29289 12.7071C2.90237 12.3166 2.90237 11.6834 3.29289 11.2929C3.68342 10.9024 4.31658 10.9024 4.70711 11.2929L9 15.5858L18.2929 6.29289C18.6834 5.90237 19.3166 5.90237 19.7071 6.29289Z"/> </svg>;
13 | 
14 | export function StylesheetItem (props: IProps) {
15 |     const { stylesheet, isSelected, selectionOrder, isHidden, onActiveToggle } = props;
16 |     const handleActiveChange = () => onActiveToggle(!isSelected);
17 |     const stylesheetName = stylesheet.name;
18 | 
19 |     const className = getClassName([
20 |         "stylesheet",
21 |         isHidden ? "hidden" : "",
22 |         isSelected ? "stylesheet--active" : "",
23 |         selectionOrder !== null ? "stylesheet--show-order" : "",
24 |     ]);
25 | 
26 |     return (
27 |         <div className={className} onClick={handleActiveChange}>
28 |             <div className="stylesheet__actions">
29 |                 <button className="stylesheet__toggle">{selectionOrder ? selectionOrder : iconCheck}</button>
30 |             </div>
31 |             <div className="stylesheet__url" title={stylesheetName}>
32 |                 {stylesheetName}
33 |             </div>
34 |         </div>
35 |     );
36 | }
37 | 


--------------------------------------------------------------------------------
/src/popup/StylesheetList.tsx:
--------------------------------------------------------------------------------
 1 | import { Stylesheet } from "../Stylesheet";
 2 | import {
 3 |     getClassName,
 4 |     getSelectionOrder,
 5 |     maxSelectionCount
 6 | } from "../utils";
 7 | import { StylesheetItem } from "./StylesheetItem";
 8 | 
 9 | interface IProps {
10 |     list: Stylesheet[];
11 |     activeList: string[];
12 |     search: string;
13 |     onSelectionChange: (isActive: boolean, url: string) => unknown;
14 | }
15 | 
16 | export function StylesheetList (props: IProps) {
17 |     const { list, activeList, search, onSelectionChange } = props;
18 | 
19 |     const searchIsEmpty = search.trim().length === 0;
20 |     const searchRegex = new RegExp(search.trim(), "gi");
21 | 
22 |     const stylesheets = list.map((stylesheet: Stylesheet, index: number) => {
23 |         const isSelected = activeList.includes(stylesheet.url);
24 |         const selectionOrder = getSelectionOrder(stylesheet.url, activeList);
25 |         const isFiltered = !searchIsEmpty && stylesheet.name.match(searchRegex) === null;
26 | 
27 |         const handleActiveChange = (isActive: boolean) => {
28 |             return onSelectionChange(isActive, stylesheet.url);
29 |         };
30 | 
31 |         return (
32 |             <StylesheetItem
33 |                 key={index}
34 |                 stylesheet={stylesheet}
35 |                 isSelected={isSelected}
36 |                 selectionOrder={selectionOrder}
37 |                 isHidden={isFiltered}
38 |                 onActiveToggle={handleActiveChange}
39 |             />
40 |         );
41 |     });
42 | 
43 |     const listClassName = getClassName([
44 |         "stylesheets-list",
45 |         activeList.length > maxSelectionCount ? "stylesheets-list--emoji" : "",
46 |     ]);
47 | 
48 |     return <div className={listClassName}>{stylesheets}</div>;
49 | }
50 | 


--------------------------------------------------------------------------------
/src/popup/index.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import ReactDOM from "react-dom/client";
 3 | import { loadStorage } from "../storage";
 4 | import { PopupState } from "../types";
 5 | import { getCurrentTab } from "../utils";
 6 | import Popup from "./Popup";
 7 | 
 8 | async function getInitialPopupState (): Promise<PopupState> {
 9 |     const [ storage, currentTab ] = await Promise.all([
10 |         loadStorage(),
11 |         getCurrentTab()
12 |     ]);
13 | 
14 |     return {
15 |         stylesheets: storage.stylesheets,
16 |         injected: storage.injected,
17 |         config: storage.config,
18 |         tabId: currentTab?.id,
19 |     };
20 | }
21 | 
22 | getInitialPopupState().then((state: PopupState) => {
23 |     ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
24 |         <React.StrictMode>
25 |             <Popup initialState={state} />
26 |         </React.StrictMode>
27 |     );
28 | });
29 | 


--------------------------------------------------------------------------------
/src/storage.ts:
--------------------------------------------------------------------------------
 1 | import { Stylesheet } from "./Stylesheet";
 2 | import { Config, StorageData } from "./types";
 3 | import { env, sortByName } from "./utils";
 4 | 
 5 | export const defaultConfig: Config = { webSocketServerURL: "ws://localhost:35729/livereload" };
 6 | 
 7 | export async function loadStorage (): Promise<StorageData> {
 8 |     const { SuperCSSInject } = await env.storage.local.get("SuperCSSInject");
 9 |     const { stylesheets, injected, config } = SuperCSSInject || {};
10 | 
11 |     return {
12 |         stylesheets: importStylesheets(stylesheets || []),
13 |         injected: injected || {},
14 |         config: config ? { ...defaultConfig, ...config } : {}
15 |     };
16 | }
17 | 
18 | export function updateStorage (data: StorageData): Promise<void> {
19 |     return env.storage.local.set({ SuperCSSInject: data });
20 | }
21 | 
22 | function importStylesheets (stylesheets: Stylesheet[] | string[]): Stylesheet[] {
23 |     return stylesheets.map((stylesheet: Stylesheet | string) => {
24 |         if (typeof stylesheet === "string") {
25 |             return new Stylesheet(stylesheet);
26 |         }
27 | 
28 |         return new Stylesheet(stylesheet.url, stylesheet.shortname);
29 |     }).sort(sortByName);
30 | }
31 | 


--------------------------------------------------------------------------------
/src/types.d.ts:
--------------------------------------------------------------------------------
 1 | export type Tab = chrome.tabs.Tab | undefined;
 2 | export type TabId = number | undefined;
 3 | 
 4 | export interface Config {
 5 |     webSocketServerURL: string;
 6 | }
 7 | 
 8 | export interface InjectedTabs {
 9 |     [id: number]: string[] | undefined;
10 | }
11 | 
12 | export interface StorageData {
13 |     stylesheets: Stylesheet[];
14 |     injected: InjectedTabs;
15 |     config: Config;
16 | }
17 | 
18 | export interface PopupState extends StorageData {
19 |     tabId: TabId;
20 | }
21 | 
22 | export interface MessageData {
23 |     tabId: number;
24 |     urlList: string[];
25 |     webSocketServerURL: string;
26 | }
27 | 
28 | export interface Message extends MessageData {
29 |     action: "inject";
30 | }
31 | 


--------------------------------------------------------------------------------
/src/utils.ts:
--------------------------------------------------------------------------------
  1 | import { Stylesheet } from "./Stylesheet";
  2 | import { loadStorage } from "./storage";
  3 | import { MessageData, Tab } from "./types";
  4 | 
  5 | /**
  6 |  * Alias for accessing the browser extension API.
  7 |  *
  8 |  * Chrome uses `chrome`. Firefox uses `browser`.
  9 |  */
 10 | export const env = chrome || browser;
 11 | 
 12 | /**
 13 |  * Extracts the last portion of the URL, if the last part of the URL
 14 |  * is a filename (eg.: `theme.css`) it will return that as result.
 15 |  *
 16 |  * Example: "http://localhost/my-theme.css" => "my-theme.css"
 17 |  *
 18 |  * @param url A stylesheet URL
 19 |  * @returns The last portion of the URL
 20 |  */
 21 | export function getStylesheetName (url: string) {
 22 |     const urlParts = url.split("/");
 23 | 
 24 |     return urlParts[urlParts.length - 1];
 25 | }
 26 | 
 27 | /**
 28 |  * Sorts URLs by the last part, aka the filename.
 29 |  *
 30 |  * @param stylesheetA Stylesheet
 31 |  * @param stylesheetB Stylesheet
 32 |  * @returns Order between the two strings
 33 |  */
 34 | export function sortByName (stylesheetA: Stylesheet, stylesheetB: Stylesheet) {
 35 |     const nameA = stylesheetA.name.toLowerCase();
 36 |     const nameB = stylesheetB.name.toLowerCase();
 37 | 
 38 |     if (nameA < nameB) {
 39 |         return -1;
 40 |     } else if (nameA > nameB) {
 41 |         return 1;
 42 |     }
 43 | 
 44 |     return 0;
 45 | }
 46 | 
 47 | /**
 48 |  * Get the injected stylesheets for a browser tab
 49 |  *
 50 |  * @returns Object with list of stylesheets active per browser tab
 51 |  */
 52 | // export async function getInjectedStylesheets (tabId: number): Promise<Stylesheet[]> {
 53 | //     const storage = await loadStorage();
 54 | 
 55 | //     return storage.injected[tabId] || [];
 56 | // }
 57 | 
 58 | /**
 59 |  * Tries to get the current active browser tab (if any).
 60 |  * It returns either a Tab object or a undefined result, wrapped in a Promise.
 61 |  *
 62 |  * @returns Tab information wrapped in a Promise
 63 |  */
 64 | export async function getCurrentTab (): Promise<Tab> {
 65 |     const queryOptions = {
 66 |         active: true,
 67 |         currentWindow: true
 68 |     };
 69 | 
 70 |     // `tab` will either be a `tabs.Tab` instance or `undefined`.
 71 |     const [ tab ] = await env.tabs.query(queryOptions);
 72 | 
 73 |     return tab;
 74 | }
 75 | 
 76 | /**
 77 |  * Helper function to create a CSS classes string from an array.
 78 |  *
 79 |  * Example: `["class-a", "class-b"]` => `"class-a class-b"`
 80 |  *
 81 |  * @param classes An array of CSS classes
 82 |  * @returns A string with CSS classes separated by spaces
 83 |  */
 84 | export function getClassName (classes: string[]): string {
 85 |     return classes.join(" ").trim();
 86 | }
 87 | 
 88 | /**
 89 |  * Sets the badge text for the extension icon on a specific browser tab.
 90 |  * Used mainly to highlight the current number of injected Stylesheets on a tab.
 91 |  *
 92 |  * @param tabId Browser tab identifier
 93 |  * @param text The text content for the badge
 94 |  */
 95 | export function updateBadgeText (tabId: number, text: string) {
 96 |     env.action.setBadgeText({
 97 |         tabId: tabId,
 98 |         text: text
 99 |     });
100 | }
101 | 
102 | export function updateBadgeCount (injected: string[], tabId: number) {
103 |     if (injected && injected.length > 0) {
104 |         console.log("Update count in Tab:", tabId);
105 |         updateBadgeText(tabId, injected.length.toString());
106 |     } else {
107 |         console.log("Clear count in Tab:", tabId);
108 |         updateBadgeText(tabId, "");
109 |     }
110 | }
111 | 
112 | export async function updateBadgesCount () {
113 |     const { injected } = await loadStorage();
114 |     const tabs: chrome.tabs.Tab[] = await env.tabs.query({});
115 | 
116 |     for (const tab of tabs) {
117 |         const tabId = tab.id;
118 | 
119 |         if (tabId) {
120 |             updateBadgeCount(injected[tabId] || [], tabId);
121 |         }
122 |     }
123 | }
124 | 
125 | /**
126 |  * Validates an URL.
127 |  *
128 |  * @param url The URL string to validate
129 |  * @returns true or false
130 |  */
131 | export function validateURL (url: string): boolean {
132 |     try {
133 |         new URL(url);
134 |     } catch (error) {
135 |         return false;
136 |     }
137 | 
138 |     return true;
139 | }
140 | 
141 | /**
142 |  * Validates an WebSocket URL.
143 |  *
144 |  * @param url The URL string to validate
145 |  * @returns true or false
146 |  */
147 | export function validateWebSocketURL (url: string): boolean {
148 |     return url.match(/^ws:\/\/|wss:\/\//) !== null;
149 | }
150 | 
151 | /**
152 |  * Max number of selected stylesheets in a single browser tab.
153 |  * This is only for the purpose of displaying the selection order in the popup.
154 |  * If you're injecting 10 or more stylesheets at once,
155 |  * you probably need to re-think something.
156 |  */
157 | export const maxSelectionCount = 9;
158 | 
159 | /**
160 |  * Get the selection order of a stylesheet URL when there's more than
161 |  * one stylesheet selected in a browser tab.
162 |  *
163 |  * @param url The current stylesheet URL
164 |  * @param selectedList A Set of the selected stylesheets for the current browser tab
165 |  * @returns A string with the order or null if there's only a single tab selected
166 |  */
167 | export function getSelectionOrder (url: string, selectedList: string[]) {
168 |     if (selectedList.includes(url) && selectedList.length > 1) {
169 |         // I mean...
170 |         if (selectedList.length > maxSelectionCount) {
171 |             return "🤔";
172 |         }
173 | 
174 |         const order = [ ...selectedList ].indexOf(url) + 1;
175 | 
176 |         return `#${order}`;
177 |     }
178 | 
179 |     return null;
180 | }
181 | 
182 | /**
183 |  * Sends an "inject" message to a browser tab with a list of stylesheet URLs.
184 |  * Sent by: Background Worker
185 |  *
186 |  * @param tabId Browser tab identifier
187 |  * @param urlList List of stylesheet URLs
188 |  * @returns Promise
189 |  */
190 | export function sendInjectMessageToTab (data: MessageData) {
191 |     return env.tabs.sendMessage(data.tabId, { action: "inject", ...data });
192 | }
193 | 
194 | export function cond<A,B> (cond: boolean, trueValue: A, falseValue: B) {
195 |     return cond ? trueValue : falseValue;
196 | }
197 | 
198 | export function assign<T> (obj: T, key: string, value: unknown) {
199 |     return { ...obj, [key]: value };
200 | }
201 | 


--------------------------------------------------------------------------------
/src/worker/background.ts:
--------------------------------------------------------------------------------
 1 | import { loadStorage, updateStorage } from "../storage";
 2 | import { TabId } from "../types";
 3 | import { env, sendInjectMessageToTab, updateBadgeCount } from "../utils";
 4 | 
 5 | async function onPageLoad (tabId: number) {
 6 |     const storage = await loadStorage();
 7 |     const injected = storage.injected[tabId] || [];
 8 | 
 9 |     sendInjectMessageToTab({
10 |         tabId: tabId,
11 |         urlList: injected,
12 |         webSocketServerURL: storage.config.webSocketServerURL
13 |     });
14 |     updateBadgeCount(injected, tabId);
15 | }
16 | 
17 | env.runtime.onMessage.addListener((message, sender) => {
18 |     const tabId: TabId = message.tabId || sender.tab?.id;
19 | 
20 |     console.log("Message: ", message);
21 | 
22 |     if (message.action === "load" && tabId) {
23 |         onPageLoad(tabId);
24 |     }
25 | });
26 | 
27 | env.tabs.onRemoved.addListener(async (tabId) => {
28 |     const storage = await loadStorage();
29 |     const hasTab = storage.injected[tabId] !== undefined;
30 | 
31 |     if (hasTab) {
32 |         delete storage.injected[tabId];
33 |         updateStorage(storage);
34 |         console.log("Tab closed:", tabId);
35 |     }
36 | });
37 | 
38 | 
39 | // This is just to make the TS compiler happy
40 | export { };
41 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "ESNext",
 4 |     "lib": [
 5 |       "DOM",
 6 |       "DOM.Iterable",
 7 |       "ESNext"
 8 |     ],
 9 |     "allowJs": false,
10 |     "allowSyntheticDefaultImports": true,
11 |     "esModuleInterop": true,
12 |     "forceConsistentCasingInFileNames": true,
13 |     "isolatedModules": true,
14 |     "jsx": "react-jsx",
15 |     "module": "ESNext",
16 |     "moduleResolution": "Node",
17 |     "noFallthroughCasesInSwitch": true,
18 |     "resolveJsonModule": true,
19 |     "skipLibCheck": true,
20 |     "rootDir": "./src",
21 |     "outDir": "./dist/js",
22 |     "strict": true,
23 |   },
24 |   "include": [
25 |     "src"
26 |   ],
27 | }
28 | 


--------------------------------------------------------------------------------
/webpack.common.js:
--------------------------------------------------------------------------------
 1 | /* eslint-disable @typescript-eslint/no-var-requires */
 2 | 
 3 | const path = require("path");
 4 | 
 5 | module.exports = {
 6 |     entry: {
 7 |         background: path.join(__dirname, "src/worker/background.ts"),
 8 |         options: path.join(__dirname, "src/options/index.tsx"),
 9 |         popup: path.join(__dirname, "src/popup/index.tsx"),
10 |         SuperCSSInject: path.join(__dirname, "src/SuperCSSInject.ts"),
11 |     },
12 |     output: {
13 |         path: path.join(__dirname, "dist/js"),
14 |         filename: "[name].js",
15 |     },
16 |     module: {
17 |         rules: [
18 |             {
19 |                 exclude: /node_modules/,
20 |                 test: /\.tsx?$/,
21 |                 use: "ts-loader",
22 |             },
23 |             {
24 |                 test: /\.css$/,
25 |                 use: ["css-loader"],
26 |             },
27 |         ],
28 |     },
29 |     // Setup @src path resolution for TypeScript files
30 |     resolve: {
31 |         extensions: [".ts", ".tsx", ".js"],
32 |         alias: {
33 |             "@src": path.resolve(__dirname, "src/"),
34 |         },
35 |     },
36 | };
37 | 


--------------------------------------------------------------------------------
/webpack.dev.js:
--------------------------------------------------------------------------------
 1 | /* eslint-disable @typescript-eslint/no-var-requires */
 2 | 
 3 | const { merge } = require("webpack-merge");
 4 | const common = require("./webpack.common.js");
 5 | 
 6 | module.exports = merge(common, {
 7 |     mode: "development",
 8 |     devtool: "inline-source-map",
 9 | });
10 | 


--------------------------------------------------------------------------------
/webpack.prod.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable @typescript-eslint/no-var-requires */
2 | 
3 | const { merge } = require("webpack-merge");
4 | const common = require("./webpack.common.js");
5 | 
6 | module.exports = merge(common, {
7 |     mode: "production",
8 | });
9 | 


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