Merge pull request #55 from penge/firefox

Add Firefox build

README.md

@@ -1,6 +1,6 @@
 # Block Site
 
-**Block Site** (formerly known as _Stop Social Media_) is a simple **Chrome extension** that improves your productivity by blocking access to distracting websites as you specify.
+**Block Site** (formerly known as _Stop Social Media_) is a simple **Chrome/Firefox extension** that improves your productivity by blocking access to distracting websites as you specify.
 
 ## Icon
 

package.json

@@ -7,25 +7,30 @@
   "repository": "github:penge/block-site",
   "private": true,
   "engines": {
-    "node": ">=16.0.0",
+    "node": ">=18.0.0",
     "npm": ">=8.0.0"
   },
   "scripts": {
     "lint": "eslint src --ext .ts",
     "test": "TZ=UTC jest",
-    "build": "tsc --noEmit && tsup && npm run copy",
-    "copy": "copyfiles --up 1 public/** dist && copyfiles manifest.json dist"
+    "__rmrf-dist": "rimraf dist",
+    "__no-emit": "tsc --noEmit",
+    "__build-chrome": "TARGET=chrome tsup",
+    "__build-firefox": "TARGET=firefox tsup",
+    "build": "npm-run-all __rmrf-dist __no-emit __build-chrome __build-firefox"
   },
   "devDependencies": {
-    "@types/chrome": "^0.0.208",
-    "@types/jest": "^29.1.2",
-    "@typescript-eslint/eslint-plugin": "^5.48.0",
-    "@typescript-eslint/parser": "^5.48.0",
-    "copyfiles": "^2.4.1",
-    "eslint": "^8.32.0",
-    "jest": "^29.2.0",
-    "ts-jest": "^29.0.3",
-    "tsup": "^6.7.0"
+    "@types/chrome": "^0.0.238",
+    "@types/firefox-webext-browser": "^111.0.1",
+    "@types/jest": "^29.5.0",
+    "@typescript-eslint/eslint-plugin": "^5.60.1",
+    "@typescript-eslint/parser": "^5.60.1",
+    "eslint": "^8.43.0",
+    "jest": "^29.5.0",
+    "npm-run-all": "^4.1.5",
+    "rimraf": "^5.0.1",
+    "ts-jest": "^29.1.0",
+    "tsup": "^7.1.0"
   },
   "dependencies": {
     "dayjs": "^1.11.6"

public/blocked.html

@@ -6,6 +6,7 @@
   <title>Block Site</title>
   <link rel="stylesheet" href="common.css">
   <link rel="stylesheet" href="blocked.css">
+  <link rel="icon" type="image/png" href="icon_32.png">
   <script type="module" src="blocked.mjs"></script>
 </head>
 

public/common.css

@@ -4,7 +4,7 @@
 }
 
 html {
-  font-size: 30px;
+  font-size: 22px;
 }
 
 body:not(.ready) {
@@ -17,6 +17,7 @@ body {
   padding: 50px 100px;
   color: var(--text-color);
   font-family: Calibri, Helvetica, Arial, sans-serif;
+  font-size: 100%;
   -webkit-font-smoothing: antialiased;
   line-height: 150%;
 }

public/manifest-firefox.json

@@ -0,0 +1,31 @@
+{
+  "manifest_version": 3,
+  "name": "Block Site",
+  "description": "Blocks access to distracting websites to improve your productivity.",
+  "version": "5.0.0",
+  "icons": {
+    "32": "icon_32.png",
+    "128": "icon_128.png"
+  },
+  "action": {
+    "default_icon": {
+      "32": "icon_32.png",
+      "128": "icon_128.png"
+    }
+  },
+  "options_ui": {
+    "page": "options.html",
+    "open_in_tab": true
+  },
+  "permissions": [
+    "storage",
+    "tabs",
+    "webNavigation",
+    "contextMenus"
+  ],
+  "background": {
+    "scripts": ["background.mjs"],
+    "type": "module"
+  },
+  "incognito": "spanning"
+}

public/options.html

@@ -6,6 +6,7 @@
   <title>Block Site</title>
   <link rel="stylesheet" href="common.css">
   <link rel="stylesheet" href="options.css">
+  <link rel="icon" type="image/png" href="icon_32.png">
   <script type="module" src="options.mjs"></script>
 </head>
 

src/background.ts

@@ -6,10 +6,10 @@ import blockSite from "./helpers/block-site";
 let __enabled: boolean;
 let __blocked: string[];
 
-initStorage(() => {
+initStorage().then(() => {
   createContextMenu();
 
-  storage.get(["enabled", "blocked"], ({ enabled, blocked }) => {
+  storage.get(["enabled", "blocked"]).then(({ enabled, blocked }) => {
     __enabled = enabled;
     __blocked = blocked;
   });
@@ -47,8 +47,8 @@ chrome.tabs.onUpdated.addListener((tabId, changeInfo) => {
     return;
   }
 
-  const { status, url } = changeInfo;
-  if (status !== "loading" || !url || !url.startsWith("http")) {
+  const { url } = changeInfo;
+  if (!url || !url.startsWith("http")) {
     return;
   }
 

src/helpers/block-site.ts

@@ -17,14 +17,14 @@ export default (options: BlockSiteOptions) => {
 
   const foundRule = findRule(url, blocked);
   if (!foundRule || foundRule.type === "allow") {
-    storage.get(["counter"], ({ counter }) => {
+    storage.get(["counter"]).then(({ counter }) => {
       counterHelper.flushObsoleteEntries({ blocked, counter });
       storage.set({ counter });
     });
     return;
   }
 
-  storage.get(["counter", "counterShow", "counterPeriod", "resolution"], ({ counter, counterShow, counterPeriod, resolution }) => {
+  storage.get(["counter", "counterShow", "counterPeriod", "resolution"]).then(({ counter, counterShow, counterPeriod, resolution }) => {
     counterHelper.flushObsoleteEntries({ blocked, counter });
 
     const timeStamp = Date.now();
@@ -39,14 +39,23 @@ export default (options: BlockSiteOptions) => {
       chrome.tabs.remove(tabId);
       break;
     case "SHOW_BLOCKED_INFO_PAGE": {
-      chrome.tabs.update(tabId, {
+      const commonUpdateProperties = {
         url: getBlockedUrl({
           url,
           rule: foundRule.path,
-          countParams: counterShow ? { count, period: counterPeriod } : undefined },
-        )},
-      );
-      break;
+          countParams: counterShow ? { count, period: counterPeriod } : undefined,
+        }),
+      };
+
+      if (process.env.TARGET === "chrome") {
+        chrome.tabs.update(tabId, commonUpdateProperties);
+        break;
+      }
+
+      if (process.env.TARGET === "firefox") {
+        browser.tabs.update(tabId, { ...commonUpdateProperties, loadReplace: true });
+        break;
+      }
     }}
   });
 };

src/helpers/create-context-menu.ts

@@ -22,7 +22,7 @@ const createContextMenu = () => {
       return;
     }
 
-    storage.get(["blocked"], ({ blocked }) => {
+    storage.get(["blocked"]).then(({ blocked }) => {
       const url = info.pageUrl;
       const normalizedUrl = normalizeUrl(url);
       const updatedBlocked = [...blocked, normalizedUrl];
@@ -34,7 +34,7 @@ const createContextMenu = () => {
 };
 
 export default () => {
-  storage.get(["enabled"], ({ enabled }) => {
+  storage.get(["enabled"]).then(({ enabled }) => {
     chrome.contextMenus.removeAll(() => {
       if (enabled) {
         createContextMenu();

src/options.ts

@@ -17,9 +17,10 @@ const UI = (() => {
   const stringToBoolean = (s: string) => s === "YES";
 
   const getEventTargetValue = (event: Event) => (event.target as HTMLTextAreaElement | HTMLSelectElement).value;
+  const stringToBlocked = (string: string) => string.split("\n").map((s) => s.trim()).filter(Boolean);
 
   elements.blockedList.addEventListener("input", (event) => {
-    const blocked = getEventTargetValue(event).split("\n").map((s) => s.trim()).filter(Boolean);
+    const blocked = stringToBlocked(getEventTargetValue(event));
     storage.set({ blocked });
   });
 
@@ -45,7 +46,10 @@ const UI = (() => {
 
   const init = <T extends Partial<Schema>>(items: T) => {
     if (items.blocked !== undefined) {
-      elements.blockedList.value = items.blocked.join("\r\n"); // display every blocked on a new line
+      const valueAsBlocked = stringToBlocked(elements.blockedList.value);
+      if (JSON.stringify(valueAsBlocked) !== JSON.stringify(items.blocked)) {
+        elements.blockedList.value = items.blocked.join("\r\n");
+      }
     }
 
     if (items.enabled !== undefined) {
@@ -76,7 +80,7 @@ const UI = (() => {
 window.addEventListener("DOMContentLoaded", () => {
   const keys: (keyof Schema)[] = ["blocked", "enabled", "resolution", "counterShow", "counterPeriod"];
 
-  storage.get(keys, (local) => {
+  storage.get(keys).then((local) => {
     UI.init(local);
     document.body.classList.add("ready");
   });

src/storage/index.ts

@@ -2,16 +2,14 @@ import { Schema } from "./schema";
 
 export * from "./schema";
 
-const set = <T extends Partial<Schema>>(items: T, callback?: () => void) => {
-  chrome.storage.local.set(items, callback);
-};
+const set = <T extends Partial<Schema>>(items: T) =>
+  chrome.storage.local.set(items);
 
-const get = <T extends keyof Schema>(keys: T[], callback: (items: Pick<Schema, T>) => void) => {
-  chrome.storage.local.get(keys, (items) => callback(items as Pick<Schema, T>));
-};
+const get = <T extends keyof Schema>(keys: T[]) =>
+  chrome.storage.local.get(keys) as Promise<Pick<Schema, T>>;
 
-const getAll = (callback: (items: Schema) => void) =>
-  get(["enabled", "blocked", "counter", "counterShow", "counterPeriod", "resolution"], callback);
+const getAll = () =>
+  get(["enabled", "blocked", "counter", "counterShow", "counterPeriod", "resolution"]);
 
 export default {
   set,

src/storage/init.ts

@@ -15,13 +15,13 @@ export const getRevisitedSchema = (local: Partial<Schema> | Record<string, unkno
   return revisitedSchema;
 };
 
-export default (callback: () => void) => {
-  storage.getAll((local) => {
+export default (): Promise<void> => new Promise((resolve) => {
+  storage.getAll().then((local) => {
     const revisitedSchema = getRevisitedSchema(local);
     if (Object.keys(revisitedSchema).length) {
-      storage.set(revisitedSchema, callback);
+      storage.set(revisitedSchema).then(resolve);
       return;
     }
-    callback();
+    resolve();
   });
-};
+});

tsup.config.ts

@@ -1,4 +1,7 @@
 import { defineConfig } from "tsup";
+import { copyFile } from "node:fs/promises";
+
+const TARGET = process.env.TARGET as "chrome" | "firefox";
 
 export default defineConfig({
   clean: true,
@@ -7,10 +10,31 @@ export default defineConfig({
     "src/blocked.ts",
     "src/options.ts",
   ],
+  env: { TARGET },
+  outDir: `dist/${TARGET}`,
   target: "es2022",
   format: "esm",
+  treeshake: true,
   noExternal: ["dayjs"],
   esbuildOptions(options) {
     options.chunkNames = "chunks/[name]-[hash]";
-  }
+  },
+  onSuccess: () => new Promise((resolve, reject) => {
+    const files = [
+      "icon_32.png",
+      "icon_128.png",
+      "common.css",
+      "blocked.css",
+      "blocked.html",
+      "options.css",
+      "options.html",
+      `manifest-${TARGET}.json`,
+    ];
+
+    const copyFilesPromises = files.map((file) => (
+      copyFile(`public/${file}`, `dist/${TARGET}/${file.replace(`-${TARGET}`, "")}`)
+    ));
+
+    Promise.all(copyFilesPromises).then(() => resolve()).catch(reject);
+  })
 });