├── .gitignore
├── .vscode
    └── settings.json
├── README.md
├── babel.config.js
├── manifest.base.js
├── package-lock.json
├── package.json
├── src
    ├── @types
    │   ├── global.d.ts
    │   └── svg.d.ts
    ├── background
    │   ├── index.ts
    │   ├── manageTablock.ts
    │   ├── onInstall.ts
    │   └── retitle.ts
    ├── options
    │   ├── AdvancedSettings.tsx
    │   ├── ContextMenuSwitch.tsx
    │   ├── Footer.tsx
    │   ├── Header.tsx
    │   ├── Home.tsx
    │   ├── KeyboardShortcutSettings.tsx
    │   ├── OptionsApp.tsx
    │   ├── RegexPopup.tsx
    │   ├── SavedTitles.tsx
    │   ├── UserSettings.tsx
    │   └── index.tsx
    ├── popup
    │   ├── BookmarkTitle.tsx
    │   ├── ContentScriptChecker.tsx
    │   ├── CurrentTitle.tsx
    │   ├── Form.tsx
    │   ├── Gear.tsx
    │   ├── PopupApp.tsx
    │   ├── Revert.tsx
    │   └── index.tsx
    └── shared
    │   ├── AccessibleButton.tsx
    │   ├── ReTitleThemeWrapper.tsx
    │   ├── RegexInput.tsx
    │   ├── RegexInputGroup.tsx
    │   ├── injectedScripts.ts
    │   ├── storageHandler.ts
    │   ├── storageUtils.ts
    │   ├── types.ts
    │   └── utils.ts
├── static
    ├── icons
    │   ├── icon128.png
    │   ├── icon16.png
    │   ├── icon256.png
    │   ├── icon32.png
    │   ├── icon512.png
    │   └── icon64.png
    ├── options.html
    ├── popup.html
    └── svgs
    │   ├── chrome.svg
    │   ├── firefox.svg
    │   ├── gear.svg
    │   ├── github.svg
    │   └── pencil.svg
├── tsconfig.json
└── webpack.config.js


/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | dist_chrome
4 | dist_firefox
5 | zip


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 |   "editor.defaultFormatter": "esbenp.prettier-vscode",
3 |   "editor.formatOnSave": true,
4 |   "editor.formatOnPaste": true,
5 |   "typescript.tsdk": "node_modules/typescript/lib"
6 | }
7 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # ReTitle: Chrome and Firefox Extension for Renaming Tabs Easily
 2 | 
 3 | ## ⚠️ This is the V2 branch that's not released yet as it is still being developed.
 4 | 
 5 | Please check the master branch for the currently released version.
 6 | 
 7 | ### Get ReTitle on Chrome
 8 | 
 9 | https://chrome.google.com/webstore/detail/tab-retitle/hilgambgdpjgljhjdaccadahckpdiapo
10 | 
11 | ### Get ReTitle on Firefox
12 | 
13 | https://addons.mozilla.org/en-US/firefox/addon/tab-retitle/
14 | 
15 | #### Develop
16 | 
17 | 1. Fork and clone this repo.
18 | 1. `npm i`
19 | 1. `npm run dev`
20 | 1. Load the folder created by webpack `dist_chrome` or `dist_firefox` on your browser (unpacked).
21 | 
22 | #### Build
23 | 
24 | 1. `npm ci`
25 | 1. `npm run build`
26 | 
27 | #### Deploy
28 | 
29 | 1. Publish the files created in `zip`, `ReTitle-<vesion>.chrome.zip` and `ReTitle-<vesion>.firefox.zip` to the respective extension stores.
30 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = function (api) {
 2 |   api.cache(true);
 3 | 
 4 |   return {
 5 |     presets: [
 6 |       [
 7 |         '@babel/env',
 8 |         {
 9 |           targets: 'last 5 chrome version, last 5 firefox version',
10 |         },
11 |       ],
12 |       [
13 |         '@babel/preset-react',
14 |         {
15 |           pragma: 'h',
16 |           pragmaFrag: 'Fragment',
17 |         },
18 |       ],
19 |       [
20 |         '@babel/preset-typescript',
21 |         {
22 |           allExtensions: true,
23 |           isTSX: true,
24 |           jsxPragma: 'h',
25 |         },
26 |       ],
27 |     ],
28 |     plugins: ['@babel/plugin-proposal-class-properties'],
29 |   };
30 | };
31 | 


--------------------------------------------------------------------------------
/manifest.base.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   manifest_version: 2,
 3 | 
 4 |   name: 'Tab ReTitle',
 5 |   short_name: 'ReTitle',
 6 |   description: 'Change tab titles easily!',
 7 |   author: 'Lazyuki',
 8 |   homepage_url: 'https://github.com/Lazyuki/ReTitle',
 9 |   browser_action: {
10 |     default_icon: './icons/icon256.png',
11 |     default_popup: 'popup.html',
12 |   },
13 |   icons: {
14 |     16: './icons/icon16.png',
15 |     32: './icons/icon32.png',
16 |     64: './icons/icon64.png',
17 |     128: './icons/icon128.png',
18 |     256: './icons/icon256.png',
19 |   },
20 |   background: {
21 |     scripts: ['background.js'],
22 |   },
23 |   options_ui: {
24 |     page: 'options.html',
25 |     chrome_style: false,
26 |     open_in_tab: true,
27 |   },
28 |   commands: {
29 |     _execute_browser_action: {
30 |       suggested_key: {
31 |         default: 'Alt+Shift+X',
32 |         mac: 'Alt+Shift+X',
33 |         linux: 'Alt+Shift+X',
34 |       },
35 |       description: 'Set new title',
36 |     },
37 |   },
38 |   // contextMenus cannot be optional on Firefox
39 |   // <all_urls> is needed to make sure background tabs could be retitled out of focus
40 |   permissions: ['activeTab', 'tabs', 'storage', '<all_urls>', 'contextMenus'],
41 |   optional_permissions: ['bookmarks'],
42 | };
43 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "retitle",
 3 |   "version": "2.0.0",
 4 |   "description": "Change tab titles easily!",
 5 |   "author": "Lazyuki",
 6 |   "license": "MIT",
 7 |   "private": true,
 8 |   "bugs": {
 9 |     "url": "https://github.com/Lazyuki/ReTitle/issues"
10 |   },
11 |   "homepage": "https://github.com/Lazyuki/ReTitle#readme",
12 |   "repository": {
13 |     "type": "git",
14 |     "url": "git+https://github.com/Lazyuki/ReTitle.git"
15 |   },
16 |   "scripts": {
17 |     "lint": "eslint src",
18 |     "preinstall": "npx npm-force-resolutions",
19 |     "dev": "npm-run-all --parallel dev:chrome dev:firefox",
20 |     "dev:chrome": "webpack --watch --env.BROWSER=chrome ",
21 |     "dev:firefox": "webpack --watch --env.BROWSER=firefox ",
22 |     "clean": "rimraf dist*",
23 |     "prebuild": "npm run clean",
24 |     "build": "npm-run-all --parallel build:chrome build:firefox",
25 |     "build:chrome": "webpack --env.NODE_ENV=production --env.BROWSER=chrome",
26 |     "build:firefox": "webpack --env.NODE_ENV=production --env.BROWSER=firefox"
27 |   },
28 |   "dependencies": {
29 |     "@material-ui/core": "^4.11.0",
30 |     "@material-ui/icons": "^4.9.1",
31 |     "clsx": "^1.1.1",
32 |     "preact": "10.4.7",
33 |     "react-redux": "^7.2.1",
34 |     "redux": "^4.0.5",
35 |     "redux-thunk": "^2.3.0"
36 |   },
37 |   "devDependencies": {
38 |     "@babel/core": "^7.11.6",
39 |     "@babel/preset-env": "^7.11.5",
40 |     "@babel/preset-react": "^7.10.4",
41 |     "@babel/preset-typescript": "^7.10.4",
42 |     "@types/chrome": "^0.0.133",
43 |     "@types/firefox-webext-browser": "^82.0.0",
44 |     "@types/react-redux": "^7.1.9",
45 |     "babel-loader": "^8.1.0",
46 |     "copy-webpack-plugin": "^5.1.2",
47 |     "eslint": "^7.11.0",
48 |     "husky": "^4.3.0",
49 |     "npm-run-all": "^4.1.5",
50 |     "preact-svg-loader": "^0.2.1",
51 |     "prettier": "^2.1.2",
52 |     "pretty-quick": "^2.0.2",
53 |     "rimraf": "^3.0.2",
54 |     "ts-loader": "^7.0.5",
55 |     "typescript": "^3.9.7",
56 |     "webpack": "^4.44.2",
57 |     "webpack-cli": "^3.3.12",
58 |     "webpack-extension-manifest-plugin": "^0.5.0",
59 |     "zip-webpack-plugin": "^3.0.0"
60 |   },
61 |   "husky": {
62 |     "hooks": {
63 |       "pre-commit": "pretty-quick --staged"
64 |     }
65 |   },
66 |   "prettier": {
67 |     "singleQuote": true
68 |   },
69 |   "resolutions": {
70 |     "acorn": "8.0.1"
71 |   }
72 | }
73 | 


--------------------------------------------------------------------------------
/src/@types/global.d.ts:
--------------------------------------------------------------------------------
1 | // Replaced during Webpack build process
2 | declare var BROWSER: 'chrome' | 'firefox';
3 | declare var EXTENSION_VERSION: string;
4 | 


--------------------------------------------------------------------------------
/src/@types/svg.d.ts:
--------------------------------------------------------------------------------
1 | declare module '*.svg' {
2 |   const value: any;
3 |   export default value;
4 | }
5 | 


--------------------------------------------------------------------------------
/src/background/index.ts:
--------------------------------------------------------------------------------
 1 | // Core functionalities
 2 | import './onInstall';
 3 | import './manageTablock';
 4 | import './retitle';
 5 | 
 6 | import { injectTitle } from '../shared/injectedScripts';
 7 | import { getContextMenuOption } from '../shared/storageHandler';
 8 | import { createContextMenu } from '../shared/utils';
 9 | 
10 | // Simple context menu
11 | chrome.contextMenus.onClicked.addListener(function (info, tab) {
12 |   chrome.tabs.executeScript({
13 |     code: `tempTitle = prompt("Enter a temporary title", window.getSelection().toString()); \
14 |        ${injectTitle.toString()}; tempTitle !== null && injectTitle(tempTitle, 'onetime');`,
15 |   });
16 | });
17 | 
18 | // Add context menu if option is set
19 | getContextMenuOption().then((enableContextMenu) => {
20 |   if (enableContextMenu) {
21 |     createContextMenu();
22 |   }
23 | });
24 | 


--------------------------------------------------------------------------------
/src/background/manageTablock.ts:
--------------------------------------------------------------------------------
  1 | import { PREFIX_TABLOCK } from '../shared/utils';
  2 | import {
  3 |   setLocalItems,
  4 |   getAllLocalItems,
  5 |   setLocalItem,
  6 |   removeLocalItems,
  7 | } from '../shared/storageUtils';
  8 | 
  9 | const isChrome = BROWSER === 'chrome';
 10 | 
 11 | interface TablockCache {
 12 |   tabId: number;
 13 |   windowId: number;
 14 |   index: number;
 15 |   title: string;
 16 |   url?: string;
 17 | }
 18 | interface TablockCaches {
 19 |   [tabId: number]: TablockCache;
 20 | }
 21 | 
 22 | // Map tab position to IDs so that Tablock persists through sessions.
 23 | const tablockCaches: TablockCaches = {};
 24 | const previousTablockCaches: TablockCache[] = [];
 25 | let previousCrashed = false;
 26 | 
 27 | const debounce = <T extends any[]>(func: (...args: T) => any, wait = 250) => {
 28 |   let timer: any;
 29 |   return (...args: T) => {
 30 |     clearTimeout(timer);
 31 |     timer = setTimeout(() => func(...args), wait);
 32 |   };
 33 | };
 34 | 
 35 | function _recalculateTabPositionToId(windowId: number) {
 36 |   const tabIds = Object.keys(tablockCaches).map(parseInt);
 37 |   chrome.tabs.query({ windowId }, function (tabs) {
 38 |     tabs.forEach((tab) => {
 39 |       const { index, id: tabId, url } = tab;
 40 |       if (!tabId) return;
 41 |       if (tabIds.includes(tabId)) {
 42 |         const prev = tablockCaches[tabId];
 43 |         tablockCaches[tabId] = {
 44 |           tabId,
 45 |           windowId,
 46 |           index,
 47 |           url,
 48 |           title: prev.title,
 49 |         };
 50 |       }
 51 |     });
 52 |     // use local storage since it should not be synced
 53 |     setLocalItems({
 54 |       tablockCaches,
 55 |     });
 56 |   });
 57 | }
 58 | 
 59 | const recalculateTabPositionToId = debounce(
 60 |   (windowId: number) => _recalculateTabPositionToId(windowId),
 61 |   200
 62 | );
 63 | 
 64 | // Restore stored tablocks if possible
 65 | chrome.windows.onCreated.addListener(function (window) {
 66 |   if (window.type !== 'normal') return;
 67 |   window.tabs?.forEach((tab) => {
 68 |     if (tab.id === undefined || tab.id in tablockCaches) return;
 69 |     const matchedTab = previousTablockCaches.find(
 70 |       (t) => t.url === tab.url && t.index === tab.index
 71 |     );
 72 |     if (!matchedTab) return;
 73 |     const obj = {
 74 |       ...matchedTab,
 75 |       windowId: window.id,
 76 |     };
 77 |     setLocalItem(`${PREFIX_TABLOCK}${tab.id}`, obj);
 78 |     tablockCaches[tab.id] = obj;
 79 |   });
 80 | });
 81 | 
 82 | chrome.tabs.onCreated.addListener(function (tab) {
 83 |   recalculateTabPositionToId(tab.windowId);
 84 | });
 85 | 
 86 | // When closing a tab, clean up tab lock titles
 87 | chrome.tabs.onRemoved.addListener(function (tabId, info) {
 88 |   // Do not delete Tablock info when the window is closing.
 89 |   if (!info.isWindowClosing) {
 90 |     recalculateTabPositionToId(info.windowId);
 91 |     removeLocalItems(`${PREFIX_TABLOCK}${tabId}`);
 92 |   }
 93 | });
 94 | 
 95 | // Keep track of tab position to tabID
 96 | chrome.tabs.onMoved.addListener(function (tabId, info) {
 97 |   const windowId = info.windowId;
 98 |   // no need for debounce
 99 |   _recalculateTabPositionToId(windowId);
100 | });
101 | 
102 | chrome.tabs.onDetached.addListener(function (tabId, info) {
103 |   const windowId = info.oldWindowId;
104 |   // no need for debounce
105 |   _recalculateTabPositionToId(windowId);
106 | });
107 | chrome.tabs.onAttached.addListener(function (tabId, info) {
108 |   const windowId = info.newWindowId;
109 |   // no need for debounce
110 |   _recalculateTabPositionToId(windowId);
111 | });
112 | 
113 | chrome.tabs.onUpdated.addListener(function (tabId, info, tab) {
114 |   if (tabId in tablockCaches) {
115 |     tablockCaches[tabId] = {
116 |       tabId,
117 |       windowId: tab.windowId,
118 |       index: tab.index,
119 |       title: tab.title || '',
120 |       url: tab.url,
121 |     };
122 |   }
123 | });
124 | 
125 | // Get tablock caches when extension startsup
126 | chrome.runtime.onStartup.addListener(function () {
127 |   // tablock caches are stored locally
128 |   getAllLocalItems().then(function (items) {
129 |     const hasCrashed = items['crash'] as boolean | undefined;
130 |     const tlc = items['tablockCaches'] as Record<string, TablockCache>;
131 |     Object.keys(tlc).forEach((tabId) => {
132 |       previousTablockCaches.push({
133 |         ...tlc[tabId],
134 |       });
135 |     });
136 |     previousCrashed = hasCrashed || false;
137 |     setLocalItem('crash', true);
138 |   });
139 |   getAllLocalItems().then(function (items) {
140 |     // Clean up residual Tablock keys stored in storage, since we fill those up through cache
141 |     Object.keys(items).forEach((itemKey) => {
142 |       if (itemKey.startsWith(PREFIX_TABLOCK)) {
143 |         removeLocalItems(itemKey);
144 |       }
145 |     });
146 |   });
147 | });
148 | 
149 | if (isChrome) {
150 |   // Indicate that all states are saved successfully
151 |   chrome.runtime.onSuspend.addListener(function () {
152 |     removeLocalItems('crash');
153 |   });
154 | 
155 |   // // Flag that won't be cleaned if crashed
156 |   chrome.runtime.onSuspendCanceled.addListener(function () {
157 |     setLocalItem('crash', true);
158 |   });
159 | }
160 | 


--------------------------------------------------------------------------------
/src/background/onInstall.ts:
--------------------------------------------------------------------------------
 1 | import { TabOption } from '../shared/types';
 2 | import { KEY_DEFAULT_TAB_OPTION, PREFIX_REGEX } from '../shared/utils';
 3 | import {
 4 |   getAllSyncItems,
 5 |   removeSyncItems,
 6 |   setSyncItem,
 7 |   setLocalItem,
 8 | } from '../shared/storageUtils';
 9 | import { setDefaultOption } from '../shared/storageHandler';
10 | 
11 | // On Extension Update
12 | interface LegacyUserOptionsSchema {
13 |   options: { [key in TabOption]: boolean };
14 | }
15 | type LegacyStorageSchema = {
16 |   [key: string]: { title: string };
17 | } & LegacyUserOptionsSchema;
18 | 
19 | // UPDATE PREVIOUSLY STORED TITLES ON EXTENSION UPDATE
20 | chrome.runtime.onInstalled.addListener((details) => {
21 |   const prev = details.previousVersion;
22 |   // Upgrading from v0 or v1
23 |   if (prev && (prev.startsWith('0.') || prev.startsWith('1.'))) {
24 |     getAllSyncItems().then((items) => {
25 |       const storage = items as LegacyStorageSchema;
26 |       for (const key in storage) {
27 |         // v0 tab lock mistake.
28 |         if (key.startsWith('#')) {
29 |           removeSyncItems(key);
30 |           continue;
31 |         }
32 |         // v1 options key
33 |         if (key === 'options') {
34 |           const options = storage.options;
35 |           let option: TabOption = 'onetime';
36 |           if (options.domain) option = 'domain';
37 |           if (options.tablock) option = 'tablock';
38 |           if (options.exact) option = 'exact';
39 |           setDefaultOption(option);
40 |           removeSyncItems(key);
41 |           continue;
42 |         }
43 |         const item = storage[key];
44 |         // v1 regex URL matcher
45 |         if (key.startsWith('Tab#')) {
46 |           removeSyncItems(key); // TabLocks shouldn't be stored in sync anymore
47 |           setLocalItem(key, item);
48 |         }
49 |         if (key.startsWith('*') && key.endsWith('*')) {
50 |           removeSyncItems(key);
51 |           setSyncItem(PREFIX_REGEX, item);
52 |         }
53 |       }
54 |     });
55 |   }
56 | });
57 | 


