├── .github
├── FUNDING.yml
└── workflows
│ └── ci.yml
├── .gitignore
├── .vscode
└── settings.json
├── LICENSE
├── Makefile
├── PRIVACY_POLICY.md
├── README.md
├── assets
├── screenshot-1.png
├── screenshot-2.png
└── screenshot-store.png
├── package-lock.json
├── package.json
├── public
├── assets
│ ├── README.md
│ ├── velociraptor.png
│ ├── velociraptor128.png
│ ├── velociraptor48.png
│ └── velociraptor_monocolor.png
├── manifest.json
├── options.html
└── popup.html
├── src
├── background.tsx
├── log.ts
├── options.tsx
├── popup.tsx
├── registry.tsx
└── watcher.tsx
├── tsconfig.json
└── webpack.config.js
/.github/FUNDING.yml:
--------------------------------------------------------------------------------
1 | github:
2 | - gfx
3 |
--------------------------------------------------------------------------------
/.github/workflows/ci.yml:
--------------------------------------------------------------------------------
1 | name: CI
2 |
3 | on:
4 | push:
5 | branches:
6 | - main
7 | pull_request:
8 |
9 | jobs:
10 | build:
11 | runs-on: ubuntu-latest
12 | steps:
13 | - uses: actions/checkout@v2
14 |
15 | - name: Use Node.js
16 | uses: actions/setup-node@v1
17 | with:
18 | node-version: "16"
19 |
20 | - name: Build
21 | run: |
22 | npm ci
23 | npm run build:release
24 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | dist/
2 | node_modules/
3 | firebaseConfig.*
4 | .DS_Store
5 | *.zip
6 |
--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 | "editor.wordWrapColumn": 100,
3 | "workbench.tree.indent": 2,
4 | "cSpell.words": [
5 | "velociraptor",
6 | "WatchRaptor"
7 | ]
8 | }
9 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | Copyright 2022 FUJI Goro.
2 |
3 | Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.
4 |
5 | THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
6 |
--------------------------------------------------------------------------------
/Makefile:
--------------------------------------------------------------------------------
1 | DISTFILE=WatchRaptor.zip
2 |
3 | pack:
4 | rm -rf dist "${DISTFILE}"
5 | npm run build:release
6 | cd dist ; zip -9 -r ../${DISTFILE} *
7 | ls -lh "${DISTFILE}"
8 |
--------------------------------------------------------------------------------
/PRIVACY_POLICY.md:
--------------------------------------------------------------------------------
1 | # Privacy Policy
2 |
3 | This extension does not collect user data in any form.
4 |
5 | Please confirm the extension has no permission for network access in the store.
6 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # WatchRaptor [](https://github.com/gfx/WatchRaptor/actions/workflows/ci.yml)
2 |
3 | 
8 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/src/background.tsx:
--------------------------------------------------------------------------------
1 | // This is the background worker that installs watcher.tsx to each GitHub PR page.
2 | import manifest from "../public/manifest.json";
3 | import { debug, info, warn } from "./log";
4 |
5 | // @ts-expect-error
6 | import appIconUri from "../public/assets/velociraptor128.png";
7 |
8 | // chrome.storage.local.clear();
9 |
10 | chrome.runtime.onInstalled.addListener(async ({ reason }) => {
11 | info(`installed (reason=${reason})`);
12 | await installScriptToAllTabs();
13 | });
14 |
15 | async function getGitHubPRsTabs(): Promise> {
16 | return await chrome.tabs.query({
17 | url: manifest.host_permissions.map((url) => {
18 | return `${url}*`;
19 | }),
20 | });
21 | }
22 |
23 | async function installScript({ url, tabId }: { url: string; tabId: number }) {
24 | info(`installScript: ${url}`);
25 |
26 | await chrome.scripting.executeScript({
27 | target: { tabId },
28 | files: ["./watcher.js"],
29 | });
30 | }
31 |
32 | async function installScriptToAllTabs() {
33 | for (const tab of await getGitHubPRsTabs()) {
34 | if (tab.url) {
35 | installScript({
36 | tabId: tab.id!,
37 | url: tab.url,
38 | });
39 | }
40 | }
41 | }
42 |
43 | chrome.webNavigation.onCommitted.addListener(
44 | (details) => {
45 | debug("chrome.webNavigation.onCommitted:", details);
46 | if (
47 | ["reload", "link", "typed", "generated", "auto_bookmark"].includes(
48 | details.transitionType
49 | )
50 | ) {
51 | const onComplete = () => {
52 | installScript({
53 | tabId: details.tabId!,
54 | url: details.url!,
55 | });
56 | chrome.webNavigation.onCompleted.removeListener(onComplete);
57 | };
58 |
59 | chrome.webNavigation.onCompleted.addListener(onComplete);
60 | }
61 | },
62 | {
63 | url: manifest.host_permissions.map((urlPrefix) => {
64 | return { urlPrefix };
65 | }),
66 | }
67 | );
68 |
69 | chrome.runtime.onMessage.addListener((message, sender, callback) => {
70 | debug("chrome.runtime.onMessage:", message, sender);
71 |
72 | if (message.type === "ci-status-changed") {
73 | const sym = ((status: string) => {
74 | if (status === "success") {
75 | return "✅";
76 | } else if (status === "fail") {
77 | return "❌";
78 | } else if (status === "pending") {
79 | return "⏳";
80 | } else {
81 | return "❓";
82 | }
83 | })(message.status);
84 |
85 | const tabId = sender.tab!.id!;
86 | const notificationId = `notification-${tabId}`;
87 | chrome.notifications.create(
88 | notificationId,
89 | {
90 | type: "basic",
91 | title: `${sym} ${message.statusMessage}`,
92 | message: message.documentTitle,
93 | iconUrl: appIconUri,
94 | requireInteraction: true,
95 | },
96 | () => {
97 | callback();
98 | }
99 | );
100 | } else if (message.type === "get-registry-items") {
101 | const senderTabId = sender!.tab!.id;
102 | if (!senderTabId) {
103 | throw new Error("sender.tab.id is null");
104 | }
105 | chrome.storage.local.get(`${senderTabId}`).then((root) => {
106 | callback(root[`${senderTabId}`] ?? {});
107 | });
108 | } else if (message.type === "set-registry-items") {
109 | const senderTabId = sender!.tab!.id;
110 | if (!senderTabId) {
111 | throw new Error("sender.tab.id is null");
112 | }
113 | chrome.storage.local
114 | .set({
115 | [`${senderTabId}`]: message.items,
116 | })
117 | .then(() => {
118 | callback();
119 | });
120 | } else {
121 | warn("unknown message", message);
122 | }
123 |
124 | return true;
125 | });
126 |
127 | chrome.notifications.onClicked.addListener(async (id) => {
128 | const [, tabId] = id.split("-");
129 | await chrome.tabs.update(Number.parseInt(tabId), { active: true });
130 | await chrome.windows.update(chrome.windows.WINDOW_ID_CURRENT, {
131 | focused: true,
132 | });
133 | chrome.notifications.clear(id);
134 | });
135 |
--------------------------------------------------------------------------------
/src/log.ts:
--------------------------------------------------------------------------------
1 | import manifest from "../public/manifest.json";
2 |
3 | // development only debug logs
4 | // To see the debug logs, set the log level to debug or verbose in the devtools console.
5 | export function debug(message: string, ...args: ReadonlyArray) {
6 | if (process.env.NODE_ENV !== "production") {
7 | console.debug(`[${manifest.name}] ${message}`, ...args);
8 | }
9 | }
10 |
11 | export function info(message: string, ...args: ReadonlyArray) {
12 | if (process.env.NODE_ENV !== "production") {
13 | console.info(`[${manifest.name}] ${message}`, ...args);
14 | }
15 | }
16 |
17 | export function warn(message: string, ...args: ReadonlyArray) {
18 | console.warn(`[${manifest.name}] ${message}`, ...args);
19 | }
20 |
--------------------------------------------------------------------------------
/src/options.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState } from "react";
2 | import ReactDOM from "react-dom";
3 |
4 | import manifest from "../public/manifest.json";
5 |
6 | type OptionsMainProps = {};
7 |
8 | const OptionsMain: React.FC = ({}) => {
9 | const [bytesInUse, setBytesInUse] = useState(0);
10 |
11 | useEffect(() => {
12 | chrome.storage.local.getBytesInUse(null, (bytes) => {
13 | setBytesInUse(bytes);
14 | });
15 | }, []);
16 |
17 | return (
18 |
19 | {manifest.name} v{manifest.version}
20 |
21 |
22 | Clear the Local Storage
23 | It consumes {bytesInUse} bytes.
24 |
25 |
31 |
32 |
33 |
34 |
35 | );
36 | };
37 |
38 | const OptionsApp: React.FC = () => {
39 | return ;
40 | };
41 |
42 | window.addEventListener("DOMContentLoaded", async () => {
43 | ReactDOM.render(, document.getElementById("app"));
44 | });
45 |
--------------------------------------------------------------------------------
/src/popup.tsx:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gfx/WatchRaptor/85596df8bac7422c984d3cdbf6674f346e3d61b3/src/popup.tsx
--------------------------------------------------------------------------------
/src/registry.tsx:
--------------------------------------------------------------------------------
1 | type ItemsType = Record;
2 |
3 | export class Registry {
4 | private async getItems(): Promise> {
5 | return new Promise>((resolve, _reject) => {
6 | chrome.runtime.sendMessage({ type: "get-registry-items" }, (items) => {
7 | resolve(items);
8 | });
9 | });
10 | }
11 |
12 | private async setItems(items: ItemsType): Promise {
13 | return new Promise((resolve, _reject) => {
14 | chrome.runtime.sendMessage({ type: "set-registry-items", items }, () => {
15 | resolve();
16 | });
17 | });
18 | }
19 |
20 | public async get(key: string): Promise {
21 | const items = await this.getItems();
22 | return (items.hasOwnProperty(key) ? items[key] : undefined);
23 | }
24 |
25 | public async has(key: string): Promise {
26 | const items = await this.getItems();
27 | return items.hasOwnProperty(key);
28 | }
29 |
30 | public async set(key: string, value: V): Promise {
31 | const items = await this.getItems();
32 | items[key] = value;
33 | return this.setItems(items);
34 | }
35 |
36 | public async delete(key: string): Promise {
37 | const items = await this.getItems();
38 | delete items[key];
39 | return this.setItems(items);
40 | }
41 |
42 | async *[Symbol.asyncIterator](): AsyncIterator {
43 | const items = await this.getItems();
44 | for (const entry of Object.entries(items)) {
45 | yield entry as [string, V];
46 | }
47 | }
48 | }
49 |
--------------------------------------------------------------------------------
/src/watcher.tsx:
--------------------------------------------------------------------------------
1 | ///
2 | ///
3 |
4 | import React, { useEffect, useState } from "react";
5 | import ReactDOM from "react-dom";
6 |
7 | import { debug, info, warn } from "./log";
8 | import { Registry } from "./registry";
9 |
10 | type StatusType = "unknown" | "pending" | "success" | "fail";
11 |
12 | const containerClassName = "watchraptor-container";
13 |
14 | const registry = new Registry();
15 |
16 | const getStatus = (statusIcon: Element): StatusType => {
17 | const svg = statusIcon.querySelector("svg")!;
18 | if (svg == null) {
19 | warn(`no svg found in the status icon element:`, statusIcon);
20 | return "unknown";
21 | }
22 |
23 | if (svg.classList.contains("hx_dot-fill-pending-icon")) {
24 | return "pending";
25 | } else if (svg.classList.contains("color-fg-danger")) {
26 | return "fail";
27 | } else if (svg.classList.contains("color-fg-success")) {
28 | return "success";
29 | } else {
30 | return "unknown";
31 | }
32 | };
33 |
34 | const notifyStatusChange = async (statusIcon: Element) => {
35 | const status = getStatus(statusIcon);
36 | const statusMessage = statusIcon
37 | .nextElementSibling!.nextElementSibling!.textContent!.replaceAll(
38 | /\s+/g,
39 | " "
40 | )
41 | .trim();
42 |
43 | const type = "ci-status-changed";
44 | const documentTitle = document.title;
45 |
46 | chrome.runtime.sendMessage({
47 | type,
48 | documentTitle,
49 | statusMessage,
50 | status,
51 | });
52 | };
53 |
54 | const STATUS_ITEM_QUERY_SEPARATOR = "/";
55 |
56 | const getStatusIdFromItem = (statusItem: Element): string => {
57 | // Extract the name of the status item (e.g. "CI / build (pull_request)") which should be unique in the CI statuses. This is used to identify the status item.
58 | return statusItem.querySelector("div > strong")!.textContent!.trim();
59 | };
60 |
61 | const queryStatusItem = (element: ParentNode, q: string): Element | null => {
62 | const separatorPos = q.indexOf(STATUS_ITEM_QUERY_SEPARATOR);
63 | const first = q.substring(0, separatorPos);
64 | const second = q.substring(separatorPos + 1);
65 | for (const statusItem of element.querySelectorAll(first)) {
66 | if (getStatusIdFromItem(statusItem) === second) {
67 | return statusItem;
68 | }
69 | }
70 | return null;
71 | };
72 |
73 | const findStatusItemByStatusId = (
74 | element: ParentNode,
75 | statusId: string
76 | ): Element | null => {
77 | for (const statusItem of element.querySelectorAll(
78 | ".merge-status-list .merge-status-item"
79 | )) {
80 | if (getStatusIdFromItem(statusItem) === statusId) {
81 | return statusItem;
82 | }
83 | }
84 | return null;
85 | };
86 |
87 | const queryContainer = (
88 | target: ParentNode,
89 | statusId: string
90 | ): HTMLElement | null => {
91 | return target.querySelector(
92 | `.${containerClassName}[data-watchraptor-id="${statusId}"]`
93 | );
94 | };
95 |
96 | // GitHub status item -> WatchRaptor UI container mapping
97 | const statusItemToContainer = new WeakMap();
98 |
99 | const handleStatusIconChange = () => {
100 | (async () => {
101 | for await (const [statusItemQuery, oldStatus] of registry) {
102 | const statusItem = queryStatusItem(document, statusItemQuery);
103 | if (statusItem) {
104 | const statusIcon = statusItem.querySelector(".merge-status-icon");
105 | if (statusIcon) {
106 | const newStatus = getStatus(statusIcon);
107 | await registry.set(statusItemQuery, newStatus);
108 |
109 | if (oldStatus !== newStatus && newStatus !== "pending") {
110 | debug(`${statusItemQuery}: ${oldStatus} -> ${newStatus}`);
111 | notifyStatusChange(statusIcon);
112 | }
113 | }
114 | }
115 | }
116 | })();
117 | };
118 |
119 | type WatchCheckboxProps = Readonly<{
120 | statusItemQuery: string;
121 | statusIcon: Element;
122 | }>;
123 |
124 | const WatchCheckbox: React.FC = ({
125 | statusItemQuery,
126 | statusIcon,
127 | }) => {
128 | const [disabled, setDisabled] = useState(true);
129 | const [checked, setChecked] = useState(false);
130 | const status = getStatus(statusIcon);
131 |
132 | const updateChecked = async (checked: boolean) => {
133 | setChecked(checked);
134 | setDisabled(true);
135 | if (checked) {
136 | await registry.set(statusItemQuery, status);
137 | } else {
138 | await registry.delete(statusItemQuery);
139 | }
140 | setDisabled(false);
141 | };
142 |
143 | useEffect(() => {
144 | (async () => {
145 | await updateChecked(await registry.has(statusItemQuery));
146 | setDisabled(false);
147 | })().catch((e) => warn(e));
148 | }, []);
149 |
150 | return (
151 |
155 | {
160 | (async () => {
161 | setDisabled(true);
162 | updateChecked(!checked);
163 | setDisabled(false);
164 | })().catch((e) => warn(e));
165 | }}
166 | />
167 |
168 | );
169 | };
170 |
171 | const adjustContainerPosition = ({
172 | statusItem,
173 | container,
174 | }: {
175 | statusItem: Element;
176 | container: HTMLElement;
177 | }): void => {
178 | const { left, top } = statusItem.getBoundingClientRect();
179 | container.style.left = `${Math.round(left + scrollX)}px`;
180 | container.style.top = `${Math.round(top + scrollY)}px`;
181 | };
182 |
183 | const generation = Date.now().toString();
184 | let shutdown = false;
185 |
186 | const intersectionObserver = new IntersectionObserver(
187 | (entries) => {
188 | if (shutdown) {
189 | intersectionObserver.disconnect();
190 | return;
191 | }
192 |
193 | for (const entry of entries) {
194 | const statusItem = entry.target as HTMLElement;
195 | const statusId = getStatusIdFromItem(statusItem);
196 | const container = queryContainer(document, statusId);
197 | if (container) {
198 | container.style.visibility = entry.isIntersecting
199 | ? "visible"
200 | : "hidden";
201 | }
202 | }
203 | },
204 | { threshold: 0.7 }
205 | );
206 |
207 | const adjustContainerPositionAll = () => {
208 | for (const container of document.querySelectorAll(
209 | `.${containerClassName}`
210 | )) {
211 | const statusId = container.dataset.watchraptorId!;
212 | const statusItem = findStatusItemByStatusId(document, statusId);
213 | if (statusItem) {
214 | adjustContainerPosition({ statusItem, container });
215 | }
216 | }
217 | };
218 |
219 | const handleMergeStatusListScroll = (e: Event): void => {
220 | if (shutdown) {
221 | e.target!.removeEventListener("scroll", handleMergeStatusListScroll);
222 | return;
223 | }
224 |
225 | adjustContainerPositionAll();
226 | };
227 |
228 | const install = (document: Document): boolean => {
229 | let installed = false;
230 |
231 | const mergeStatusList =
232 | document.querySelector(".merge-status-list");
233 | if (mergeStatusList) {
234 | mergeStatusList.removeEventListener("scroll", handleMergeStatusListScroll);
235 | mergeStatusList.addEventListener("scroll", handleMergeStatusListScroll);
236 | }
237 |
238 | for (const statusItem of document.querySelectorAll(
239 | ".merge-status-list .merge-status-item"
240 | )) {
241 | if (statusItem.querySelector(".avatar") == null) {
242 | // skip if the status item has not an avatar, or an icon for the workflow.
243 | continue;
244 | }
245 | const statusIcon = statusItem.querySelector(".merge-status-icon");
246 | if (statusIcon == null) {
247 | continue;
248 | }
249 | const statusId = getStatusIdFromItem(statusItem);
250 | const existingContainer = statusItemToContainer.get(statusItem);
251 | if (existingContainer) {
252 | const installedGeneration =
253 | existingContainer.dataset.watchraptorGeneration ?? "0";
254 | if (installedGeneration === generation) {
255 | continue;
256 | } else {
257 | // A different generation of the script is installed.
258 | if (
259 | Number.parseInt(installedGeneration) > Number.parseInt(generation)
260 | ) {
261 | // the current one is older.
262 | shutdown = true;
263 | info(`shutting down (generation=${generation})`);
264 | return false;
265 | }
266 |
267 | // the current one is newer.
268 | existingContainer.remove();
269 | }
270 | }
271 |
272 | const container = document.createElement("div");
273 | container.classList.add(containerClassName);
274 |
275 | container.style.position = "absolute";
276 | container.style.visibility = "hidden"; // will be updated in the intersection observer
277 |
278 | container.dataset.watchraptorGeneration = generation;
279 | container.dataset.watchraptorId = statusId;
280 |
281 | document.body.appendChild(container);
282 | statusItemToContainer.set(statusItem, container);
283 |
284 | intersectionObserver.observe(statusItem);
285 |
286 | const statusItemQuery = [
287 | ".merge-status-list .merge-status-item",
288 | statusId,
289 | ].join(STATUS_ITEM_QUERY_SEPARATOR);
290 |
291 | const checkbox = (
292 |
296 | );
297 | ReactDOM.render(checkbox, container);
298 |
299 | installed = true;
300 | }
301 |
302 | return installed;
303 | };
304 |
305 | const main = (): void => {
306 | info(`injected (generation=${generation})`);
307 |
308 | if (install(document)) {
309 | info(`installed (generation=${generation})`);
310 | }
311 |
312 | const mutationObserver = new MutationObserver((mutations) => {
313 | if (shutdown) {
314 | mutationObserver.disconnect();
315 | return;
316 | }
317 |
318 | handleStatusIconChange();
319 | adjustContainerPositionAll();
320 |
321 | if (install(document)) {
322 | info(`installed in MutationObserver (generation=${generation})`);
323 | }
324 | });
325 | mutationObserver.observe(document, {
326 | childList: true,
327 | subtree: true,
328 | });
329 | };
330 |
331 | requestAnimationFrame(main);
332 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | /* Visit https://aka.ms/tsconfig.json to read more about this file */
4 |
5 | /* Basic Options */
6 | "incremental": true, /* Enable incremental compilation */
7 | "target": "es2020", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
8 | "module": "es2020", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
9 | "lib": ["es2021"], /* Specify library files to be included in the compilation. */
10 | // "allowJs": true, /* Allow javascript files to be compiled. */
11 | // "checkJs": true, /* Report errors in .js files. */
12 | "jsx": "react", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
13 | // "declaration": true, /* Generates corresponding '.d.ts' file. */
14 | // "declarationMap": true, /* Generates a sourcemap for each corresponding '.d.ts' file. */
15 | // "sourceMap": true, /* Generates corresponding '.map' file. */
16 | // "outFile": "./", /* Concatenate and emit output to single file. */
17 | "outDir": "./dist", /* Redirect output structure to the directory. */
18 | "rootDir": "./", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
19 | // "composite": true, /* Enable project compilation */
20 | // "tsBuildInfoFile": "./", /* Specify file to store incremental compilation information */
21 | // "removeComments": true, /* Do not emit comments to output. */
22 | // "noEmit": true, /* Do not emit outputs. */
23 | // "importHelpers": true, /* Import emit helpers from 'tslib'. */
24 | // "downlevelIteration": true, /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
25 | // "isolatedModules": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
26 |
27 | /* Strict Type-Checking Options */
28 | "strict": true, /* Enable all strict type-checking options. */
29 | // "noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */
30 | // "strictNullChecks": true, /* Enable strict null checks. */
31 | // "strictFunctionTypes": true, /* Enable strict checking of function types. */
32 | // "strictBindCallApply": true, /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
33 | // "strictPropertyInitialization": true, /* Enable strict checking of property initialization in classes. */
34 | // "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */
35 | // "alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */
36 |
37 | /* Additional Checks */
38 | // "noUnusedLocals": true, /* Report errors on unused locals. */
39 | // "noUnusedParameters": true, /* Report errors on unused parameters. */
40 | "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */
41 | "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */
42 |
43 | /* Module Resolution Options */
44 | "resolveJsonModule": true,
45 | "moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
46 | "baseUrl": "./", /* Base directory to resolve non-absolute module names. */
47 | // "paths": {}, /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
48 | // "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */
49 | // "typeRoots": [], /* List of folders to include type definitions from. */
50 | // "types": [], /* Type declaration files to be included in compilation. */
51 | // "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
52 | "esModuleInterop": true, /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
53 | // "preserveSymlinks": true, /* Do not resolve the real path of symlinks. */
54 | // "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */
55 |
56 | /* Source Map Options */
57 | // "sourceRoot": "", /* Specify the location where debugger should locate TypeScript files instead of source locations. */
58 | // "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */
59 | "inlineSourceMap": true, /* Emit a single file with source maps instead of having a separate file. */
60 | // "inlineSources": true, /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
61 |
62 | /* Experimental Options */
63 | // "experimentalDecorators": true, /* Enables experimental support for ES7 decorators. */
64 | // "emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */
65 |
66 | /* Advanced Options */
67 | "skipLibCheck": true, /* Skip type checking of declaration files. */
68 | "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */
69 | }
70 | }
71 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | "use strict";
2 |
3 | const path = require("path");
4 | const webpack = require("webpack");
5 | const CopyWebpackPlugin = require("copy-webpack-plugin");
6 |
7 | module.exports = {
8 | entry: {
9 | background: "./src/background",
10 | watcher: "./src/watcher",
11 |
12 | options: "./src/options",
13 | popup: "./src/popup",
14 | },
15 | output: {
16 | filename: "[name].js",
17 | path: path.resolve(__dirname, "dist"),
18 | },
19 | target: ["web", "es2020"],
20 | resolve: {
21 | extensions: [".ts", ".tsx", ".mjs", ".js", ".json", ".wasm"],
22 | },
23 | module: {
24 | rules: [
25 | {
26 | test: /\.tsx?$/i,
27 | loader: "ts-loader",
28 | options: {
29 | configFile: "tsconfig.json",
30 | },
31 | },
32 | {
33 | test: /\.(?:png|jpg|gif)$/i,
34 | type: "asset/inline",
35 | },
36 | ],
37 | },
38 |
39 | plugins: [
40 | new webpack.DefinePlugin({
41 | }),
42 | new CopyWebpackPlugin({
43 | patterns: [
44 | {
45 | from: "./public",
46 | to: "./",
47 | },
48 | ]
49 | }),
50 | ],
51 |
52 | optimization: {
53 | minimize: false,
54 | },
55 |
56 | performance: {
57 | hints: false,
58 | },
59 | devtool: 'inline-cheap-module-source-map',
60 | };
61 |
62 |
--------------------------------------------------------------------------------