--------------------------------------------------------------------------------
/src/background/retitle.ts:
--------------------------------------------------------------------------------
  1 | import { injectTitle, revertRetitle } from '../shared/injectedScripts';
  2 | 
  3 | import { storageChangeHandler } from '../shared/storageHandler';
  4 | import {
  5 |   TabLockTitle,
  6 |   ExactTitle,
  7 |   DomainTitle,
  8 |   RegexTitle,
  9 |   TabOption,
 10 |   RuntimeMessageRequest,
 11 |   NewTitle,
 12 |   StorageAction,
 13 |   StoredTitle,
 14 | } from '../shared/types';
 15 | 
 16 | function escapeRegExp(str: string) {
 17 |   return str.replace(/[.*+\-?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
 18 | }
 19 | 
 20 | let tablocks: TabLockTitle[] = [];
 21 | let exacts: ExactTitle[] = [];
 22 | let domains: DomainTitle[] = [];
 23 | let regexes: RegexTitle[] = [];
 24 | 
 25 | const cache: string[] = []; // To avoid eventListener reacting to its own change
 26 | let wait = false;
 27 | const waitList: (() => void)[] = []; // for each tab?
 28 | 
 29 | function executeNext() {
 30 |   wait = false;
 31 |   if (waitList.length) {
 32 |     waitList.shift()?.();
 33 |   }
 34 | }
 35 | 
 36 | // Update the tab title
 37 | function insertTitle(tabId: number, newTitle: string, option: TabOption) {
 38 |   function execute() {
 39 |     wait = true;
 40 |     cache.push(newTitle);
 41 |     //if (recursionStopper.shouldStop(tabId)) return;
 42 |     console.log('Changing the title to ' + newTitle);
 43 |     const escapedTitle = newTitle.replace(/'/g, "\\'");
 44 |     const code = `${injectTitle.toString()}; injectTitle('${escapedTitle}', '${option}');`;
 45 |     chrome.tabs.executeScript(
 46 |       tabId,
 47 |       {
 48 |         code,
 49 |         runAt: 'document_end',
 50 |       },
 51 |       executeNext
 52 |     );
 53 |   }
 54 | 
 55 |   if (wait) {
 56 |     waitList.push(execute);
 57 |   } else {
 58 |     execute();
 59 |   }
 60 | }
 61 | 
 62 | // Returns a title specified by regex
 63 | async function decodeTitle(
 64 |   oldTitle: string,
 65 |   newTitle: NewTitle,
 66 |   tabId: number,
 67 |   url: string | null = null,
 68 |   urlPattern: RegExp | null = null
 69 | ): Promise<string> {
 70 |   if (typeof newTitle === 'object') {
 71 |     if (newTitle.replacerType === 'function') {
 72 |       const code = newTitle.func;
 73 |       return new Promise((resolve, reject) => {
 74 |         chrome.tabs.executeScript(
 75 |           tabId,
 76 |           {
 77 |             code,
 78 |             runAt: 'document_end',
 79 |           },
 80 |           (results: string[]) => {
 81 |             resolve(results[0]);
 82 |           }
 83 |         );
 84 |       });
 85 |     } else {
 86 |       const pattern = newTitle.captureRegex;
 87 |       const replacement = newTitle.titleRegex;
 88 |       const flags = newTitle.flags;
 89 |       newTitle = oldTitle.replace(new RegExp(pattern, flags), replacement);
 90 |     }
 91 |     return '';
 92 |   } else if (newTitle.includes('$0')) {
 93 |     // // Make sure it doesn't use the cached old title and as an original title.
 94 |     // const newTitleRegex = new RegExp(
 95 |     //   escapeRegExp(newTitle.replace('$0', 'RETITLE_ORIGINAL_TITLE')).replace(
 96 |     //     'RETITLE_ORIGINAL_TITLE',
 97 |     //     '(.+)'
 98 |     //   )
 99 |     // );
100 |     // const match = newTitleRegex.exec(oldTitle);
101 |     // if (match) {
102 |     //   oldTitle = match[1];
103 |     // }
104 |     // newTitle = newTitle.replace('$0', oldTitle).replace(/\\/g, ''); // the first $0 turns into the previous title
105 |   }
106 |   if (url && urlPattern) {
107 |     newTitle = newTitle.replace(/\$\{([0-9])\}/g, '$$$1');
108 |     newTitle = url.replace(urlPattern, newTitle);
109 |   }
110 |   console.log(`New title decoded for ${oldTitle} is: ${newTitle}`);
111 |   return newTitle;
112 | }
113 | 
114 | const URL_PARAMS_REGEX = /(\?.*$|#.*$)/g;
115 | 
116 | function compareURLs(url1: string, url2: string, ignoreParams?: boolean) {
117 |   if (ignoreParams) {
118 |     url1 = url1.replace(URL_PARAMS_REGEX, '');
119 |     url2 = url2.replace(URL_PARAMS_REGEX, '');
120 |   }
121 |   if (url1.endsWith('/')) url1 = url1.slice(0, url1.length - 2);
122 |   if (url2.endsWith('/')) url2 = url2.slice(0, url2.length - 2);
123 |   return url1 === url2;
124 | }
125 | function compareDomains(url: string, domain: string, useFull?: boolean) {
126 |   if (useFull) {
127 |     url = url.replace(URL_PARAMS_REGEX, '');
128 |     url = url.replace(URL_PARAMS_REGEX, '');
129 |   }
130 |   return url === domain;
131 | }
132 | 
133 | // Listens for tab title changes, and update them if necessary.
134 | chrome.tabs.onUpdated.addListener(function (tabId, info, tab) {
135 |   if (info.title) {
136 |     const infoTitle = info.title;
137 |     let url = tab.url || '';
138 |     let index = cache.indexOf(infoTitle);
139 |     if (index > -1) {
140 |       // TODO: detect titles with $0
141 |       cache.splice(index, 1);
142 |       return; // I'm the one who changed the title to this
143 |     }
144 |     console.log(infoTitle);
145 |     if (!infoTitle) return;
146 |     (async () => {
147 |       for (const tabTitle of tablocks) {
148 |         if (tabTitle.tabId === tabId) {
149 |           insertTitle(
150 |             tabId,
151 |             await decodeTitle(infoTitle, tabTitle.newTitle!, tabId),
152 |             tabTitle.option
153 |           );
154 |           return;
155 |         }
156 |       }
157 |       for (const exactTitle of exacts) {
158 |         if (compareURLs(url, exactTitle.url, exactTitle.ignoreParams)) {
159 |           insertTitle(
160 |             tabId,
161 |             await decodeTitle(infoTitle, exactTitle.newTitle!, tabId),
162 |             exactTitle.option
163 |           );
164 |           return;
165 |         }
166 |       }
167 |       for (const domainTitle of domains) {
168 |         if (compareDomains(url, domainTitle.domain, true)) {
169 |           insertTitle(
170 |             tabId,
171 |             await decodeTitle(infoTitle, domainTitle.newTitle!, tabId),
172 |             domainTitle.option
173 |           );
174 |           return;
175 |         }
176 |       }
177 |       for (const regexTitle of regexes) {
178 |         const pattern = regexTitle.urlPattern;
179 |         try {
180 |           const urlPattern = new RegExp(pattern);
181 |           if (urlPattern.test(url)) {
182 |             insertTitle(
183 |               tabId,
184 |               await decodeTitle(
185 |                 infoTitle,
186 |                 regexTitle.newTitle!,
187 |                 tabId,
188 |                 url,
189 |                 urlPattern
190 |               ),
191 |               regexTitle.option
192 |             );
193 |           }
194 |         } catch (e) {
195 |           console.log(e);
196 |         }
197 |       }
198 |     })();
199 |   }
200 | });
201 | 
202 | const generateActionHandler = <T extends StoredTitle>(
203 |   state: T[],
204 |   equals: (t1: T, t2: T) => boolean
205 | ) => (action: StorageAction, newTitle: T) => {
206 |   switch (action) {
207 |     case 'add':
208 |       state.push(newTitle);
209 |       break;
210 |     case 'edit': {
211 |       const index = state.findIndex((t) => equals(t, newTitle));
212 |       if (index >= 0) {
213 |         state[index] = newTitle;
214 |       }
215 |     }
216 |     case 'remove': {
217 |       const index = state.findIndex((t) => equals(t, newTitle));
218 |       if (index >= 0) {
219 |         state.splice(index, 1);
220 |       }
221 |     }
222 |   }
223 | };
224 | 
225 | const onTablockChange = generateActionHandler(
226 |   tablocks,
227 |   (t1, t2) => t1.tabId === t2.tabId
228 | );
229 | const onExactChange = generateActionHandler(
230 |   exacts,
231 |   (t1, t2) => t1.url === t2.url
232 | );
233 | const onDomainChange = generateActionHandler(
234 |   domains,
235 |   (t1, t2) => t1.domain === t2.domain
236 | );
237 | const onRegexChange = generateActionHandler(
238 |   regexes,
239 |   (t1, t2) => t1.urlPattern === t2.urlPattern
240 | );
241 | 
242 | chrome.storage.onChanged.addListener(
243 |   storageChangeHandler({
244 |     onTablockChange,
245 |     onExactChange,
246 |     onDomainChange,
247 |     onRegexChange,
248 |   })
249 | );
250 | 
251 | function revertTitle(tabId: number) {
252 |   chrome.tabs.executeScript(tabId, {
253 |     code: `${revertRetitle.toString()}; revertRetitle();`,
254 |     runAt: 'document_end',
255 |   });
256 | }
257 | 
258 | // Receives rename message from popup.js
259 | chrome.runtime.onMessage.addListener(function (request: RuntimeMessageRequest) {
260 |   console.log(request);
261 |   if (request.type === 'rename') {
262 |     (async () => {
263 |       insertTitle(
264 |         request.tabId,
265 |         await decodeTitle(request.oldTitle, request.newTitle, 3),
266 |         request.option
267 |       );
268 |     })();
269 |   } else if (request.type === 'revert') {
270 |     revertTitle(request.tabId);
271 |   }
272 | });
273 | 


--------------------------------------------------------------------------------
/src/options/AdvancedSettings.tsx:
--------------------------------------------------------------------------------
  1 | import { h } from 'preact';
  2 | 
  3 | const AdvancedSettings = () => {
  4 |   return (
  5 |     <div id="advancedOptions" class="col s12">
  6 |       <ul class="collapsible">
  7 |         <li>
  8 |           <div class="collapsible-header">Beta Feature: Regex Replacement</div>
  9 |           <div class="collapsible-body">
 10 |             <span>
 11 |               <h6>This feature may not work as expected!</h6>
 12 |               <br />
 13 |               There's a beta feature that lets you replace titles using regex.
 14 |               If you do not know what regex is, I don't recommend using this
 15 |               feature.
 16 |               <br />
 17 |               The syntax is <br />
 18 |               <code>/regex/replacement/flags</code>
 19 |               <br />
 20 |               Notice that there are three forward slashes, so if you want to use
 21 |               a slash in regex or replacement, you need to escape it with a
 22 |               backward slash <code>\</code>.<br />
 23 |               In replacement, you can use regex's captured groups with
 24 |               <code>$1</code>, <code>$2</code> and so on.
 25 |               <br />
 26 |               Possible flags are "g" for global, and "i" for ignore case. Do not
 27 |               forget the last slash if not using any flags.
 28 |               <br />
 29 |               Examples:
 30 |               <br />
 31 |               <code>/.*/Lazy/</code> is the same as just setting the title to
 32 |               "Lazy".
 33 |               <br />
 34 |               <code>/(.*)/LAZ $1/</code> will replace "old title" to "LAZ old
 35 |               title".
 36 |               <br />
 37 |               <code>/(.*)/r\/$1/</code> will replace "Lazy" to "r/Lazy".
 38 |               <br />
 39 |               <code>/([a-z])/0$1/gi</code> will replace "sPonGe" to
 40 |               "0s0P0o0n0G0e"
 41 |               <br />
 42 |               <code>/f([^o]+)(.*)/FB $2$1/i</code> will replace "Facebook" to
 43 |               "FB ookaceb" (but why)
 44 |             </span>
 45 |           </div>
 46 |         </li>
 47 |         <li>
 48 |           <div class="collapsible-header">
 49 |             Beta Feature: Add Your Own URL Pattern
 50 |           </div>
 51 |           <div class="collapsible-body">
 52 |             <span>
 53 |               <h6>This feature may not work as expected!</h6>
 54 |               <br />
 55 |               Another beta feature that lets you create your own URL pattern
 56 |               match.
 57 |               <br />
 58 |               Note that regex matching has the lowest priority when searching
 59 |               for a URL match.
 60 |               <br />
 61 |               The URL pattern must start and end with an asterisk
 62 |               <code>*</code>
 63 |               <br />
 64 |               Instead of using $1, $2 to use capture groups, use ${1}, ${2}{' '}
 65 |               instead for URLs.
 66 |               <br />
 67 |               Examples: <br />
 68 |               <code>*reddit\.com/(r/[^/]+)* | Red ${1}</code> will change
 69 |               <code>https://www.reddit.com/r/funny</code> to
 70 |               <code>Red r/funny</code> It can be combined with the title regex
 71 |               mentioned above too.
 72 |               <br />
 73 |               <code>
 74 |                 *\.([^.]+)\.com/(.*)* | /(.*)/${1} $1 ${2}/
 75 |               </code>
 76 |               will change <code>https://www.reddit.com/r/funny</code> to
 77 |               <code>reddit funny r/funny</code> <br />
 78 |               <br />
 79 |               <div class="row">
 80 |                 <form class="col s12">
 81 |                   <div class="row">
 82 |                     <div class="input-field col s6">
 83 |                       <textarea
 84 |                         id="urlPattern"
 85 |                         class="materialize-textarea"
 86 |                       ></textarea>
 87 |                       <label for="urlPattern">URL Pattern</label>
 88 |                       <span
 89 |                         class="helper-text"
 90 |                         data-error="Invalid: Must start and end with a *"
 91 |                       ></span>
 92 |                     </div>
 93 |                     <div class="input-field col s6">
 94 |                       <textarea
 95 |                         id="newTitle"
 96 |                         class="materialize-textarea"
 97 |                       ></textarea>
 98 |                       <label for="newTitle">New Title</label>
 99 |                     </div>
100 |                   </div>
101 |                   <div class="btn" id="add" type="submit">
102 |                     Add Patterns
103 |                     <i class="material-icons" id="added">
104 |                       check
105 |                     </i>
106 |                   </div>
107 |                 </form>
108 |               </div>
109 |             </span>
110 |           </div>
111 |         </li>
112 |       </ul>
113 |     </div>
114 |   );
115 | };
116 | 
117 | export default AdvancedSettings;
118 | 


--------------------------------------------------------------------------------
/src/options/ContextMenuSwitch.tsx:
--------------------------------------------------------------------------------
 1 | import { h, JSX } from 'preact';
 2 | import { useEffect, useState } from 'preact/compat';
 3 | import Switch from '@material-ui/core/Switch';
 4 | import { createContextMenu } from '../shared/utils';
 5 | 
 6 | const ContextMenuSwitch = () => {
 7 |   const [contextMenu, setContextMenu] = useState(false);
 8 | 
 9 |   useEffect(() => {
10 |     if (contextMenu) {
11 |     }
12 |   }, [contextMenu]);
13 | 
14 |   const toggleContextMenu = () => {
15 |     if (contextMenu) {
16 |       chrome.contextMenus.removeAll();
17 |     } else {
18 |       createContextMenu();
19 |     }
20 |     setContextMenu(!contextMenu);
21 |   };
22 | 
23 |   return (
24 |     <Switch
25 |       name="contextMenuSwitch"
26 |       checked={contextMenu}
27 |       onChange={toggleContextMenu}
28 |     />
29 |   );
30 | };
31 | 
32 | export default ContextMenuSwitch;
33 | 


--------------------------------------------------------------------------------
/src/options/Footer.tsx:
--------------------------------------------------------------------------------
 1 | import { h } from 'preact';
 2 | 
 3 | import { makeStyles } from '@material-ui/core/styles';
 4 | import Chip from '@material-ui/core/Chip';
 5 | import Container from '@material-ui/core/Container';
 6 | 
 7 | import ChromeIcon from '../../static/svgs/chrome.svg';
 8 | import FirefoxIcon from '../../static/svgs/firefox.svg';
 9 | import GitHubIcon from '../../static/svgs/github.svg';
10 | 
11 | const isChrome = BROWSER === 'chrome';
12 | 
13 | const chipProps = {
14 |   size: 'small',
15 |   clickable: true,
16 |   color: 'primary',
17 |   component: 'a',
18 |   variant: 'outlined',
19 |   target: '_blank',
20 |   rel: 'noopener noreferrer',
21 | } as const;
22 | 
23 | const useStyles = makeStyles((theme) => ({
24 |   root: {
25 |     fontSize: '0.8em',
26 |     background: 'black',
27 |   },
28 |   container: {
29 |     display: 'flex',
30 |     justifyContent: 'space-between',
31 |     alignItems: 'center',
32 |   },
33 |   links: {
34 |     margin: '10px 0',
35 |     '& > *': {
36 |       margin: '0 10px',
37 |     },
38 |     '& svg': {
39 |       height: '1.2em',
40 |     },
41 |   },
42 |   copyRight: {
43 |     flex: 1,
44 |     textAlign: 'right',
45 |     marginRight: '20px',
46 |   },
47 | }));
48 | 
49 | const Chrome = (
50 |   <Chip
51 |     icon={<ChromeIcon />}
52 |     label={isChrome ? 'Rate Me!' : 'Chrome'}
53 |     href="https://chrome.google.com/webstore/detail/tab-retitle/hilgambgdpjgljhjdaccadahckpdiapo"
54 |     {...chipProps}
55 |   />
56 | );
57 | const Firefox = (
58 |   <Chip
59 |     icon={<FirefoxIcon />}
60 |     label={isChrome ? 'Firefox' : 'Rate Me!'}
61 |     href="https://addons.mozilla.org/en-US/firefox/addon/tab-retitle/"
62 |     {...chipProps}
63 |   />
64 | );
65 | 
66 | const Footer = () => {
67 |   const styles = useStyles();
68 |   const links = isChrome ? [Chrome, Firefox] : [Firefox, Chrome];
69 | 
70 |   return (
71 |     <footer className={styles.root}>
72 |       <Container maxWidth="lg" className={styles.container}>
73 |         <div className={styles.links}>
74 |           {links}
75 |           <Chip
76 |             icon={<GitHubIcon />}
77 |             label="GitHub"
78 |             href="https://github.com/Lazyuki/ReTitle"
79 |             {...chipProps}
80 |           />
81 |         </div>
82 |         <div className={styles.copyRight}>&copy; 2021 Lazyuki</div>
83 |       </Container>
84 |     </footer>
85 |   );
86 | };
87 | 
88 | export default Footer;
89 | 


--------------------------------------------------------------------------------
/src/options/Header.tsx:
--------------------------------------------------------------------------------
 1 | import { h } from 'preact';
 2 | import { FC } from 'preact/compat';
 3 | import { makeStyles } from '@material-ui/core/styles';
 4 | import AppBar from '@material-ui/core/AppBar';
 5 | import Typography from '@material-ui/core/Typography';
 6 | import Container from '@material-ui/core/Container';
 7 | 
 8 | const useStyles = makeStyles((theme) => ({
 9 |   root: {
10 |     position: 'relative',
11 |     background: 'black',
12 |     color: 'white',
13 |   },
14 |   title: {
15 |     margin: '10px 0',
16 |     fontSize: '2em',
17 |   },
18 | }));
19 | 
20 | const Header: FC = ({ children }) => {
21 |   const styles = useStyles();
22 | 
23 |   return (
24 |     <AppBar className={styles.root}>
25 |       <Container maxWidth="lg">
26 |         <Typography variant="h6" className={styles.title}>
27 |           ReTitle Settings
28 |         </Typography>
29 |         {children}
30 |       </Container>
31 |     </AppBar>
32 |   );
33 | };
34 | 
35 | export default Header;
36 | 


--------------------------------------------------------------------------------
/src/options/Home.tsx:
--------------------------------------------------------------------------------
  1 | import { h } from 'preact';
  2 | import { useState } from 'preact/compat';
  3 | import { makeStyles } from '@material-ui/core/styles';
  4 | import Container from '@material-ui/core/Container';
  5 | import Tabs from '@material-ui/core/Tabs';
  6 | import Tab from '@material-ui/core/Tab';
  7 | import Box from '@material-ui/core/Box';
  8 | import Typography from '@material-ui/core/Typography';
  9 | 
 10 | import Header from './Header';
 11 | import SavedTitles from './SavedTitles';
 12 | import UserSettings from './UserSettings';
 13 | import Footer from './Footer';
 14 | import AdvancedSettings from './AdvancedSettings';
 15 | 
 16 | const useStyles = makeStyles((theme) => ({
 17 |   root: {
 18 |     display: 'flex',
 19 |     flexDirection: 'column',
 20 |     height: '100vh',
 21 |   },
 22 |   main: {
 23 |     flex: '1',
 24 |     overflow: 'auto',
 25 |   },
 26 |   tabRoot: {
 27 |     flexGrow: 1,
 28 |     backgroundColor: theme.palette.background.paper,
 29 |     display: 'flex',
 30 |     height: 224,
 31 |   },
 32 |   tabs: {
 33 |     borderRight: `1px solid ${theme.palette.divider}`,
 34 |   },
 35 | }));
 36 | 
 37 | function a11yProps(index: number) {
 38 |   return {
 39 |     id: `vertical-tab-${index}`,
 40 |     'aria-controls': `vertical-tabpanel-${index}`,
 41 |   };
 42 | }
 43 | 
 44 | interface TabPanelProps {
 45 |   children?: any;
 46 |   index: number;
 47 |   value: any;
 48 | }
 49 | 
 50 | function TabPanel(props: TabPanelProps) {
 51 |   const { children, value, index, ...other } = props;
 52 | 
 53 |   return (
 54 |     <div
 55 |       role="tabpanel"
 56 |       hidden={value !== index}
 57 |       id={`tabpanel-${index}`}
 58 |       aria-labelledby={`tab-${index}`}
 59 |       {...other}
 60 |     >
 61 |       {value === index && (
 62 |         <Box p={3}>
 63 |           <Typography>{children}</Typography>
 64 |         </Box>
 65 |       )}
 66 |     </div>
 67 |   );
 68 | }
 69 | 
 70 | const Home = () => {
 71 |   const styles = useStyles();
 72 |   const [tab, setTab] = useState(0);
 73 | 
 74 |   const handleChange = (event: any, newValue: number) => {
 75 |     setTab(newValue);
 76 |   };
 77 | 
 78 |   return (
 79 |     <div className={styles.root}>
 80 |       <Header>
 81 |         <Tabs value={tab} onChange={handleChange} aria-label="tabs">
 82 |           <Tab label="Saved Titles" {...a11yProps(0)} />
 83 |           <Tab label="User Settings" {...a11yProps(1)} />
 84 |           <Tab label="Advanced Settings" {...a11yProps(2)} />
 85 |         </Tabs>
 86 |       </Header>
 87 |       <main className={styles.main}>
 88 |         <Container maxWidth="lg">
 89 |           <TabPanel value={tab} index={0}>
 90 |             <SavedTitles />
 91 |           </TabPanel>
 92 |           <TabPanel value={tab} index={1}>
 93 |             <UserSettings />
 94 |           </TabPanel>
 95 |           <TabPanel value={tab} index={2}>
 96 |             <AdvancedSettings />
 97 |           </TabPanel>
 98 |         </Container>
 99 |       </main>
100 |       <Footer />
101 |     </div>
102 |   );
103 | };
104 | 
105 | export default Home;
106 | 


--------------------------------------------------------------------------------
/src/options/KeyboardShortcutSettings.tsx:
--------------------------------------------------------------------------------
 1 | import { h } from 'preact';
 2 | import { useState, useEffect } from 'preact/compat';
 3 | import KeyboardIcon from '@material-ui/icons/Keyboard';
 4 | import Button from '@material-ui/core/Button';
 5 | 
 6 | const KEYBOARD_SHORTCUT_NAME = '_execute_browser_action';
 7 | const defaultShortcut = 'Alt+Shift+X';
 8 | const isChrome = BROWSER === 'chrome';
 9 | const linkURL = isChrome
10 |   ? 'chrome://extensions/shortcuts'
11 |   : 'https://support.mozilla.org/en-US/kb/manage-extension-shortcuts-firefox';
12 | 
13 | const KeyboardShortcutSettings = () => {
14 |   const [shortcut, setShortcut] = useState(defaultShortcut);
15 | 
16 |   useEffect(() => {
17 |     chrome.commands.getAll((commands) => {
18 |       for (const command of commands) {
19 |         if (command.name === KEYBOARD_SHORTCUT_NAME && command.shortcut) {
20 |           setShortcut(command.shortcut);
21 |         }
22 |       }
23 |     });
24 |   }, []);
25 | 
26 |   return (
27 |     <span>
28 |       {shortcut}
29 |       <Button
30 |         style={{ marginLeft: '20px' }}
31 |         variant="outlined"
32 |         size="small"
33 |         color="primary"
34 |         onClick={() => chrome.tabs.create({ url: linkURL })}
35 |         endIcon={<KeyboardIcon />}
36 |       >
37 |         Manage
38 |       </Button>
39 |     </span>
40 |   );
41 | };
42 | 
43 | export default KeyboardShortcutSettings;
44 | 


--------------------------------------------------------------------------------
/src/options/OptionsApp.tsx:
--------------------------------------------------------------------------------
 1 | import { h } from 'preact';
 2 | 
 3 | import Home from './Home';
 4 | import ReTitleThemeWrapper from '../shared/ReTitleThemeWrapper';
 5 | 
 6 | const OptionsApp = () => {
 7 |   return (
 8 |     <ReTitleThemeWrapper>
 9 |       <Home />
10 |     </ReTitleThemeWrapper>
11 |   );
12 | };
13 | 
14 | export default OptionsApp;
15 | 


--------------------------------------------------------------------------------
/src/options/RegexPopup.tsx:
--------------------------------------------------------------------------------
 1 | import { h } from 'preact';
 2 | 
 3 | const AdvancedSettings = () => {
 4 |   const regex101 =
 5 |     'https://regex101.com/?flavor=javascript&regex=reddit%5C.com%5C%2Fr%5C%2F(%5B%5E%2F%5D%2B)';
 6 |   return (
 7 |     <div id="advancedOptions" class="col s12">
 8 |       <ul class="collapsible">
 9 |         <li>
10 |           <h3 class="collapsible-header">
11 |             Regeular Expression (regex) Replacement
12 |           </h3>
13 |           <div>Regex is a powerful tool.</div>
14 |           <div class="collapsible-body">
15 |             <span>
16 |               <br />
17 |               <a href={regex101}>Regex 101</a>
18 |               <br />
19 |               The syntax is <br />
20 |               <code>/regex/replacement/flags</code>
21 |               <br />
22 |               Notice that there are three forward slashes, so if you want to use
23 |               a slash in regex or replacement, you need to escape it with a
24 |               backward slash <code>\</code>.<br />
25 |               In replacement, you can use regex's captured groups with
26 |               <code>$1</code>, <code>$2</code> and so on.
27 |               <br />
28 |               Possible flags are "g" for global, and "i" for ignore case. Do not
29 |               forget the last slash if not using any flags.
30 |               <br />
31 |               Examples:
32 |               <br />
33 |               <code>/.*/Lazy/</code> is the same as just setting the title to
34 |               "Lazy".
35 |               <br />
36 |               <code>/(.*)/LAZ $1/</code> will replace "old title" to "LAZ old
37 |               title".
38 |               <br />
39 |               <code>/(.*)/r\/$1/</code> will replace "Lazy" to "r/Lazy".
40 |               <br />
41 |               <code>/([a-z])/0$1/gi</code> will replace "sPonGe" to
42 |               "0s0P0o0n0G0e"
43 |               <br />
44 |               <code>/f([^o]+)(.*)/FB $2$1/i</code> will replace "Facebook" to
45 |               "FB ookaceb" (but why)
46 |             </span>
47 |           </div>
48 |         </li>
49 |         <li>
50 |           <div class="collapsible-header">
51 |             Beta Feature: Add Your Own URL Pattern
52 |           </div>
53 |           <div class="collapsible-body">
54 |             <span>
55 |               <h6>This feature may not work as expected!</h6>
56 |               <br />
57 |               Another beta feature that lets you create your own URL pattern
58 |               match.
59 |               <br />
60 |               Note that regex matching has the lowest priority when searching
61 |               for a URL match.
62 |               <br />
63 |               The URL pattern must start and end with an asterisk
64 |               <code>*</code>
65 |               <br />
66 |               Instead of using $1, $2 to use capture groups, use ${1}, ${2}{' '}
67 |               instead for URLs.
68 |               <br />
69 |               Examples: <br />
70 |               <code>*reddit\.com/(r/[^/]+)* | Red ${1}</code> will change
71 |               <code>https://www.reddit.com/r/funny</code> to
72 |               <code>Red r/funny</code> It can be combined with the title regex
73 |               mentioned above too.
74 |               <br />
75 |               <code>
76 |                 *\.([^.]+)\.com/(.*)* | /(.*)/${1} $1 ${2}/
77 |               </code>
78 |               will change <code>https://www.reddit.com/r/funny</code> to
79 |               <code>reddit funny r/funny</code> <br />
80 |               <br />
81 |             </span>
82 |           </div>
83 |         </li>
84 |       </ul>
85 |     </div>
86 |   );
87 | };
88 | 
89 | export default AdvancedSettings;
90 | 


--------------------------------------------------------------------------------
/src/options/SavedTitles.tsx:
--------------------------------------------------------------------------------
  1 | import { h } from 'preact';
  2 | import {
  3 |   useState,
  4 |   useEffect,
  5 |   useCallback,
  6 |   useMemo,
  7 |   StateUpdater,
  8 | } from 'preact/compat';
  9 | import { makeStyles } from '@material-ui/core/styles';
 10 | import List from '@material-ui/core/List';
 11 | import ListItem from '@material-ui/core/ListItem';
 12 | import ListItemIcon from '@material-ui/core/ListItemIcon';
 13 | import ListItemText from '@material-ui/core/ListItemText';
 14 | import DeleteIcon from '@material-ui/icons/Delete';
 15 | import EditIcon from '@material-ui/icons/Edit';
 16 | 
 17 | import {
 18 |   StorageChanges,
 19 |   TabLockTitle,
 20 |   ExactTitle,
 21 |   DomainTitle,
 22 |   RegexTitle,
 23 |   StorageAction,
 24 |   StoredTitle,
 25 | } from '../shared/types';
 26 | import { storageChangeHandler, initTitles } from '../shared/storageHandler';
 27 | 
 28 | const noop = () => {};
 29 | 
 30 | const useStyles = makeStyles((theme) => ({
 31 |   root: {
 32 |     position: 'relative',
 33 |   },
 34 | }));
 35 | 
 36 | const editTitleState = <T extends StoredTitle>(
 37 |   predicate: (title: T) => boolean,
 38 |   newTitle: T
 39 | ) => (previous: T[]) => {
 40 |   const index = previous.findIndex(predicate);
 41 |   if (index >= 0) {
 42 |     const copy = [...previous];
 43 |     copy[index] = newTitle;
 44 |     return copy;
 45 |   } else {
 46 |     return previous;
 47 |   }
 48 | };
 49 | const removeTitleState = <T extends StoredTitle>(
 50 |   predicate: (title: T) => boolean
 51 | ) => (previous: T[]) => {
 52 |   const index = previous.findIndex(predicate);
 53 |   if (index >= 0) {
 54 |     const copy = [...previous].splice(index, 1);
 55 |     return copy;
 56 |   } else {
 57 |     return previous;
 58 |   }
 59 | };
 60 | 
 61 | const generateCallback = <T extends StoredTitle>(
 62 |   stateUpdater: StateUpdater<T[]>,
 63 |   predicate: (t1: T, t2: T) => boolean
 64 | ) => (action: StorageAction, newTitle: T) => {
 65 |   switch (action) {
 66 |     case 'add':
 67 |       stateUpdater((p) => [...p, newTitle]);
 68 |       break;
 69 |     case 'remove':
 70 |       stateUpdater(removeTitleState((t) => predicate(t, newTitle)));
 71 |     case 'edit':
 72 |       stateUpdater(editTitleState((t) => predicate(t, newTitle), newTitle));
 73 |   }
 74 | };
 75 | 
 76 | const SavedTitles = () => {
 77 |   const styles = useStyles();
 78 |   const [tabLocks, setTablocks] = useState<TabLockTitle[]>([]);
 79 |   const [exacts, setExacts] = useState<ExactTitle[]>([]);
 80 |   const [domains, setDomains] = useState<DomainTitle[]>([]);
 81 |   const [regexes, setRegexes] = useState<RegexTitle[]>([]);
 82 | 
 83 |   const onTablockChange = useCallback(
 84 |     generateCallback(setTablocks, (t1, t2) => t1.tabId === t2.tabId),
 85 |     []
 86 |   );
 87 | 
 88 |   const onExactChange = useCallback(
 89 |     generateCallback(setExacts, (t1, t2) => t1.url === t2.url),
 90 |     []
 91 |   );
 92 | 
 93 |   const onDomainChange = useCallback(
 94 |     generateCallback(setDomains, (t1, t2) => t1.domain === t2.domain),
 95 |     []
 96 |   );
 97 | 
 98 |   const onRegexChange = useCallback(
 99 |     generateCallback(setRegexes, (t1, t2) => t1.urlPattern === t2.urlPattern),
100 |     []
101 |   );
102 | 
103 |   useEffect(() => {
104 |     const handler = storageChangeHandler({
105 |       onTablockChange,
106 |       onExactChange,
107 |       onDomainChange,
108 |       onRegexChange,
109 |     });
110 |     initTitles({
111 |       onTablockChange,
112 |       onExactChange,
113 |       onDomainChange,
114 |       onRegexChange,
115 |     });
116 |     chrome.storage.onChanged.addListener(handler);
117 |     return () => chrome.storage.onChanged.removeListener(handler);
118 |   }, []);
119 | 
120 |   return (
121 |     <div>
122 |       <ul class="description">
123 |         <li>Temporary titles are not shown here</li>
124 |         <li>
125 |           Use <code>$0</code> to insert the original title. So if you want
126 |           <code>Title</code> to say <code>My Title</code>, set the title name to{' '}
127 |           <code>My $0</code>.
128 |         </li>
129 |       </ul>
130 |       <h4>Tabs</h4>
131 |       <List className={styles.root}>
132 |         {tabLocks.map((t) => {
133 |           return (
134 |             <ListItem button>
135 |               <ListItemText
136 |                 primary={`Tab ID: ${t.tabId} | Title: ${t.newTitle}`}
137 |               />
138 |               <ListItemIcon>
139 |                 <EditIcon />
140 |               </ListItemIcon>
141 |               <ListItemIcon>
142 |                 <DeleteIcon />
143 |               </ListItemIcon>
144 |             </ListItem>
145 |           );
146 |         })}
147 |       </List>
148 |       <h4>Exact URLs</h4>
149 |       <List className={styles.root}>
150 |         {exacts.map((t) => {
151 |           return (
152 |             <ListItem button>
153 |               <ListItemText primary={`URL: ${t.url} | Title: ${t.newTitle}`} />
154 |               <ListItemIcon>
155 |                 <EditIcon />
156 |               </ListItemIcon>
157 |               <ListItemIcon>
158 |                 <DeleteIcon />
159 |               </ListItemIcon>
160 |             </ListItem>
161 |           );
162 |         })}
163 |       </List>
164 |       <h4>Domains</h4>
165 |       <List className={styles.root}>
166 |         {domains.map((t) => {
167 |           return (
168 |             <ListItem button>
169 |               <ListItemText
170 |                 primary={`Domain: ${t.domain} | Title: ${t.newTitle}`}
171 |               />
172 |               <ListItemIcon>
173 |                 <EditIcon />
174 |               </ListItemIcon>
175 |               <ListItemIcon>
176 |                 <DeleteIcon />
177 |               </ListItemIcon>
178 |             </ListItem>
179 |           );
180 |         })}
181 |       </List>
182 |       <h4>Regexes</h4>
183 |       <List className={styles.root}>
184 |         {regexes.map((t) => {
185 |           return (
186 |             <ListItem button>
187 |               <ListItemText
188 |                 primary={`Regex: ${t.urlPattern} | Title: ${t.newTitle}`}
189 |               />
190 |               <ListItemIcon>
191 |                 <EditIcon />
192 |               </ListItemIcon>
193 |               <ListItemIcon>
194 |                 <DeleteIcon />
195 |               </ListItemIcon>
196 |             </ListItem>
197 |           );
198 |         })}
199 |       </List>
200 |     </div>
201 |   );
202 | };
203 | 
204 | export default SavedTitles;
205 | 


--------------------------------------------------------------------------------
/src/options/UserSettings.tsx:
--------------------------------------------------------------------------------
  1 | import { h } from 'preact';
  2 | import { useState, useEffect, useCallback } from 'preact/compat';
  3 | import Radio from '@material-ui/core/Radio';
  4 | import RadioGroup from '@material-ui/core/RadioGroup';
  5 | import FormControlLabel from '@material-ui/core/FormControlLabel';
  6 | import FormControl from '@material-ui/core/FormControl';
  7 | import Switch from '@material-ui/core/Switch';
  8 | import { makeStyles } from '@material-ui/core/styles';
  9 | 
 10 | import ContextMenuSwitch from './ContextMenuSwitch';
 11 | import KeyboardShortcutSettings from './KeyboardShortcutSettings';
 12 | import { TabOption } from '../shared/types';
 13 | import {
 14 |   getDefaultOption,
 15 |   setDefaultOption,
 16 |   setTheme,
 17 |   getTheme,
 18 | } from '../shared/storageHandler';
 19 | 
 20 | const useStyles = makeStyles((theme) => ({
 21 |   root: {
 22 |     fontSize: '0.8em',
 23 |     borderTop: `1px solid ${theme.palette.primary.main}`,
 24 |   },
 25 |   label: {
 26 |     margin: '0 12px 0 16px',
 27 |     fontWeight: 600,
 28 |   },
 29 |   radios: {
 30 |     margin: '10px 0',
 31 |     paddingLeft: '20px',
 32 |   },
 33 |   button: {
 34 |     textAlign: 'center',
 35 |   },
 36 |   saved: {
 37 |     opacity: 0,
 38 |     zIndex: -1,
 39 |     position: 'absolute',
 40 |     marginTop: '4px',
 41 |     marginLeft: '-20px',
 42 |     display: 'inline-block',
 43 |     transition: '0.2s',
 44 |     '&[data-shown="true"]': {
 45 |       opacity: 1,
 46 |       marginLeft: '10px',
 47 |     },
 48 |   },
 49 |   check: {
 50 |     verticalAlign: 'middle',
 51 |     color: theme.palette.success.main,
 52 |   },
 53 | }));
 54 | 
 55 | const UserSettings = () => {
 56 |   const styles = useStyles();
 57 |   const [option, setOption] = useState<TabOption>('onetime');
 58 |   const [isDark, setIsDark] = useState(
 59 |     localStorage.getItem('theme') !== 'light'
 60 |   );
 61 | 
 62 |   useEffect(() => {
 63 |     getDefaultOption().then(setDefaultOption);
 64 |     getTheme().then((theme) => setIsDark(theme === 'dark'));
 65 |   }, []);
 66 | 
 67 |   const handleOptionChange = useCallback((e: any) => {
 68 |     const newOption: TabOption = e.target.value;
 69 |     setOption(newOption);
 70 |     setDefaultOption(newOption);
 71 |   }, []);
 72 | 
 73 |   const toggleTheme = () => {
 74 |     setTheme(isDark ? 'light' : 'dark');
 75 |     setIsDark(!isDark);
 76 |   };
 77 | 
 78 |   return (
 79 |     <div>
 80 |       <div>
 81 |         {/* Popup flickers when using light theme, so stick to dark theme until I figure out a workaround */}
 82 |         <FormControlLabel
 83 |           control={
 84 |             <Switch
 85 |               checked={isDark}
 86 |               onChange={toggleTheme}
 87 |               name="isDarkTheme"
 88 |             />
 89 |           }
 90 |           labelPlacement="start"
 91 |           label={<label className={styles.label}>Dark Theme:</label>}
 92 |         />
 93 |         <div>
 94 |           <label className={styles.label}>Keyboard Shortcut:</label>
 95 |           <KeyboardShortcutSettings />
 96 |         </div>
 97 |         <div>
 98 |           <label className={styles.label}>Add ReTitle to context menu</label>
 99 |           <ContextMenuSwitch />
100 |         </div>
101 |       </div>
102 |       <label className={styles.label}>Default Option:</label>
103 |       <p>
104 |         This option will be used as the default value in the extension popup
105 |         menu. These options are in the order of priority, so for example{' '}
106 |         <code>Set for this tab</code> will be matched instead of
107 |         <code>Only exact match</code> if the given tab matches both.
108 |       </p>
109 |       <FormControl className={styles.radios} component="fieldset">
110 |         <RadioGroup
111 |           aria-label="option"
112 |           name="option"
113 |           value={option}
114 |           onChange={handleOptionChange}
115 |         >
116 |           <FormControlLabel
117 |             value="onetime"
118 |             control={<Radio color="primary" />}
119 |             label={
120 |               <div>
121 |                 <code>Set it temporarily</code>
122 |                 Temporarily sets the title just once which does not persist at
123 |                 all. Reloading or changing the URL loses the changed title.
124 |               </div>
125 |             }
126 |           />
127 |           <FormControlLabel
128 |             value="tablock"
129 |             control={<Radio color="primary" />}
130 |             label={
131 |               <div>
132 |                 <code>Set for this tab</code>
133 |                 This will match the current tab no matter the URL, but will be
134 |                 lost once the tab is closed. This will persist if you close the
135 |                 window and reopen it with previous tabs. However, if the browser
136 |                 crashes or the window didn't load the tabs on startup then this
137 |                 settings will be lost.
138 |               </div>
139 |             }
140 |           />
141 |           <FormControlLabel
142 |             value="exact"
143 |             control={<Radio color="primary" />}
144 |             label={
145 |               <div>
146 |                 <code>Set for this exact URL</code>
147 |                 This will match the URL exactly and it will be persistent across
148 |                 sessions. You can set this to ignore URL parameters such as{' '}
149 |                 <code>#</code>, <code>&amp;</code>, and <code>?</code> to be
150 |                 ignored in the saved titles page.
151 |               </div>
152 |             }
153 |           />
154 |           <FormControlLabel
155 |             value="domain"
156 |             control={<Radio color="primary" />}
157 |             label={
158 |               <div>
159 |                 <code>Set for this domain</code>
160 |                 This will match the domain part of the URL and it will be
161 |                 persistent across sessions.
162 |               </div>
163 |             }
164 |           />
165 |         </RadioGroup>
166 |       </FormControl>
167 |     </div>
168 |   );
169 | };
170 | 
171 | export default UserSettings;
172 | 


--------------------------------------------------------------------------------
/src/options/index.tsx:
--------------------------------------------------------------------------------
1 | import { h, render } from 'preact';
2 | import OptionsApp from './OptionsApp';
3 | 
4 | render(<OptionsApp />, document.body);
5 | 


--------------------------------------------------------------------------------
/src/popup/BookmarkTitle.tsx:
--------------------------------------------------------------------------------
 1 | import { h, JSX } from 'preact';
 2 | import { useEffect, useState } from 'preact/compat';
 3 | import { makeStyles } from '@material-ui/core/styles';
 4 | import Tooltip from '@material-ui/core/Tooltip';
 5 | 
 6 | const useStyles = makeStyles({
 7 |   root: {
 8 |     cursor: 'pointer',
 9 |     marginBottom: '10px',
10 |     marginRight: '60px',
11 |     textOverflow: 'ellipsis',
12 |     overflow: 'hidden',
13 |     whiteSpace: 'nowrap',
14 |   },
15 |   label: {
16 |     opacity: 0.7,
17 |     fontSize: '12px',
18 |   },
19 |   span: {
20 |     fontSize: '14px',
21 |   },
22 | });
23 | 
24 | const BookmarkTitle = ({
25 |   url,
26 |   setInputValue,
27 |   ...rest
28 | }: {
29 |   url?: string;
30 |   setInputValue: (value: string) => void;
31 | } & JSX.HTMLAttributes<HTMLSpanElement>) => {
32 |   const [bookmarkedTitle, setBookmarkedTitle] = useState<string | null>(null);
33 |   const styles = useStyles();
34 | 
35 |   useEffect(() => {
36 |     if (url) {
37 |       try {
38 |         chrome.bookmarks.search({ url }, function (results) {
39 |           if (results[0]) {
40 |             setBookmarkedTitle(results[0].title);
41 |           }
42 |         });
43 |       } catch (e) {
44 |         // URL not allowed;
45 |       }
46 |     }
47 |   }, [url]);
48 | 
49 |   return bookmarkedTitle !== null ? (
50 |     <Tooltip
51 |       title={`Click to paste bookmark title: ${bookmarkedTitle}`}
52 |       placement="bottom-start"
53 |     >
54 |       <div
55 |         className={styles.root}
56 |         onClick={() => setInputValue(bookmarkedTitle)}
57 |       >
58 |         <span className={styles.label}>From Bookmark </span>
59 |         <span {...rest} className={styles.span}>
60 |           {bookmarkedTitle}
61 |         </span>
62 |       </div>
63 |     </Tooltip>
64 |   ) : null;
65 | };
66 | 
67 | export default BookmarkTitle;
68 | 


--------------------------------------------------------------------------------
/src/popup/ContentScriptChecker.tsx:
--------------------------------------------------------------------------------
 1 | import { h } from 'preact';
 2 | import { useState, useEffect, FC } from 'preact/compat';
 3 | const isChrome = BROWSER === 'chrome';
 4 | 
 5 | // Taken from https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts
 6 | const FF_BLOCKED_SITES = [
 7 |   'accounts-static.cdn.mozilla.net',
 8 |   'accounts.firefox.com',
 9 |   'addons.cdn.mozilla.net',
10 |   'addons.mozilla.org',
11 |   'api.accounts.firefox.com',
12 |   'content.cdn.mozilla.net',
13 |   'content.cdn.mozilla.net',
14 |   'discovery.addons.mozilla.org',
15 |   'input.mozilla.org',
16 |   'install.mozilla.org',
17 |   'oauth.accounts.firefox.com',
18 |   'profile.accounts.firefox.com',
19 |   'support.mozilla.org',
20 |   'sync.services.mozilla.com',
21 |   'testpilot.firefox.com',
22 | ];
23 | 
24 | const ContentScriptChecker: FC<{
25 |   domain: string;
26 |   url?: string;
27 |   className: string;
28 | }> = ({ domain, url, className, children }) => {
29 |   const [isAllowed, setIsAllowed] = useState(true);
30 |   useEffect(() => {
31 |     browser.tabs.executeScript({ code: '' }).catch(() => {
32 |       setIsAllowed(false);
33 |     });
34 |   }, []);
35 |   if (isChrome) {
36 |     if (url && /^(chrome|chrome-extension):/.test(url)) {
37 |       return (
38 |         <div className={className}>
39 |           Extensions are disabled on browser internal URLs
40 |         </div>
41 |       );
42 |     }
43 |   } else {
44 |     if (url) {
45 |       if (/^(about|moz-extension):/.test(url)) {
46 |         return (
47 |           <div className={className}>
48 |             Add-ons are disabled on browser internal URLs
49 |           </div>
50 |         );
51 |       }
52 |       if (!isAllowed) {
53 |         const sanitizedURL = url.split('?')[0].split('#')[0];
54 |         if (/(\.json|\.pdf)$/i.test(sanitizedURL)) {
55 |           return (
56 |             <div className={className}>
57 |               PDFs and JSON files cannot be accessed by add-ons on Firefox for{' '}
58 |               <a
59 |                 href="https://bugzilla.mozilla.org/show_bug.cgi?id=1454760"
60 |                 target="_blank"
61 |               >
62 |                 security reasons
63 |               </a>
64 |               . You can still use this extension with those files on Google
65 |               Chrome.
66 |             </div>
67 |           );
68 |         } else if (FF_BLOCKED_SITES.includes(domain)) {
69 |           return (
70 |             <div className={className}>
71 |               Firefox add-ons cannot access
72 |               <br />
73 |               <code>{domain}</code>
74 |               <br />
75 |               websites.{' '}
76 |               <a
77 |                 href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts"
78 |                 target="_blank"
79 |               >
80 |                 Details
81 |               </a>
82 |             </div>
83 |           );
84 |         } else {
85 |           return (
86 |             <div className={className}>
87 |               This extension does not work on this page
88 |             </div>
89 |           );
90 |         }
91 |       }
92 |     }
93 |   }
94 |   return <div>{children}</div>;
95 | };
96 | 
97 | export default ContentScriptChecker;
98 | 


--------------------------------------------------------------------------------
/src/popup/CurrentTitle.tsx:
--------------------------------------------------------------------------------
 1 | import { h, JSX } from 'preact';
 2 | import { makeStyles } from '@material-ui/core/styles';
 3 | import Tooltip from '@material-ui/core/Tooltip';
 4 | 
 5 | const useStyles = makeStyles({
 6 |   root: {
 7 |     cursor: 'pointer',
 8 |     marginBottom: '10px',
 9 |     marginRight: '60px',
10 |     textOverflow: 'ellipsis',
11 |     overflow: 'hidden',
12 |     whiteSpace: 'nowrap',
13 |   },
14 |   label: {
15 |     opacity: 0.7,
16 |     fontSize: '12px',
17 |   },
18 |   span: {
19 |     fontSize: '14px',
20 |   },
21 | });
22 | 
23 | const CurrentTitle = ({
24 |   currentTitle,
25 |   setInputValue,
26 |   ...rest
27 | }: {
28 |   currentTitle?: string;
29 |   setInputValue: (value: string) => void;
30 | } & JSX.HTMLAttributes<HTMLSpanElement>) => {
31 |   const styles = useStyles();
32 | 
33 |   return (
34 |     <Tooltip
35 |       title={`Click to paste current title: ${currentTitle}`}
36 |       placement="bottom-start"
37 |     >
38 |       <div
39 |         className={styles.root}
40 |         onClick={() => setInputValue(currentTitle || '')}
41 |       >
42 |         <span className={styles.label}>Current Title </span>
43 |         <span {...rest} className={styles.span}>
44 |           {currentTitle}
45 |         </span>
46 |       </div>
47 |     </Tooltip>
48 |   );
49 | };
50 | 
51 | export default CurrentTitle;
52 | 


--------------------------------------------------------------------------------
/src/popup/Form.tsx:
--------------------------------------------------------------------------------
  1 | import { h } from 'preact';
  2 | import { useState, useEffect, useRef, useCallback } from 'preact/compat';
  3 | import { makeStyles } from '@material-ui/core/styles';
  4 | import TextField from '@material-ui/core/TextField';
  5 | import Radio from '@material-ui/core/Radio';
  6 | import RadioGroup from '@material-ui/core/RadioGroup';
  7 | import FormControlLabel from '@material-ui/core/FormControlLabel';
  8 | import FormControl from '@material-ui/core/FormControl';
  9 | import Button from '@material-ui/core/Button';
 10 | import Switch from '@material-ui/core/Switch';
 11 | 
 12 | import ContentScriptChecker from './ContentScriptChecker';
 13 | import Revert from './Revert';
 14 | import Gear from './Gear';
 15 | import CurrentTitle from './CurrentTitle';
 16 | import BookmarkTitle from './BookmarkTitle';
 17 | import { extractDomain } from '../shared/utils';
 18 | import { TabOption } from '../shared/types';
 19 | import {
 20 |   saveTitle,
 21 |   getDefaultOption,
 22 |   setDefaultOption,
 23 | } from '../shared/storageHandler';
 24 | import RegexInputGroup from '../shared/RegexInputGroup';
 25 | import { getCurrentOption } from '../shared/injectedScripts';
 26 | 
 27 | const isChrome = BROWSER === 'chrome';
 28 | 
 29 | const useStyles = makeStyles({
 30 |   root: {
 31 |     width: '450px',
 32 |     padding: '20px',
 33 |     overflow: 'hidden',
 34 |   },
 35 |   warning: {
 36 |     padding: '40px 20px',
 37 |     fontSize: '18px',
 38 |     textAlign: 'center',
 39 |     '& a': {
 40 |       color: 'orange !important',
 41 |     },
 42 |   },
 43 |   input: {
 44 |     width: '100%',
 45 |   },
 46 |   radios: {
 47 |     margin: '10px 0',
 48 |     paddingLeft: '20px',
 49 |   },
 50 |   button: {
 51 |     display: 'block',
 52 |     margin: '0 auto',
 53 |   },
 54 |   version: {
 55 |     position: 'absolute',
 56 |     bottom: '20px',
 57 |     right: '20px',
 58 |     opacity: 0.5,
 59 |     fontSize: '12px',
 60 |   },
 61 | });
 62 | 
 63 | const Form = () => {
 64 |   const [tab, setTab] = useState<chrome.tabs.Tab | null>(null);
 65 |   const [option, setOption] = useState<TabOption>('onetime');
 66 |   const [activeOption, setActiveOption] = useState<TabOption | null>(null);
 67 |   const [useRegex, setUseRegex] = useState(false);
 68 |   const [inputValue, setInputValue] = useState('');
 69 |   const inputRef = useRef<HTMLTextAreaElement>(null);
 70 |   const styles = useStyles();
 71 | 
 72 |   useEffect(() => {
 73 |     if (tab && typeof tab.id === 'number') {
 74 |       chrome.tabs.executeScript(
 75 |         tab.id,
 76 |         {
 77 |           code: `${getCurrentOption.toString()}; getCurrentOption();`,
 78 |           runAt: 'document_end',
 79 |         },
 80 |         (results) => {
 81 |           const result = results?.[0];
 82 |           if (result) {
 83 |             setActiveOption(result);
 84 |           }
 85 |         }
 86 |       );
 87 |     }
 88 |   }, [tab]);
 89 | 
 90 |   const setInputAndSelect = useCallback(
 91 |     (newInput?: string) => {
 92 |       setInputValue(newInput || '');
 93 |       setTimeout(() => {
 94 |         inputRef?.current?.select();
 95 |       }, 0);
 96 |     },
 97 |     [inputRef]
 98 |   );
 99 | 
100 |   const initialize = useCallback(
101 |     (tabs: chrome.tabs.Tab[]) => {
102 |       const currentTab = tabs[0];
103 |       setTab(currentTab);
104 |       setInputAndSelect(currentTab.title || '');
105 |       getDefaultOption().then(setDefaultOption);
106 |     },
107 |     [setInputAndSelect]
108 |   );
109 | 
110 |   useEffect(() => {
111 |     chrome.tabs.query(
112 |       {
113 |         active: true,
114 |         currentWindow: true,
115 |       },
116 |       initialize
117 |     );
118 |   }, [initialize]);
119 | 
120 |   const handleOptionChange = useCallback((e: any) => {
121 |     setOption(e.target.value);
122 |   }, []);
123 | 
124 |   const setTitle = useCallback(() => {
125 |     if (tab) {
126 |       saveTitle(inputValue, option, tab);
127 |       if (isChrome) {
128 |         chrome.runtime.sendMessage({
129 |           type: 'rename',
130 |           tabId: tab.id,
131 |           oldTitle: tab.title,
132 |           newTitle: inputValue,
133 |           option,
134 |         });
135 |         window.close();
136 |       } else {
137 |         browser.runtime
138 |           .sendMessage({
139 |             type: 'rename',
140 |             tabId: tab.id,
141 |             oldTitle: tab.title,
142 |             newTitle: inputValue,
143 |             option,
144 |           })
145 |           .then(() => window.close());
146 |       }
147 |     }
148 |   }, [inputValue, option, tab]);
149 | 
150 |   const domain = extractDomain(tab?.url);
151 | 
152 |   return (
153 |     <div className={styles.root}>
154 |       {tab && activeOption && <Revert tabId={tab.id || -1} />}
155 |       <Gear />
156 |       <ContentScriptChecker
157 |         domain={domain}
158 |         url={tab?.url}
159 |         className={styles.warning}
160 |       >
161 |         <CurrentTitle
162 |           currentTitle={tab?.title}
163 |           setInputValue={setInputAndSelect}
164 |         />
165 |         <BookmarkTitle url={tab?.url} setInputValue={setInputAndSelect} />
166 |         <FormControlLabel
167 |           control={
168 |             <Switch
169 |               checked={useRegex}
170 |               onChange={() => setUseRegex((p) => !p)}
171 |               name="use-regex"
172 |               color="primary"
173 |             />
174 |           }
175 |           label="Use Regex"
176 |         />
177 |         {useRegex ? (
178 |           <RegexInputGroup
179 |             onChange={(regexString: string) => setInputValue(regexString)}
180 |           />
181 |         ) : (
182 |           <TextField
183 |             multiline={true}
184 |             spellCheck={false}
185 |             className={styles.input}
186 |             inputRef={inputRef}
187 |             label="New Title"
188 |             value={inputValue}
189 |             onKeyPress={(e: any) => {
190 |               if (e.which == 13 && !e.shiftKey) {
191 |                 e.preventDefault();
192 |                 setTitle();
193 |                 return false;
194 |               }
195 |             }}
196 |             onChange={(e: any) => setInputValue(e.target.value)}
197 |             onFocus={(e: any) => e.target.select()}
198 |           />
199 |         )}
200 |         {activeOption && <div>Option: {activeOption} is active</div>}
201 |         <FormControl className={styles.radios} component="fieldset">
202 |           <RadioGroup
203 |             aria-label="option"
204 |             name="option"
205 |             value={option}
206 |             onChange={handleOptionChange}
207 |           >
208 |             <FormControlLabel
209 |               value="onetime"
210 |               control={<Radio color="primary" />}
211 |               label="Set it temporarily"
212 |             />
213 |             <FormControlLabel
214 |               value="tablock"
215 |               control={<Radio color="primary" />}
216 |               label="Set for this tab"
217 |             />
218 |             <FormControlLabel
219 |               value="exact"
220 |               control={<Radio color="primary" />}
221 |               label="Set for this exact URL"
222 |             />
223 |             <FormControlLabel
224 |               value="domain"
225 |               control={<Radio color="primary" />}
226 |               label={`Set for this domain: ${domain}`}
227 |               disabled={!domain}
228 |             />
229 |           </RadioGroup>
230 |         </FormControl>
231 |         <Button
232 |           className={styles.button}
233 |           variant="outlined"
234 |           color="primary"
235 |           onClick={setTitle}
236 |         >
237 |           SET TITLE
238 |         </Button>
239 |       </ContentScriptChecker>
240 | 
241 |       <div className={styles.version}>v{EXTENSION_VERSION}</div>
242 |     </div>
243 |   );
244 | };
245 | 
246 | export default Form;
247 | 


--------------------------------------------------------------------------------
/src/popup/Gear.tsx:
--------------------------------------------------------------------------------
 1 | import { h } from 'preact';
 2 | import { makeStyles } from '@material-ui/core/styles';
 3 | import GearSvg from '../../static/svgs/gear.svg';
 4 | import AccessibleButton from '../shared/AccessibleButton';
 5 | import Tooltip from '@material-ui/core/Tooltip';
 6 | 
 7 | const useStyles = makeStyles({
 8 |   root: {
 9 |     position: 'absolute',
10 |     zIndex: 2,
11 |     top: '10px',
12 |     right: '10px',
13 |     cursor: 'pointer',
14 |     width: '35px',
15 |     height: '35px',
16 |     padding: '5px',
17 |     '& svg': {
18 |       willChange: 'opacity, transform',
19 |       opacity: 0.7,
20 |       transition: 'all 0.3s ease-in-out',
21 |     },
22 |     '&:hover svg': {
23 |       transform: 'rotate(45deg)',
24 |       opacity: 1,
25 |     },
26 |   },
27 | });
28 | 
29 | const Gear = () => {
30 |   const styles = useStyles();
31 |   return (
32 |     <Tooltip title={'Open settings'} enterDelay={300}>
33 |       <AccessibleButton
34 |         className={styles.root}
35 |         onClick={() => chrome.runtime.openOptionsPage(() => window.close())}
36 |       >
37 |         <GearSvg />
38 |       </AccessibleButton>
39 |     </Tooltip>
40 |   );
41 | };
42 | 
43 | export default Gear;
44 | 


--------------------------------------------------------------------------------
/src/popup/PopupApp.tsx:
--------------------------------------------------------------------------------
 1 | import { h } from 'preact';
 2 | 
 3 | import Form from './Form';
 4 | import ReTitleThemeWrapper from '../shared/ReTitleThemeWrapper';
 5 | 
 6 | const PopupApp = () => {
 7 |   return (
 8 |     <ReTitleThemeWrapper>
 9 |       <Form />
10 |     </ReTitleThemeWrapper>
11 |   );
12 | };
13 | 
14 | export default PopupApp;
15 | 


--------------------------------------------------------------------------------
/src/popup/Revert.tsx:
--------------------------------------------------------------------------------
 1 | import { h } from 'preact';
 2 | import { makeStyles } from '@material-ui/core/styles';
 3 | import AccessibleButton from '../shared/AccessibleButton';
 4 | import ReplayIcon from '@material-ui/icons/Replay';
 5 | import Tooltip from '@material-ui/core/Tooltip';
 6 | 
 7 | const useStyles = makeStyles({
 8 |   root: {
 9 |     position: 'absolute',
10 |     zIndex: 2,
11 |     top: '10px',
12 |     right: '40px',
13 |     cursor: 'pointer',
14 |     width: '35px',
15 |     height: '35px',
16 |     padding: '5px',
17 |     color: '#ff3333',
18 |     '& svg': {
19 |       willChange: 'opacity, transform',
20 |       opacity: 0.7,
21 |       transition: 'all 0.3s ease-in-out',
22 |     },
23 |     '&:hover svg': {
24 |       transform: 'rotate(-45deg)',
25 |       opacity: 1,
26 |     },
27 |   },
28 | });
29 | 
30 | const Revert = ({ tabId }: { tabId: number }) => {
31 |   const styles = useStyles();
32 |   return (
33 |     <Tooltip title={'Restore original title temporarily'} enterDelay={300}>
34 |       <AccessibleButton
35 |         className={styles.root}
36 |         onClick={() =>
37 |           chrome.runtime.sendMessage({
38 |             type: 'revert',
39 |             tabId,
40 |           })
41 |         }
42 |       >
43 |         <ReplayIcon />
44 |       </AccessibleButton>
45 |     </Tooltip>
46 |   );
47 | };
48 | 
49 | export default Revert;
50 | 


--------------------------------------------------------------------------------
/src/popup/index.tsx:
--------------------------------------------------------------------------------
1 | import { h, render } from 'preact';
2 | import PopupApp from './PopupApp';
3 | 
4 | render(<PopupApp />, document.body);
5 | 


--------------------------------------------------------------------------------
/src/shared/AccessibleButton.tsx:
--------------------------------------------------------------------------------
 1 | import { h, JSX, FunctionComponent as FC } from 'preact';
 2 | import clsx from 'clsx';
 3 | import { makeStyles } from '@material-ui/core/styles';
 4 | 
 5 | const useStyles = makeStyles((theme) => ({
 6 |   root: {
 7 |     appearance: 'none',
 8 |     background: 'none',
 9 |     border: 'none',
10 | 
11 |     '&:hover': {
12 |       outline: 'none',
13 |     },
14 |     color: theme.palette.text.primary,
15 |   },
16 | }));
17 | 
18 | const AccessibleButton: FC<JSX.HTMLAttributes<HTMLButtonElement>> = ({
19 |   className,
20 |   ...rest
21 | }) => {
22 |   const styles = useStyles();
23 |   return <button className={clsx(styles.root, className)} {...rest} />;
24 | };
25 | 
26 | export default AccessibleButton;
27 | 


--------------------------------------------------------------------------------
/src/shared/ReTitleThemeWrapper.tsx:
--------------------------------------------------------------------------------
  1 | import { h } from 'preact';
  2 | import { FC, useState, useMemo, useEffect, useCallback } from 'preact/compat';
  3 | import {
  4 |   createMuiTheme,
  5 |   MuiThemeProvider,
  6 |   makeStyles,
  7 | } from '@material-ui/core/styles';
  8 | import CssBaseline from '@material-ui/core/CssBaseline';
  9 | import { StorageChanges, ThemeState } from './types';
 10 | import { KEY_THEME } from './utils';
 11 | import { getTheme } from './storageHandler';
 12 | 
 13 | const StyleFix = {
 14 |   overrides: {
 15 |     MuiTooltip: {
 16 |       tooltip: {
 17 |         fontSize: '14px',
 18 |       },
 19 |       tooltipPlacementBottom: {
 20 |         margin: '10px',
 21 |       },
 22 |     },
 23 |   },
 24 |   props: {
 25 |     MuiButtonBase: {
 26 |       disableRipple: true,
 27 |     },
 28 |   },
 29 | };
 30 | 
 31 | const lightTheme = createMuiTheme({
 32 |   palette: {
 33 |     type: 'light',
 34 |     primary: {
 35 |       main: '#688fe6',
 36 |     },
 37 |     secondary: {
 38 |       main: '#ec4fc4',
 39 |     },
 40 |   },
 41 |   ...StyleFix,
 42 | });
 43 | 
 44 | const darkTheme = createMuiTheme({
 45 |   palette: {
 46 |     type: 'dark',
 47 |     primary: {
 48 |       main: '#47bfff',
 49 |     },
 50 |     secondary: {
 51 |       main: '#ffaf47',
 52 |     },
 53 |   },
 54 |   ...StyleFix,
 55 | });
 56 | 
 57 | const globalStyles = makeStyles({
 58 |   '@global': {
 59 |     code: {
 60 |       display: 'inline-block',
 61 |       padding: '2px 5px',
 62 |       borderRadius: '5px',
 63 |       color: 'white',
 64 |       background: '#232323',
 65 |       margin: '0 3px',
 66 |       fontFamily: '"Menlo", "Lucida Console", monospace',
 67 |       fontSize: '0.8em',
 68 |     },
 69 |   },
 70 | });
 71 | 
 72 | const ReTitleThemeWrapper: FC = ({ children }) => {
 73 |   const [theme, setTheme] = useState<ThemeState>(
 74 |     // Using localStorage as cache since it is way faster than using the storage API
 75 |     (localStorage.getItem('theme') as ThemeState) || 'dark'
 76 |   );
 77 |   globalStyles();
 78 | 
 79 |   useEffect(() => {
 80 |     getTheme().then((storedTheme) => {
 81 |       if (storedTheme) {
 82 |         setTheme(storedTheme);
 83 |         localStorage.setItem('theme', storedTheme);
 84 |       }
 85 |     });
 86 |   }, []);
 87 | 
 88 |   const storageChangeHandler = useCallback((changes: StorageChanges) => {
 89 |     if (changes[KEY_THEME]) {
 90 |       const newTheme = changes[KEY_THEME].newValue;
 91 |       if (newTheme) {
 92 |         setTheme(newTheme);
 93 |         localStorage.setItem('theme', newTheme);
 94 |       }
 95 |     }
 96 |   }, []);
 97 | 
 98 |   useEffect(() => {
 99 |     chrome.storage.onChanged.addListener(storageChangeHandler);
100 |     return () => chrome.storage.onChanged.removeListener(storageChangeHandler);
101 |   }, [storageChangeHandler]);
102 |   return (
103 |     <MuiThemeProvider theme={theme === 'dark' ? darkTheme : lightTheme}>
104 |       <CssBaseline />
105 |       {children}
106 |     </MuiThemeProvider>
107 |   );
108 | };
109 | 
110 | export default ReTitleThemeWrapper;
111 | 


--------------------------------------------------------------------------------
/src/shared/RegexInput.tsx:
--------------------------------------------------------------------------------
 1 | import { h, JSX } from 'preact';
 2 | import { useState, useEffect } from 'preact/compat';
 3 | import { makeStyles } from '@material-ui/core/styles';
 4 | import TextField from '@material-ui/core/TextField';
 5 | 
 6 | const useStyles = makeStyles({
 7 |   root: {
 8 |     cursor: 'pointer',
 9 |     marginBottom: '10px',
10 |     marginRight: '40px',
11 |     wordBreak: 'break-all',
12 |   },
13 |   input: {
14 |     width: '100%',
15 |   },
16 | });
17 | 
18 | function useDebounce<T>(value: T, delayMillis: number) {
19 |   const [debouncedValue, setDebouncedValue] = useState(value);
20 |   useEffect(() => {
21 |     const timeoutId = setTimeout(() => {
22 |       setDebouncedValue(value);
23 |     }, delayMillis);
24 |     return () => {
25 |       clearTimeout(timeoutId);
26 |     };
27 |   }, [value, delayMillis]);
28 |   return debouncedValue;
29 | }
30 | 
31 | const RegexInput = ({
32 |   label,
33 |   setValidInputValue,
34 |   initialValue = '',
35 | }: {
36 |   label: string;
37 |   setValidInputValue: (value: string) => void;
38 |   initialValue?: string;
39 | }) => {
40 |   const styles = useStyles();
41 |   const [inputValue, setInputValue] = useState(initialValue);
42 |   const [error, setError] = useState('');
43 |   const debouncedInput = useDebounce(inputValue, 250);
44 | 
45 |   useEffect(() => {
46 |     try {
47 |       new RegExp(String.raw`${debouncedInput}`);
48 |       setError('');
49 |       setValidInputValue(debouncedInput);
50 |     } catch (e) {
51 |       setError(e.message);
52 |     }
53 |   }, [debouncedInput]);
54 | 
55 |   return (
56 |     <TextField
57 |       error
58 |       className={styles.input}
59 |       label={label}
60 |       value={inputValue}
61 |       onKeyPress={(e: any) => {
62 |         if (e.key === 'Enter' && !e.shiftKey) {
63 |           e.preventDefault();
64 |           e.target.blur();
65 |           return false;
66 |         }
67 |       }}
68 |       onChange={(e: any) => {
69 |         setInputValue(e.target.value);
70 |         setError('');
71 |       }}
72 |       onFocus={(e: any) => e.target.select()}
73 |       helperText={error}
74 |     />
75 |   );
76 | };
77 | 
78 | export default RegexInput;
79 | 


--------------------------------------------------------------------------------
/src/shared/RegexInputGroup.tsx:
--------------------------------------------------------------------------------
 1 | import { h, JSX } from 'preact';
 2 | import { useState, useEffect } from 'preact/compat';
 3 | import { makeStyles } from '@material-ui/core/styles';
 4 | import TextField from '@material-ui/core/TextField';
 5 | import RegexInput from './RegexInput';
 6 | 
 7 | const useStyles = makeStyles({
 8 |   root: {
 9 |     cursor: 'pointer',
10 |     marginBottom: '10px',
11 |     marginRight: '40px',
12 |     wordBreak: 'break-all',
13 |   },
14 |   input: {
15 |     width: '100%',
16 |   },
17 | });
18 | 
19 | const RegexInputGroup = ({
20 |   onChange,
21 |   initialValue = '',
22 | }: {
23 |   onChange: (value: string) => void;
24 |   initialValue?: string;
25 | }) => {
26 |   const styles = useStyles();
27 |   const [flag, setFlag] = useState(initialValue);
28 |   const [capRegex, setCapRegex] = useState(initialValue);
29 |   const [newRegex, setNewRegex] = useState(initialValue);
30 | 
31 |   const valid = /^[gimsuy]*$/.test(flag);
32 | 
33 |   useEffect(() => {
34 |     const constructed = `/${capRegex}/${newRegex}/${flag}`;
35 |     onChange(constructed);
36 |   }, [flag, capRegex, newRegex]);
37 |   return (
38 |     <div>
39 |       <RegexInput label="Capture Regex" setValidInputValue={setCapRegex} />
40 |       <RegexInput label="New Title Regex" setValidInputValue={setNewRegex} />
41 |       <TextField
42 |         error={!valid}
43 |         className={styles.input}
44 |         label={'Flags'}
45 |         value={flag}
46 |         onKeyPress={(e: any) => {
47 |           if (e.key === 'Enter' && !e.shiftKey) {
48 |             e.preventDefault();
49 |             e.target.blur();
50 |             return false;
51 |           }
52 |         }}
53 |         onChange={(e: any) => {
54 |           setFlag(e.target.value);
55 |         }}
56 |         onFocus={(e: any) => e.target.select()}
57 |         helperText={!valid && 'Acceptable flags: g and i'}
58 |       />
59 |     </div>
60 |   );
61 | };
62 | 
63 | export default RegexInputGroup;
64 | 


--------------------------------------------------------------------------------
/src/shared/injectedScripts.ts:
--------------------------------------------------------------------------------
 1 | import { TabOption } from './types';
 2 | 
 3 | export function injectTitle(newTitle: string, option: TabOption) {
 4 |   const META_OPTION = 'retitle:option';
 5 |   const META_ORIGINAL = 'retitle:original';
 6 |   const META_MODIFIED = 'retitle:modified';
 7 | 
 8 |   let headElement: HTMLHeadElement = document.head;
 9 |   if (!headElement) {
10 |     headElement = document.createElement('head');
11 |     const docEl = document.documentElement;
12 |     docEl.insertBefore(headElement, docEl.firstChild);
13 |   }
14 | 
15 |   function getOrCreateMeta(name: string, content: string): HTMLMetaElement {
16 |     let meta: HTMLMetaElement | null = document.querySelector(
17 |       `meta[name='${name}']`
18 |     );
19 |     if (!meta) {
20 |       meta = document.createElement('meta');
21 |       meta.setAttribute('name', name);
22 |       meta.setAttribute('content', content);
23 |       headElement.appendChild(meta);
24 |     }
25 |     return meta;
26 |   }
27 | 
28 |   const metaOption = getOrCreateMeta(META_OPTION, option);
29 |   const metaContent = metaOption.getAttribute('content');
30 |   if (metaContent !== option) {
31 |     metaOption.setAttribute('content', option);
32 |   }
33 | 
34 |   if (document.querySelector('head > title')) {
35 |     const metaOriginal = getOrCreateMeta(META_ORIGINAL, document.title);
36 |     if (newTitle.includes('$0')) {
37 |       // Make sure it doesn't use the cached old title and as an original title.
38 |       const originalTitle = metaOriginal.getAttribute('content');
39 |       if (originalTitle) {
40 |         newTitle = newTitle.replace('$0', originalTitle); // the first $0 turns into the previous title
41 |       }
42 |     }
43 |     document.title = newTitle;
44 |   } else {
45 |     const titleElement = document.createElement('title');
46 |     titleElement.appendChild(document.createTextNode(newTitle));
47 |     headElement.appendChild(titleElement);
48 |   }
49 | }
50 | 
51 | export function getCurrentOption() {
52 |   const META_OPTION = 'retitle:option';
53 |   const META_ORIGINAL = 'retitle:original';
54 |   const metaOption = document.querySelector(`meta[name='${META_OPTION}']`);
55 |   const metaOriginal = document.querySelector(`meta[name='${META_ORIGINAL}']`);
56 |   if (metaOption && metaOriginal) {
57 |     return [
58 |       metaOption.getAttribute('content'),
59 |       metaOriginal.getAttribute('content'),
60 |     ] as const;
61 |   }
62 |   return null;
63 | }
64 | 
65 | export function revertRetitle() {
66 |   const META_ORIGINAL = 'retitle:original';
67 |   const metaOriginal = document.querySelector(`meta[name='${META_ORIGINAL}']`);
68 |   if (metaOriginal) {
69 |     document.title = metaOriginal.getAttribute('content') || '';
70 |     document
71 |       .querySelectorAll('meta[name^="retitle"]')
72 |       .forEach((n) => n.parentNode?.removeChild(n));
73 |     return true;
74 |   }
75 |   return false;
76 | }
77 | 


--------------------------------------------------------------------------------
/src/shared/storageHandler.ts:
--------------------------------------------------------------------------------
  1 | import {
  2 |   KEY_THEME,
  3 |   KEY_DEFAULT_TAB_OPTION,
  4 |   KEY_CONTEXT_MENU,
  5 |   KEY_BOOKMARKS,
  6 |   PREFIX_TABLOCK,
  7 |   PREFIX_EXACT,
  8 |   PREFIX_DOMAIN,
  9 |   PREFIX_REGEX,
 10 |   extractDomain,
 11 |   PREFIX_CONTAINER,
 12 | } from './utils';
 13 | import type {
 14 |   ThemeState,
 15 |   TabOption,
 16 |   StorageChanges,
 17 |   TabLockTitle,
 18 |   DomainTitle,
 19 |   RegexTitle,
 20 |   ExactTitle,
 21 |   StoredTitle,
 22 |   NewTitle,
 23 |   TitleOptions,
 24 |   StorageAction,
 25 | } from './types';
 26 | import {
 27 |   getAllSyncItems,
 28 |   getAllLocalItems,
 29 |   getLocalItems,
 30 |   getLocalItem,
 31 |   setLocalItem,
 32 |   setSyncItem,
 33 |   removeLocalItems,
 34 |   GeneralStorageType,
 35 | } from './storageUtils';
 36 | 
 37 | /**
 38 |  * Get all titles and call title setters
 39 |  */
 40 | export async function initTitles({
 41 |   onTablockChange,
 42 |   onExactChange,
 43 |   onDomainChange,
 44 |   onRegexChange,
 45 | }: {
 46 |   onTablockChange?: (action: StorageAction, tabLock: TabLockTitle) => void;
 47 |   onExactChange?: (action: StorageAction, exact: ExactTitle) => void;
 48 |   onDomainChange?: (action: StorageAction, domain: DomainTitle) => void;
 49 |   onRegexChange?: (action: StorageAction, regex: RegexTitle) => void;
 50 | }) {
 51 |   const callHandlers = (items: GeneralStorageType) => {
 52 |     for (const titleKey of Object.keys(items)) {
 53 |       const newTitle = items[titleKey] as StoredTitle;
 54 |       switch (newTitle?.option) {
 55 |         case 'tablock':
 56 |           onTablockChange?.('add', newTitle);
 57 |           break;
 58 |         case 'exact':
 59 |           onExactChange?.('add', newTitle);
 60 |           break;
 61 |         case 'domain':
 62 |           onDomainChange?.('add', newTitle);
 63 |           break;
 64 |         case 'regex':
 65 |           onRegexChange?.('add', newTitle);
 66 |           break;
 67 |       }
 68 |     }
 69 |   };
 70 |   callHandlers(await getAllSyncItems());
 71 |   const localItems = await getAllLocalItems();
 72 |   delete localItems[KEY_DEFAULT_TAB_OPTION];
 73 |   delete localItems[KEY_THEME];
 74 |   callHandlers(localItems);
 75 | }
 76 | 
 77 | interface AllOptions extends GeneralStorageType {
 78 |   [KEY_THEME]: ThemeState;
 79 |   [KEY_DEFAULT_TAB_OPTION]: TabOption;
 80 |   [KEY_CONTEXT_MENU]: boolean;
 81 | }
 82 | 
 83 | // Get all user options
 84 | export async function getOptions(): Promise<AllOptions> {
 85 |   return getLocalItems<AllOptions>([
 86 |     KEY_THEME,
 87 |     KEY_DEFAULT_TAB_OPTION,
 88 |     KEY_CONTEXT_MENU,
 89 |   ]);
 90 | }
 91 | 
 92 | // Get theme option
 93 | export async function getTheme(): Promise<ThemeState> {
 94 |   return (await getLocalItem(KEY_THEME)) || 'dark';
 95 | }
 96 | 
 97 | // Get default tab option
 98 | export async function getDefaultOption(): Promise<TabOption> {
 99 |   return (await getLocalItem(KEY_DEFAULT_TAB_OPTION)) || 'onetime';
100 | }
101 | 
102 | // Get context menu option
103 | export async function getContextMenuOption(): Promise<boolean> {
104 |   return Boolean(await getLocalItem(KEY_CONTEXT_MENU));
105 | }
106 | 
107 | // Set theme option
108 | export function setTheme(theme: ThemeState) {
109 |   return setLocalItem(KEY_THEME, theme);
110 | }
111 | 
112 | // Set default tab option
113 | export function setDefaultOption(option: TabOption) {
114 |   return setLocalItem(KEY_DEFAULT_TAB_OPTION, option);
115 | }
116 | 
117 | // Set context menu option
118 | export function setContextMenuOption(option: boolean) {
119 |   return setLocalItem(KEY_CONTEXT_MENU, option);
120 | }
121 | 
122 | // Set title matcher
123 | export function setSyncTitle(key: string, value: StoredTitle) {
124 |   return setSyncItem(key, value);
125 | }
126 | 
127 | // Set title matcher in local storage
128 | export function setLocalTitle(key: string, value: StoredTitle) {
129 |   return setLocalItem(key, value);
130 | }
131 | 
132 | export const storageChangeHandler = ({
133 |   onThemeChange,
134 |   onDefaultOptionChange,
135 |   onTablockChange,
136 |   onExactChange,
137 |   onDomainChange,
138 |   onRegexChange,
139 | }: {
140 |   onThemeChange?: (theme: ThemeState) => void;
141 |   onDefaultOptionChange?: (defaultOption: TabOption) => void;
142 |   onTablockChange?: (action: StorageAction, tabLock: TabLockTitle) => void;
143 |   onExactChange?: (action: StorageAction, exact: ExactTitle) => void;
144 |   onDomainChange?: (action: StorageAction, domain: DomainTitle) => void;
145 |   onRegexChange?: (action: StorageAction, regex: RegexTitle) => void;
146 | }) => (changes: StorageChanges) => {
147 |   if (changes[KEY_THEME]) {
148 |     onThemeChange?.(changes[KEY_THEME].newValue);
149 |   }
150 |   if (changes[KEY_DEFAULT_TAB_OPTION]) {
151 |     onDefaultOptionChange?.(changes[KEY_DEFAULT_TAB_OPTION].newValue);
152 |   }
153 |   delete changes[KEY_THEME];
154 |   delete changes[KEY_DEFAULT_TAB_OPTION];
155 | 
156 |   for (const changeKey of Object.keys(changes)) {
157 |     let action: StorageAction = 'edit';
158 |     const oldValue: StoredTitle | undefined = changes[changeKey].oldValue;
159 |     let newValue: StoredTitle | undefined = changes[changeKey].newValue;
160 |     if (!oldValue) {
161 |       action = 'add';
162 |     }
163 |     if (!newValue) {
164 |       action = 'remove';
165 |       newValue = oldValue!;
166 |     }
167 | 
168 |     switch (newValue.option) {
169 |       case 'tablock':
170 |         onTablockChange?.(action, newValue);
171 |         break;
172 |       case 'exact':
173 |         onExactChange?.(action, newValue);
174 |         break;
175 |       case 'domain':
176 |         onDomainChange?.(action, newValue);
177 |         break;
178 |       case 'regex':
179 |         onRegexChange?.(action, newValue);
180 |         break;
181 |     }
182 |   }
183 | };
184 | 
185 | export function saveTitle(
186 |   newTitle: NewTitle,
187 |   tabOption: TabOption,
188 |   currentTab: chrome.tabs.Tab,
189 |   options?: TitleOptions & { [key: string]: any }
190 | ): Promise<void> {
191 |   const url = currentTab.url;
192 |   switch (tabOption) {
193 |     case 'tablock': {
194 |       return TablockRule.save(currentTab.id!, newTitle, options);
195 |     }
196 |     case 'exact': {
197 |       return ExactRule.save(url!, newTitle, options);
198 |     }
199 |     case 'domain': {
200 |       const urlDomain = extractDomain(url);
201 |       return DomainRule.save(urlDomain, newTitle, options);
202 |     }
203 |     case 'regex': {
204 |       const { urlPattern, ...rest } = options as TitleOptions & {
205 |         urlPattern: string;
206 |       };
207 |       return RegexRule.save(urlPattern, newTitle, rest);
208 |     }
209 |   }
210 |   return new Promise(() => {});
211 | }
212 | 
213 | export class TablockRule {
214 |   static option = 'tablock' as TabOption;
215 |   static generateKey(tabId: number) {
216 |     return `${PREFIX_TABLOCK}${tabId}`;
217 |   }
218 |   static equals(t1: TabLockTitle, t2: TabLockTitle) {
219 |     return t1.tabId === t2.tabId;
220 |   }
221 |   static save(tabId: number, newTitle: NewTitle, options?: TitleOptions) {
222 |     return setLocalTitle(TablockRule.generateKey(tabId), {
223 |       option: 'tablock',
224 |       tabId,
225 |       newTitle,
226 |       ...options,
227 |     });
228 |   }
229 |   static remove(tabId: number) {
230 |     return removeLocalItems(TablockRule.generateKey(tabId));
231 |   }
232 | }
233 | 
234 | export class ExactRule {
235 |   static option = 'exact' as TabOption;
236 |   static generateKey(url: string, containerId?: string) {
237 |     return `${
238 |       containerId ? `${PREFIX_CONTAINER}${containerId}|` : ''
239 |     }${PREFIX_EXACT}${url}`;
240 |   }
241 |   static equals(t1: ExactTitle, t2: ExactTitle) {
242 |     return t1.url === t2.url && t1.containerId === t2.containerId;
243 |   }
244 |   static save(url: string, newTitle: NewTitle, options?: TitleOptions) {
245 |     return setSyncTitle(ExactRule.generateKey(url, options?.containerId), {
246 |       option: 'exact',
247 |       url,
248 |       newTitle,
249 |       ...options,
250 |     });
251 |   }
252 |   static remove(url: string, containerId?: string) {
253 |     return removeLocalItems(ExactRule.generateKey(url, containerId));
254 |   }
255 | }
256 | 
257 | export class DomainRule {
258 |   static option = 'domain' as TabOption;
259 |   static generateKey(domain: string, containerId?: string) {
260 |     return `${
261 |       containerId ? `${PREFIX_CONTAINER}${containerId}|` : ''
262 |     }${PREFIX_DOMAIN}${domain}`;
263 |   }
264 |   static save(domain: string, newTitle: NewTitle, options?: TitleOptions) {
265 |     return setSyncTitle(DomainRule.generateKey(domain, options?.containerId), {
266 |       option: 'domain',
267 |       domain,
268 |       newTitle,
269 |       ...options,
270 |     });
271 |   }
272 |   static remove(domain: string, containerId?: string) {
273 |     return removeLocalItems(DomainRule.generateKey(domain, containerId));
274 |   }
275 | }
276 | 
277 | export class RegexRule {
278 |   static option = 'regex' as TabOption;
279 |   static generateKey(regex: string, containerId?: string) {
280 |     return `${
281 |       containerId ? `${PREFIX_CONTAINER}${containerId}|` : ''
282 |     }${PREFIX_REGEX}${regex}`;
283 |   }
284 |   static save(urlPattern: string, newTitle: NewTitle, options?: TitleOptions) {
285 |     return setSyncTitle(
286 |       RegexRule.generateKey(urlPattern, options?.containerId),
287 |       {
288 |         option: 'regex',
289 |         urlPattern,
290 |         newTitle,
291 |         ...options,
292 |       }
293 |     );
294 |   }
295 |   static remove(regex: string, containerId?: string) {
296 |     return removeLocalItems(RegexRule.generateKey(regex, containerId));
297 |   }
298 | }
299 | 


--------------------------------------------------------------------------------
/src/shared/storageUtils.ts:
--------------------------------------------------------------------------------
  1 | export type GeneralStorageType = { [key: string]: unknown };
  2 | 
  3 | type StorageArea = 'sync' | 'local';
  4 | 
  5 | async function getStorage<T = GeneralStorageType>(
  6 |   area: StorageArea,
  7 |   transformer: (items: GeneralStorageType) => T,
  8 |   keys?: string | string[]
  9 | ): Promise<T> {
 10 |   if (BROWSER === 'firefox') {
 11 |     return transformer(await browser.storage[area].get(keys));
 12 |   }
 13 |   return new Promise((resolve) => {
 14 |     chrome.storage[area].get(keys || null, (items?: GeneralStorageType) => {
 15 |       resolve(transformer?.(items || {}));
 16 |     });
 17 |   });
 18 | }
 19 | 
 20 | async function modifyStorage(
 21 |   area: StorageArea,
 22 |   method: 'set',
 23 |   keys: GeneralStorageType
 24 | ): Promise<void>;
 25 | async function modifyStorage(
 26 |   area: StorageArea,
 27 |   method: 'remove',
 28 |   keys: string | string[]
 29 | ): Promise<void>;
 30 | 
 31 | async function modifyStorage(
 32 |   area: StorageArea,
 33 |   method: 'set' | 'remove',
 34 |   keys: string | string[] | GeneralStorageType
 35 | ) {
 36 |   if (BROWSER === 'firefox') {
 37 |     return browser.storage[area][method](keys as any);
 38 |   }
 39 |   return new Promise((resolve) => {
 40 |     chrome.storage[area][method](keys as any, resolve);
 41 |   });
 42 | }
 43 | 
 44 | /**
 45 |  * Get all items
 46 |  */
 47 | export function getAllSyncItems(): Promise<GeneralStorageType> {
 48 |   return getStorage('sync', (i) => i);
 49 | }
 50 | 
 51 | export function getAllLocalItems(): Promise<GeneralStorageType> {
 52 |   return getStorage('local', (i) => i);
 53 | }
 54 | 
 55 | /**
 56 |  * Get a single item with the key null otherwise
 57 |  */
 58 | export function getSyncItem<T = unknown>(key: string): Promise<T | null> {
 59 |   return getStorage('sync', (items) => (items[key] as T) || null, key);
 60 | }
 61 | 
 62 | export function getLocalItem<T = unknown>(key: string): Promise<T | null> {
 63 |   return getStorage('local', (items) => (items[key] as T) || null, key);
 64 | }
 65 | 
 66 | /**
 67 |  * Get items with multiple keys
 68 |  */
 69 | export function getSyncItems<T extends GeneralStorageType>(
 70 |   keys: string[]
 71 | ): Promise<T> {
 72 |   return getStorage('sync', (i) => i as T, keys);
 73 | }
 74 | export function getLocalItems<T extends GeneralStorageType>(
 75 |   keys: string[]
 76 | ): Promise<T> {
 77 |   return getStorage('local', (i) => i as T, keys);
 78 | }
 79 | 
 80 | /**
 81 |  * Set a key value pair
 82 |  */
 83 | export function setSyncItem(key: string, value: any): Promise<void> {
 84 |   return modifyStorage('sync', 'set', { [key]: value });
 85 | }
 86 | 
 87 | export function setLocalItem(key: string, value: any): Promise<void> {
 88 |   return modifyStorage('local', 'set', { [key]: value });
 89 | }
 90 | 
 91 | /**
 92 |  * Set key value pairs
 93 |  */
 94 | export function setSyncItems(items: Record<string, any>): Promise<void> {
 95 |   return modifyStorage('sync', 'set', items);
 96 | }
 97 | export function setLocalItems(items: Record<string, any>): Promise<void> {
 98 |   return modifyStorage('local', 'set', items);
 99 | }
100 | 
101 | /**
102 |  * Remove items with the specified keys
103 |  */
104 | export function removeSyncItems(keys: string | string[]): Promise<void> {
105 |   return modifyStorage('sync', 'remove', keys);
106 | }
107 | 
108 | export function removeLocalItems(keys: string | string[]): Promise<void> {
109 |   return modifyStorage('local', 'remove', keys);
110 | }
111 | 


--------------------------------------------------------------------------------
/src/shared/types.ts:
--------------------------------------------------------------------------------
 1 | export type TabOption = 'onetime' | 'tablock' | 'exact' | 'domain' | 'regex';
 2 | export type ThemeState = 'light' | 'dark';
 3 | export type ReplacerType = 'url' | 'title' | 'function';
 4 | 
 5 | export interface StorageChanges {
 6 |   [key: string]: chrome.storage.StorageChange;
 7 | }
 8 | 
 9 | export type NewTitleFunc = {
10 |   replacerType: 'function';
11 |   func: string;
12 | };
13 | 
14 | export type NewTitleRegex = {
15 |   replacerType: 'url' | 'title';
16 |   captureRegex: string;
17 |   titleRegex: string;
18 |   flags: string;
19 | };
20 | 
21 | export type NewTitle = string | NewTitleRegex | NewTitleFunc;
22 | 
23 | // Optional settings for titles
24 | export interface TitleOptions {
25 |   name?: string; // Optional human readable name. Default to the storage key
26 |   disabled?: boolean; // Temporarily Disabled
27 |   containerId?: string; // Container ID if used
28 | }
29 | 
30 | export interface BaseTitle extends TitleOptions {
31 |   option: TabOption;
32 |   newTitle: NewTitle; // empty string is allowed. Use null to delete
33 | }
34 | 
35 | export interface TabLockTitle extends BaseTitle {
36 |   option: 'tablock';
37 |   tabId: number;
38 | }
39 | 
40 | export interface ExactTitle extends BaseTitle {
41 |   option: 'exact';
42 |   url: string;
43 |   ignoreParams?: boolean; // Ignore URL params like # & ?
44 | }
45 | 
46 | export interface DomainTitle extends BaseTitle {
47 |   option: 'domain';
48 |   domain: string;
49 |   allowSubdomains?: boolean; // Allow subdomains or not
50 | }
51 | 
52 | export interface RegexTitle extends BaseTitle {
53 |   option: 'regex';
54 |   urlPattern: string; // RegExp pattern to match URLs. Capturing doesn't matter here
55 | }
56 | 
57 | export type CustomFunction = (originalTitle: string, url: string) => string;
58 | 
59 | export type StoredTitle = TabLockTitle | ExactTitle | DomainTitle | RegexTitle;
60 | 
61 | export type StorageAction = 'add' | 'remove' | 'edit';
62 | 
63 | export interface RenameRequest {
64 |   type: 'rename';
65 |   tabId: number;
66 |   oldTitle: string;
67 |   newTitle: NewTitle;
68 |   option: TabOption;
69 | }
70 | 
71 | export interface RevertRequest {
72 |   type: 'revert';
73 |   tabId: number;
74 | }
75 | 
76 | export type RuntimeMessageRequest = RenameRequest | RevertRequest;
77 | 


--------------------------------------------------------------------------------
/src/shared/utils.ts:
--------------------------------------------------------------------------------
 1 | // Unique storage keys for options
 2 | export const KEY_DEFAULT_TAB_OPTION = 'OptDefault';
 3 | export const KEY_THEME = 'OptTheme';
 4 | export const KEY_CONTEXT_MENU = 'OptContextMenu';
 5 | export const KEY_BOOKMARKS = 'OptBookmarks';
 6 | 
 7 | // Title matcher prefixes
 8 | export const PREFIX_CONTAINER = 'Gr:'; // Comes before other prefixes. Gr:google|Exact:http://example.com
 9 | export const PREFIX_ONETIME = 'Temp#'; // Temp#5:http://example.com/page/1
10 | export const PREFIX_TABLOCK = 'Tab#'; // Tab#13:http://example.com/page/1
11 | export const PREFIX_EXACT = 'Exact:'; // Exact:http://example.com/page/1
12 | export const PREFIX_DOMAIN = 'Domain:'; // Domain:www.example.com
13 | export const PREFIX_REGEX = 'Regex:'; // Regex:^exampl.*\.com
14 | 
15 | // Regex
16 | export const REGEX_FULL_DOMAIN = /https?:\/\/([^\s/]+)(?:$|\/)/; // http://some.example.com/ => some.example.com
17 | export const VALID_REGEX = /^\/((?:[^/]|\\\/)+)\/((?:[^/]|\\\/)+)\/(gi?|ig?)?$/;
18 | 
19 | export function extractDomain(url?: string) {
20 |   if (url) {
21 |     const domainMatch = url.match(REGEX_FULL_DOMAIN);
22 |     if (domainMatch) {
23 |       const domain = domainMatch[1];
24 |       const subDomains = domain.split('.').reverse();
25 |       const depths = subDomains.reduce((prev: string[], curr) => {
26 |         const last = prev[prev.length - 1];
27 |         if (last) {
28 |           const partialDomain = `${curr}.${last}`;
29 |           return [...prev, partialDomain];
30 |         } else {
31 |           return [curr];
32 |         }
33 |       }, []); // some.example.com => ['com', 'example.com', 'some.example.com']
34 |       console.log(depths);
35 |       return domain;
36 |     }
37 |   }
38 |   return '';
39 | }
40 | 
41 | export function createContextMenu() {
42 |   chrome.contextMenus.create({
43 |     id: 'selection-ctxmnu',
44 |     title: 'Set a temporary title',
45 |     contexts: ['selection', 'page', 'tab'],
46 |   });
47 | }
48 | 


--------------------------------------------------------------------------------
/static/icons/icon128.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Lazyuki/ReTitle/42acfafe4c7b7c56d5ad1cd098ba50e6c07768c3/static/icons/icon128.png


--------------------------------------------------------------------------------
/static/icons/icon16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Lazyuki/ReTitle/42acfafe4c7b7c56d5ad1cd098ba50e6c07768c3/static/icons/icon16.png


--------------------------------------------------------------------------------
/static/icons/icon256.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Lazyuki/ReTitle/42acfafe4c7b7c56d5ad1cd098ba50e6c07768c3/static/icons/icon256.png


--------------------------------------------------------------------------------
/static/icons/icon32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Lazyuki/ReTitle/42acfafe4c7b7c56d5ad1cd098ba50e6c07768c3/static/icons/icon32.png


--------------------------------------------------------------------------------
/static/icons/icon512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Lazyuki/ReTitle/42acfafe4c7b7c56d5ad1cd098ba50e6c07768c3/static/icons/icon512.png


--------------------------------------------------------------------------------
/static/icons/icon64.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Lazyuki/ReTitle/42acfafe4c7b7c56d5ad1cd098ba50e6c07768c3/static/icons/icon64.png


--------------------------------------------------------------------------------
/static/options.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>ReTitle Settings</title>
 5 |     <link rel="shortcut icon" type="image/png" href="icons/icon32.png" />
 6 |     <meta charset="UTF-8" />
 7 |   </head>
 8 | 
 9 |   <body>
10 |     <script src="options.js"></script>
11 |   </body>
12 | </html>
13 | 


--------------------------------------------------------------------------------
/static/popup.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |   <head>
 4 |     <title>ReTitle Popup</title>
 5 |     <meta charset="UTF-8" />
 6 |   </head>
 7 | 
 8 |   <body>
 9 |     <script src="popup.js"></script>
10 |   </body>
11 | </html>
12 | 


--------------------------------------------------------------------------------
/static/svgs/chrome.svg:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 176 176">
 2 |   <defs>
 3 |     <clipPath id="a">
 4 |       <circle cx="88" cy="88" r="88" fill="none"/>
 5 |     </clipPath>
 6 |   </defs>
 7 |   <g clip-path="url(#a)">
 8 |     <path d="M14,0V108H53.4L88,48h88V0Z" fill="#db4437"/>
 9 |     <path d="M0,176H83.8l38.9-38.9V108H53.3L0,16.5Z" fill="#0f9d58"/>
10 |     <path d="M88,48l34.6,60L83.7,176H176V48Z" fill="#ffcd40"/>
11 |     <circle cx="88" cy="88" r="40" fill="#f1f1f1"/>
12 |     <circle cx="88" cy="88" r="32" fill="#4285f4"/>
13 |   </g>
14 | </svg>


--------------------------------------------------------------------------------
/static/svgs/firefox.svg:
--------------------------------------------------------------------------------
  1 | <svg
  2 |    xmlns="http://www.w3.org/2000/svg"
  3 |    version="1.1"
  4 |    viewBox="0 0 87.418564 81.96698">
  5 |   <defs
  6 |      id="defs978">
  7 |     <linearGradient
  8 |        gradientTransform="translate(3.7,-0.0040855)"
  9 |        gradientUnits="userSpaceOnUse"
 10 |        y2="74.468002"
 11 |        x2="6.447"
 12 |        y1="12.393"
 13 |        x1="70.786003"
 14 |        id="a">
 15 |       <stop
 16 |          id="stop834"
 17 |          stop-color="#fff44f"
 18 |          offset=".048" />
 19 |       <stop
 20 |          id="stop836"
 21 |          stop-color="#ffe847"
 22 |          offset=".111" />
 23 |       <stop
 24 |          id="stop838"
 25 |          stop-color="#ffc830"
 26 |          offset=".225" />
 27 |       <stop
 28 |          id="stop840"
 29 |          stop-color="#ff980e"
 30 |          offset=".368" />
 31 |       <stop
 32 |          id="stop842"
 33 |          stop-color="#ff8b16"
 34 |          offset=".401" />
 35 |       <stop
 36 |          id="stop844"
 37 |          stop-color="#ff672a"
 38 |          offset=".462" />
 39 |       <stop
 40 |          id="stop846"
 41 |          stop-color="#ff3647"
 42 |          offset=".534" />
 43 |       <stop
 44 |          id="stop848"
 45 |          stop-color="#e31587"
 46 |          offset=".705" />
 47 |     </linearGradient>
 48 |     <radialGradient
 49 |        gradientUnits="userSpaceOnUse"
 50 |        gradientTransform="translate(7978.7,8523.9959)"
 51 |        r="80.796997"
 52 |        cy="-8515.1211"
 53 |        cx="-7907.187"
 54 |        id="b">
 55 |       <stop
 56 |          id="stop851"
 57 |          stop-color="#ffbd4f"
 58 |          offset=".129" />
 59 |       <stop
 60 |          id="stop853"
 61 |          stop-color="#ffac31"
 62 |          offset=".186" />
 63 |       <stop
 64 |          id="stop855"
 65 |          stop-color="#ff9d17"
 66 |          offset=".247" />
 67 |       <stop
 68 |          id="stop857"
 69 |          stop-color="#ff980e"
 70 |          offset=".283" />
 71 |       <stop
 72 |          id="stop859"
 73 |          stop-color="#ff563b"
 74 |          offset=".403" />
 75 |       <stop
 76 |          id="stop861"
 77 |          stop-color="#ff3750"
 78 |          offset=".467" />
 79 |       <stop
 80 |          id="stop863"
 81 |          stop-color="#f5156c"
 82 |          offset=".71" />
 83 |       <stop
 84 |          id="stop865"
 85 |          stop-color="#eb0878"
 86 |          offset=".782" />
 87 |       <stop
 88 |          id="stop867"
 89 |          stop-color="#e50080"
 90 |          offset=".86" />
 91 |     </radialGradient>
 92 |     <radialGradient
 93 |        gradientUnits="userSpaceOnUse"
 94 |        gradientTransform="translate(7978.7,8523.9959)"
 95 |        r="80.796997"
 96 |        cy="-8482.0889"
 97 |        cx="-7936.7109"
 98 |        id="c">
 99 |       <stop
100 |          id="stop870"
101 |          stop-color="#960e18"
102 |          offset=".3" />
103 |       <stop
104 |          id="stop872"
105 |          stop-opacity=".74"
106 |          stop-color="#b11927"
107 |          offset=".351" />
108 |       <stop
109 |          id="stop874"
110 |          stop-opacity=".343"
111 |          stop-color="#db293d"
112 |          offset=".435" />
113 |       <stop
114 |          id="stop876"
115 |          stop-opacity=".094"
116 |          stop-color="#f5334b"
117 |          offset=".497" />
118 |       <stop
119 |          id="stop878"
120 |          stop-opacity="0"
121 |          stop-color="#ff3750"
122 |          offset=".53" />
123 |     </radialGradient>
124 |     <radialGradient
125 |        gradientUnits="userSpaceOnUse"
126 |        gradientTransform="translate(7978.7,8523.9959)"
127 |        r="58.534"
128 |        cy="-8533.457"
129 |        cx="-7926.9702"
130 |        id="d">
131 |       <stop
132 |          id="stop881"
133 |          stop-color="#fff44f"
134 |          offset=".132" />
135 |       <stop
136 |          id="stop883"
137 |          stop-color="#ffdc3e"
138 |          offset=".252" />
139 |       <stop
140 |          id="stop885"
141 |          stop-color="#ff9d12"
142 |          offset=".506" />
143 |       <stop
144 |          id="stop887"
145 |          stop-color="#ff980e"
146 |          offset=".526" />
147 |     </radialGradient>
148 |     <radialGradient
149 |        gradientUnits="userSpaceOnUse"
150 |        gradientTransform="translate(7978.7,8523.9959)"
151 |        r="38.471001"
152 |        cy="-8460.9844"
153 |        cx="-7945.6479"
154 |        id="e">
155 |       <stop
156 |          id="stop890"
157 |          stop-color="#3a8ee6"
158 |          offset=".353" />
159 |       <stop
160 |          id="stop892"
161 |          stop-color="#5c79f0"
162 |          offset=".472" />
163 |       <stop
164 |          id="stop894"
165 |          stop-color="#9059ff"
166 |          offset=".669" />
167 |       <stop
168 |          id="stop896"
169 |          stop-color="#c139e6"
170 |          offset="1" />
171 |     </radialGradient>
172 |     <radialGradient
173 |        gradientUnits="userSpaceOnUse"
174 |        gradientTransform="matrix(0.972,-0.235,0.275,1.138,10095.002,7833.7939)"
175 |        r="20.396999"
176 |        cy="-8491.5459"
177 |        cx="-7935.6201"
178 |        id="f">
179 |       <stop
180 |          id="stop899"
181 |          stop-opacity="0"
182 |          stop-color="#9059ff"
183 |          offset=".206" />
184 |       <stop
185 |          id="stop901"
186 |          stop-opacity=".064"
187 |          stop-color="#8c4ff3"
188 |          offset=".278" />
189 |       <stop
190 |          id="stop903"
191 |          stop-opacity=".45"
192 |          stop-color="#7716a8"
193 |          offset=".747" />
194 |       <stop
195 |          id="stop905"
196 |          stop-opacity=".6"
197 |          stop-color="#6e008b"
198 |          offset=".975" />
199 |     </radialGradient>
200 |     <radialGradient
201 |        gradientUnits="userSpaceOnUse"
202 |        gradientTransform="translate(7978.7,8523.9959)"
203 |        r="27.676001"
204 |        cy="-8518.4268"
205 |        cx="-7937.731"
206 |        id="g">
207 |       <stop
208 |          id="stop908"
209 |          stop-color="#ffe226"
210 |          offset="0" />
211 |       <stop
212 |          id="stop910"
213 |          stop-color="#ffdb27"
214 |          offset=".121" />
215 |       <stop
216 |          id="stop912"
217 |          stop-color="#ffc82a"
218 |          offset=".295" />
219 |       <stop
220 |          id="stop914"
221 |          stop-color="#ffa930"
222 |          offset=".502" />
223 |       <stop
224 |          id="stop916"
225 |          stop-color="#ff7e37"
226 |          offset=".732" />
227 |       <stop
228 |          id="stop918"
229 |          stop-color="#ff7139"
230 |          offset=".792" />
231 |     </radialGradient>
232 |     <radialGradient
233 |        gradientUnits="userSpaceOnUse"
234 |        gradientTransform="translate(7978.7,8523.9959)"
235 |        r="118.081"
236 |        cy="-8535.9814"
237 |        cx="-7915.9771"
238 |        id="h">
239 |       <stop
240 |          id="stop921"
241 |          stop-color="#fff44f"
242 |          offset=".113" />
243 |       <stop
244 |          id="stop923"
245 |          stop-color="#ff980e"
246 |          offset=".456" />
247 |       <stop
248 |          id="stop925"
249 |          stop-color="#ff5634"
250 |          offset=".622" />
251 |       <stop
252 |          id="stop927"
253 |          stop-color="#ff3647"
254 |          offset=".716" />
255 |       <stop
256 |          id="stop929"
257 |          stop-color="#e31587"
258 |          offset=".904" />
259 |     </radialGradient>
260 |     <radialGradient
261 |        gradientUnits="userSpaceOnUse"
262 |        gradientTransform="matrix(0.105,0.995,-0.653,0.069,-4680.304,8470.1869)"
263 |        r="86.499001"
264 |        cy="-8522.8594"
265 |        cx="-7927.165"
266 |        id="i">
267 |       <stop
268 |          id="stop932"
269 |          stop-color="#fff44f"
270 |          offset="0" />
271 |       <stop
272 |          id="stop934"
273 |          stop-color="#ffe847"
274 |          offset=".06" />
275 |       <stop
276 |          id="stop936"
277 |          stop-color="#ffc830"
278 |          offset=".168" />
279 |       <stop
280 |          id="stop938"
281 |          stop-color="#ff980e"
282 |          offset=".304" />
283 |       <stop
284 |          id="stop940"
285 |          stop-color="#ff8b16"
286 |          offset=".356" />
287 |       <stop
288 |          id="stop942"
289 |          stop-color="#ff672a"
290 |          offset=".455" />
291 |       <stop
292 |          id="stop944"
293 |          stop-color="#ff3647"
294 |          offset=".57" />
295 |       <stop
296 |          id="stop946"
297 |          stop-color="#e31587"
298 |          offset=".737" />
299 |     </radialGradient>
300 |     <radialGradient
301 |        gradientUnits="userSpaceOnUse"
302 |        gradientTransform="translate(7978.7,8523.9959)"
303 |        r="73.720001"
304 |        cy="-8508.1758"
305 |        cx="-7938.3828"
306 |        id="j">
307 |       <stop
308 |          id="stop949"
309 |          stop-color="#fff44f"
310 |          offset=".137" />
311 |       <stop
312 |          id="stop951"
313 |          stop-color="#ff980e"
314 |          offset=".48" />
315 |       <stop
316 |          id="stop953"
317 |          stop-color="#ff5634"
318 |          offset=".592" />
319 |       <stop
320 |          id="stop955"
321 |          stop-color="#ff3647"
322 |          offset=".655" />
323 |       <stop
324 |          id="stop957"
325 |          stop-color="#e31587"
326 |          offset=".904" />
327 |     </radialGradient>
328 |     <radialGradient
329 |        gradientUnits="userSpaceOnUse"
330 |        gradientTransform="translate(7978.7,8523.9959)"
331 |        r="80.685997"
332 |        cy="-8503.8613"
333 |        cx="-7918.9229"
334 |        id="k">
335 |       <stop
336 |          id="stop960"
337 |          stop-color="#fff44f"
338 |          offset=".094" />
339 |       <stop
340 |          id="stop962"
341 |          stop-color="#ffe141"
342 |          offset=".231" />
343 |       <stop
344 |          id="stop964"
345 |          stop-color="#ffaf1e"
346 |          offset=".509" />
347 |       <stop
348 |          id="stop966"
349 |          stop-color="#ff980e"
350 |          offset=".626" />
351 |     </radialGradient>
352 |     <linearGradient
353 |        gradientTransform="translate(3.7,-0.0040855)"
354 |        gradientUnits="userSpaceOnUse"
355 |        y2="66.806"
356 |        x2="15.267"
357 |        y1="12.061"
358 |        x1="70.013"
359 |        id="l">
360 |       <stop
361 |          id="stop969"
362 |          stop-opacity=".8"
363 |          stop-color="#fff44f"
364 |          offset=".167" />
365 |       <stop
366 |          id="stop971"
367 |          stop-opacity=".634"
368 |          stop-color="#fff44f"
369 |          offset=".266" />
370 |       <stop
371 |          id="stop973"
372 |          stop-opacity=".217"
373 |          stop-color="#fff44f"
374 |          offset=".489" />
375 |       <stop
376 |          id="stop975"
377 |          stop-opacity="0"
378 |          stop-color="#fff44f"
379 |          offset=".6" />
380 |     </linearGradient>
381 |   </defs>
382 |   <path
383 |      style="fill:url(#a)"
384 |      id="path980"
385 |      d="m 79.616,26.826915 c -1.684,-4.052 -5.1,-8.427 -7.775,-9.81 a 40.266,40.266 0 0 1 3.925,11.764 l 0.007,0.065 c -4.382,-10.925 -11.813,-15.33 -17.882,-24.9220005 -0.307,-0.485 -0.614,-0.971 -0.913,-1.484 -0.171,-0.293 -0.308,-0.557 -0.427,-0.8 a 7.053,7.053 0 0 1 -0.578,-1.535 0.1,0.1 0 0 0 -0.088,-0.1 0.138,0.138 0 0 0 -0.073,0 c -0.005,0 -0.013,0.009 -0.019,0.011 -0.006,0.002 -0.019,0.011 -0.028,0.015 l 0.015,-0.026 c -9.735,5.7 -13.038,16.2520005 -13.342,21.5300005 a 19.387,19.387 0 0 0 -10.666,4.111 11.587,11.587 0 0 0 -1,-0.758 17.968,17.968 0 0 1 -0.109,-9.473 28.705,28.705 0 0 0 -9.329,7.21 h -0.018 c -1.536,-1.947 -1.428,-8.367 -1.34,-9.708 a 6.928,6.928 0 0 0 -1.294,0.687 28.225,28.225 0 0 0 -3.788,3.245 33.845,33.845 0 0 0 -3.623,4.347 v 0.006 -0.007 a 32.733,32.733 0 0 0 -5.2,11.743 l -0.052,0.256 c -0.073,0.341 -0.336,2.049 -0.381,2.42 0,0.029 -0.006,0.056 -0.009,0.085 A 36.937,36.937 0 0 0 5,41.041915 v 0.2 a 38.759,38.759 0 0 0 76.954,6.554 c 0.065,-0.5 0.118,-0.995 0.176,-1.5 a 39.857,39.857 0 0 0 -2.514,-19.469 z m -44.67,30.338 c 0.181,0.087 0.351,0.181 0.537,0.264 l 0.027,0.017 q -0.282,-0.135 -0.564,-0.281 z m 8.878,-23.376 z m 31.952,-4.934 v -0.037 l 0.007,0.041 z" />
386 |   <path
387 |      style="fill:url(#b)"
388 |      id="path982"
389 |      d="m 79.616,26.826915 c -1.684,-4.052 -5.1,-8.427 -7.775,-9.81 a 40.266,40.266 0 0 1 3.925,11.764 v 0.037 l 0.007,0.041 a 35.1,35.1 0 0 1 -1.206,26.158 c -4.442,9.531 -15.194,19.3 -32.024,18.825 -18.185,-0.515 -34.2,-14.009 -37.194,-31.683 -0.545,-2.787 0,-4.2 0.274,-6.465 A 28.876,28.876 0 0 0 5,41.041915 v 0.2 a 38.759,38.759 0 0 0 76.954,6.554 c 0.065,-0.5 0.118,-0.995 0.176,-1.5 a 39.857,39.857 0 0 0 -2.514,-19.469 z" />
390 |   <path
391 |      style="fill:url(#c)"
392 |      id="path984"
393 |      d="m 79.616,26.826915 c -1.684,-4.052 -5.1,-8.427 -7.775,-9.81 a 40.266,40.266 0 0 1 3.925,11.764 v 0.037 l 0.007,0.041 a 35.1,35.1 0 0 1 -1.206,26.158 c -4.442,9.531 -15.194,19.3 -32.024,18.825 -18.185,-0.515 -34.2,-14.009 -37.194,-31.683 -0.545,-2.787 0,-4.2 0.274,-6.465 A 28.876,28.876 0 0 0 5,41.041915 v 0.2 a 38.759,38.759 0 0 0 76.954,6.554 c 0.065,-0.5 0.118,-0.995 0.176,-1.5 a 39.857,39.857 0 0 0 -2.514,-19.469 z" />
394 |   <path
395 |      style="fill:url(#d)"
396 |      id="path986"
397 |      d="m 60.782,31.382915 c 0.084,0.059 0.162,0.118 0.241,0.177 a 21.1,21.1 0 0 0 -3.6,-4.695 C 45.377,14.816915 54.266,0.7419145 55.765,0.0269145 l 0.015,-0.022 c -9.735,5.7 -13.038,16.2520005 -13.342,21.5300005 0.452,-0.031 0.9,-0.069 1.362,-0.069 a 19.56,19.56 0 0 1 16.982,9.917 z" />
398 |   <path
399 |      style="fill:url(#e)"
400 |      id="path988"
401 |      d="m 43.825,33.788915 c -0.064,0.964 -3.47,4.289 -4.661,4.289 -11.021,0 -12.81,6.667 -12.81,6.667 0.488,5.614 4.4,10.238 9.129,12.684 0.216,0.112 0.435,0.213 0.654,0.312 q 0.569,0.252 1.138,0.466 a 17.235,17.235 0 0 0 5.043,0.973 c 19.317,0.906 23.059,-23.1 9.119,-30.066 a 13.38,13.38 0 0 1 9.345,2.269 19.56,19.56 0 0 0 -16.982,-9.917 c -0.46,0 -0.91,0.038 -1.362,0.069 a 19.387,19.387 0 0 0 -10.666,4.111 c 0.591,0.5 1.258,1.168 2.663,2.553 2.63,2.591 9.375,5.275 9.39,5.59 z" />
402 |   <path
403 |      style="fill:url(#f)"
404 |      id="path990"
405 |      d="m 43.825,33.788915 c -0.064,0.964 -3.47,4.289 -4.661,4.289 -11.021,0 -12.81,6.667 -12.81,6.667 0.488,5.614 4.4,10.238 9.129,12.684 0.216,0.112 0.435,0.213 0.654,0.312 q 0.569,0.252 1.138,0.466 a 17.235,17.235 0 0 0 5.043,0.973 c 19.317,0.906 23.059,-23.1 9.119,-30.066 a 13.38,13.38 0 0 1 9.345,2.269 19.56,19.56 0 0 0 -16.982,-9.917 c -0.46,0 -0.91,0.038 -1.362,0.069 a 19.387,19.387 0 0 0 -10.666,4.111 c 0.591,0.5 1.258,1.168 2.663,2.553 2.63,2.591 9.375,5.275 9.39,5.59 z" />
406 |   <path
407 |      style="fill:url(#g)"
408 |      id="path992"
409 |      d="m 29.965,24.356915 c 0.314,0.2 0.573,0.374 0.8,0.531 a 17.968,17.968 0 0 1 -0.109,-9.473 28.705,28.705 0 0 0 -9.329,7.21 c 0.189,-0.005 5.811,-0.106 8.638,1.732 z" />
410 |   <path
411 |      style="fill:url(#h)"
412 |      id="path994"
413 |      d="m 5.354,42.158915 c 2.991,17.674 19.009,31.168 37.194,31.683 16.83,0.476 27.582,-9.294 32.024,-18.825 a 35.1,35.1 0 0 0 1.206,-26.158 v -0.037 c 0,-0.029 -0.006,-0.046 0,-0.037 l 0.007,0.065 c 1.375,8.977 -3.191,17.674 -10.329,23.555 l -0.022,0.05 c -13.908,11.327 -27.218,6.834 -29.912,5 q -0.282,-0.135 -0.564,-0.281 c -8.109,-3.876 -11.459,-11.264 -10.741,-17.6 a 9.953,9.953 0 0 1 -9.181,-5.775 14.618,14.618 0 0 1 14.249,-0.572 19.3,19.3 0 0 0 14.552,0.572 c -0.015,-0.315 -6.76,-3 -9.39,-5.59 -1.405,-1.385 -2.072,-2.052 -2.663,-2.553 a 11.587,11.587 0 0 0 -1,-0.758 c -0.23,-0.157 -0.489,-0.327 -0.8,-0.531 -2.827,-1.838 -8.449,-1.737 -8.635,-1.732 h -0.018 c -1.536,-1.947 -1.428,-8.367 -1.34,-9.708 a 6.928,6.928 0 0 0 -1.294,0.687 28.225,28.225 0 0 0 -3.788,3.245 33.845,33.845 0 0 0 -3.638,4.337 v 0.006 -0.007 a 32.733,32.733 0 0 0 -5.2,11.743 c -0.019,0.079 -1.396,6.099 -0.717,9.221 z" />
414 |   <path
415 |      style="fill:url(#i)"
416 |      id="path996"
417 |      d="m 57.425,26.864915 a 21.1,21.1 0 0 1 3.6,4.7 c 0.213,0.161 0.412,0.321 0.581,0.476 8.787,8.1 4.183,19.55 3.84,20.365 7.138,-5.881 11.7,-14.578 10.329,-23.555 -4.384,-10.93 -11.815,-15.335 -17.884,-24.9270005 -0.307,-0.485 -0.614,-0.971 -0.913,-1.484 -0.171,-0.293 -0.308,-0.557 -0.427,-0.8 a 7.053,7.053 0 0 1 -0.578,-1.535 0.1,0.1 0 0 0 -0.088,-0.1 0.138,0.138 0 0 0 -0.073,0 c -0.005,0 -0.013,0.009 -0.019,0.011 -0.006,0.002 -0.019,0.011 -0.028,0.015 -1.499,0.711 -10.388,14.7860005 1.66,26.8340005 z" />
418 |   <path
419 |      style="fill:url(#j)"
420 |      id="path998"
421 |      d="m 61.6,32.035915 c -0.169,-0.155 -0.368,-0.315 -0.581,-0.476 -0.079,-0.059 -0.157,-0.118 -0.241,-0.177 a 13.38,13.38 0 0 0 -9.345,-2.269 c 13.94,6.97 10.2,30.972 -9.119,30.066 a 17.235,17.235 0 0 1 -5.043,-0.973 q -0.569,-0.213 -1.138,-0.466 c -0.219,-0.1 -0.438,-0.2 -0.654,-0.312 l 0.027,0.017 c 2.694,1.839 16,6.332 29.912,-5 l 0.022,-0.05 c 0.347,-0.81 4.951,-12.263 -3.84,-20.36 z" />
422 |   <path
423 |      style="fill:url(#k)"
424 |      id="path1000"
425 |      d="m 26.354,44.744915 c 0,0 1.789,-6.667 12.81,-6.667 1.191,0 4.6,-3.325 4.661,-4.289 a 19.3,19.3 0 0 1 -14.552,-0.572 14.618,14.618 0 0 0 -14.249,0.572 9.953,9.953 0 0 0 9.181,5.775 c -0.718,6.337 2.632,13.725 10.741,17.6 0.181,0.087 0.351,0.181 0.537,0.264 -4.733,-2.445 -8.641,-7.069 -9.129,-12.683 z" />
426 |   <path
427 |      style="fill:url(#l)"
428 |      id="path1002"
429 |      d="m 79.616,26.826915 c -1.684,-4.052 -5.1,-8.427 -7.775,-9.81 a 40.266,40.266 0 0 1 3.925,11.764 l 0.007,0.065 c -4.382,-10.925 -11.813,-15.33 -17.882,-24.9220005 -0.307,-0.485 -0.614,-0.971 -0.913,-1.484 -0.171,-0.293 -0.308,-0.557 -0.427,-0.8 a 7.053,7.053 0 0 1 -0.578,-1.535 0.1,0.1 0 0 0 -0.088,-0.1 0.138,0.138 0 0 0 -0.073,0 c -0.005,0 -0.013,0.009 -0.019,0.011 -0.006,0.002 -0.019,0.011 -0.028,0.015 l 0.015,-0.026 c -9.735,5.7 -13.038,16.2520005 -13.342,21.5300005 0.452,-0.031 0.9,-0.069 1.362,-0.069 a 19.56,19.56 0 0 1 16.982,9.917 13.38,13.38 0 0 0 -9.345,-2.269 c 13.94,6.97 10.2,30.972 -9.119,30.066 a 17.235,17.235 0 0 1 -5.043,-0.973 q -0.569,-0.213 -1.138,-0.466 c -0.219,-0.1 -0.438,-0.2 -0.654,-0.312 l 0.027,0.017 q -0.282,-0.135 -0.564,-0.281 c 0.181,0.087 0.351,0.181 0.537,0.264 -4.733,-2.446 -8.641,-7.07 -9.129,-12.684 0,0 1.789,-6.667 12.81,-6.667 1.191,0 4.6,-3.325 4.661,-4.289 -0.015,-0.315 -6.76,-3 -9.39,-5.59 -1.405,-1.385 -2.072,-2.052 -2.663,-2.553 a 11.587,11.587 0 0 0 -1,-0.758 17.968,17.968 0 0 1 -0.109,-9.473 28.705,28.705 0 0 0 -9.329,7.21 h -0.018 c -1.536,-1.947 -1.428,-8.367 -1.34,-9.708 a 6.928,6.928 0 0 0 -1.294,0.687 28.225,28.225 0 0 0 -3.788,3.245 33.845,33.845 0 0 0 -3.623,4.347 v 0.006 -0.007 a 32.733,32.733 0 0 0 -5.2,11.743 l -0.052,0.256 c -0.073,0.341 -0.4,2.073 -0.447,2.445 0,0.028 0,-0.029 0,0 A 45.094,45.094 0 0 0 5,41.041915 v 0.2 a 38.759,38.759 0 0 0 76.954,6.554 c 0.065,-0.5 0.118,-0.995 0.176,-1.5 a 39.857,39.857 0 0 0 -2.514,-19.469 z m -3.845,1.991 0.007,0.041 z" />
430 | </svg>
431 | 


--------------------------------------------------------------------------------
/static/svgs/gear.svg:
--------------------------------------------------------------------------------
1 | <svg version="1.1" viewBox="0 0 512 512" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
2 |   <path fill='currentColor' d="M424.5,216.5h-15.2c-12.4,0-22.8-10.7-22.8-23.4c0-6.4,2.7-12.2,7.5-16.5l9.8-9.6c9.7-9.6,9.7-25.3,0-34.9l-22.3-22.1  c-4.4-4.4-10.9-7-17.5-7c-6.6,0-13,2.6-17.5,7l-9.4,9.4c-4.5,5-10.5,7.7-17,7.7c-12.8,0-23.5-10.4-23.5-22.7V89.1  c0-13.5-10.9-25.1-24.5-25.1h-30.4c-13.6,0-24.4,11.5-24.4,25.1v15.2c0,12.3-10.7,22.7-23.5,22.7c-6.4,0-12.3-2.7-16.6-7.4l-9.7-9.6  c-4.4-4.5-10.9-7-17.5-7s-13,2.6-17.5,7L110,132c-9.6,9.6-9.6,25.3,0,34.8l9.4,9.4c5,4.5,7.8,10.5,7.8,16.9  c0,12.8-10.4,23.4-22.8,23.4H89.2c-13.7,0-25.2,10.7-25.2,24.3V256v15.2c0,13.5,11.5,24.3,25.2,24.3h15.2  c12.4,0,22.8,10.7,22.8,23.4c0,6.4-2.8,12.4-7.8,16.9l-9.4,9.3c-9.6,9.6-9.6,25.3,0,34.8l22.3,22.2c4.4,4.5,10.9,7,17.5,7  c6.6,0,13-2.6,17.5-7l9.7-9.6c4.2-4.7,10.2-7.4,16.6-7.4c12.8,0,23.5,10.4,23.5,22.7v15.2c0,13.5,10.8,25.1,24.5,25.1h30.4  c13.6,0,24.4-11.5,24.4-25.1v-15.2c0-12.3,10.7-22.7,23.5-22.7c6.4,0,12.4,2.8,17,7.7l9.4,9.4c4.5,4.4,10.9,7,17.5,7  c6.6,0,13-2.6,17.5-7l22.3-22.2c9.6-9.6,9.6-25.3,0-34.9l-9.8-9.6c-4.8-4.3-7.5-10.2-7.5-16.5c0-12.8,10.4-23.4,22.8-23.4h15.2  c13.6,0,23.3-10.7,23.3-24.3V256v-15.2C447.8,227.2,438.1,216.5,424.5,216.5z M336.8,256L336.8,256c0,44.1-35.7,80-80,80  c-44.3,0-80-35.9-80-80l0,0l0,0c0-44.1,35.7-80,80-80C301.1,176,336.8,211.9,336.8,256L336.8,256z"/>
3 | </svg>


--------------------------------------------------------------------------------
/static/svgs/github.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
2 |   <path fill-rule="evenodd" fill="currentColor" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path>
3 | </svg>


--------------------------------------------------------------------------------
/static/svgs/pencil.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="iso-8859-1"?>
 2 | <!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 3 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 4 | <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 5 | 	 width="528.899px" height="528.899px" viewBox="0 0 528.899 528.899" style="enable-background:new 0 0 528.899 528.899;"
 6 | 	 xml:space="preserve">
 7 | <g>
 8 | 	<path d="M328.883,89.125l107.59,107.589l-272.34,272.34L56.604,361.465L328.883,89.125z M518.113,63.177l-47.981-47.981
 9 | 		c-18.543-18.543-48.653-18.543-67.259,0l-45.961,45.961l107.59,107.59l53.611-53.611
10 | 		C532.495,100.753,532.495,77.559,518.113,63.177z M0.3,512.69c-1.958,8.812,5.998,16.708,14.811,14.565l119.891-29.069
11 | 		L27.473,390.597L0.3,512.69z"/>
12 | </g>
13 | </svg>
14 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es2016",
 4 |     "lib": ["es7", "DOM", "DOM.Iterable"],
 5 |     "strict": true,
 6 |     "esModuleInterop": true,
 7 |     "jsx": "react",
 8 |     "jsxFactory": "h",
 9 |     "moduleResolution": "node",
10 |     "resolveJsonModule": true,
11 |     "module": "commonjs",
12 |     "baseUrl": ".",
13 |     "paths": {
14 |       "react": ["node_modules/preact/compat"],
15 |       "react-dom": ["node_modules/preact/compat"]
16 |     }
17 |   },
18 |   "include": ["src/**/*"]
19 | }
20 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const webpack = require('webpack');
 2 | const WebpackExtensionManifestPlugin = require('webpack-extension-manifest-plugin');
 3 | const CopyPlugin = require('copy-webpack-plugin');
 4 | const ZipPlugin = require('zip-webpack-plugin');
 5 | 
 6 | const baseManifest = require('./manifest.base');
 7 | const pkg = require('./package.json');
 8 | 
 9 | const firefoxManifestSettings = {
10 |   browser_specific_settings: {
11 |     gecko: {
12 |       id: '{15fcc312-c0d6-4d8a-add7-edf49088fefd}',
13 |       strict_min_version: '42.0',
14 |     },
15 |   },
16 | };
17 | 
18 | module.exports = (env) => {
19 |   const dev = env.NODE_ENV !== 'production';
20 |   const browser = env.BROWSER || 'chrome';
21 | 
22 |   return {
23 |     mode: dev ? 'development' : 'production',
24 |     devtool: dev ? 'cheap-source-map' : undefined,
25 |     entry: {
26 |       popup: './src/popup/index.tsx',
27 |       options: './src/options/index.tsx',
28 |       background: './src/background/index.ts',
29 |     },
30 |     output: {
31 |       filename: '[name].js',
32 |       path: __dirname + `/dist_${browser}`,
33 |     },
34 |     module: {
35 |       rules: [
36 |         {
37 |           test: /\.tsx?$/,
38 |           exclude: /node_modules/,
39 |           use: [{ loader: 'babel-loader' }],
40 |         },
41 |         {
42 |           test: /\.svg$/,
43 |           exclude: /node_modules/,
44 |           use: ['preact-svg-loader'],
45 |         },
46 |       ],
47 |     },
48 |     plugins: [
49 |       new webpack.DefinePlugin({
50 |         BROWSER: JSON.stringify(browser),
51 |         EXTENSION_VERSION: JSON.stringify(
52 |           dev ? `${pkg.version}-dev` : pkg.version
53 |         ),
54 |       }),
55 |       new WebpackExtensionManifestPlugin({
56 |         config: {
57 |           base: baseManifest,
58 |           extend: {
59 |             version: pkg.version,
60 |             permissions: browser === 'firefox' ? ['contextualIdentities'] : [],
61 |             ...(browser === 'firefox' ? firefoxManifestSettings : null),
62 |             ...(browser === 'chrome' ? { minimum_chrome_version: '55' } : null), // async/await available from v55
63 |           },
64 |         },
65 |       }),
66 |       new CopyPlugin([
67 |         {
68 |           from: 'static',
69 |           ignore: ['svgs/*'], // SVGs get bundled in directly
70 |         },
71 |       ]),
72 |       !dev &&
73 |         new ZipPlugin({
74 |           path: '../zip',
75 |           filename: `ReTitle-${pkg.version}.${browser}.zip`,
76 |         }),
77 |     ].filter(Boolean),
78 |     resolve: {
79 |       extensions: ['.js', 'jsx', '.ts', '.tsx'],
80 |       alias: {
81 |         react: 'preact/compat',
82 |         'react-dom/test-utils': 'preact/test-utils',
83 |         'react-dom': 'preact/compat',
84 |       },
85 |     },
86 |   };
87 | };
88 | 


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