Add a bunch of files.

2023-06-11 16:17:01 +02:00 · 2023-06-11 16:17:01 +02:00 · ebb365223a
parent 137b7a5f18
commit ebb365223a
9 changed files with 347 additions and 0 deletions
--- a/source/assets/options/index.html
+++ b/source/assets/options/index.html
@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Tildes Shepherd</title>
+  <link rel="shortcut icon" href="/tildes-shepherd.png" type="image/png">
+</head>
+
+<body class="catppuccin">
+  <noscript>
+    This WebExtension doesn't work without JavaScript enabled, sorry! 😭
+  </noscript>
+
+  <script type="module" src="./setup.js"></script>
+</body>
+
+</html>
--- a/source/assets/tildes-shepherd.png
+++ b/source/assets/tildes-shepherd.png
--- a/source/assets/tildes-shepherd.svg
+++ b/source/assets/tildes-shepherd.svg
@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 100 100">
+  <rect fill="#002b36" width="100" height="100"/>
+  <g>
+    <rect fill="#859900" width="12.5" height="12.5" x="50" y="75"/> -->
+    <rect fill="#2aa198" width="12.5" height="12.5" x="50" y="62.5"/>
+    <rect fill="#268bd2" width="12.5" height="12.5" x="37.5" y="50"/>
+    <rect fill="#6c71c4" width="12.5" height="12.5" x="25" y="37.5"/>
+    <rect fill="#d33682" width="12.5" height="12.5" x="25" y="25"/>
+    <rect fill="#dc322f" width="12.5" height="12.5" x="37.5" y="12.5"/>
+    <rect fill="#cb4b16" width="12.5" height="12.5" x="50" y="12.5"/>
+    <rect fill="#b58900" width="12.5" height="12.5" x="62.5" y="25"/>
+  </g>
+</svg>
--- a/source/background/setup.ts
+++ b/source/background/setup.ts
@ -0,0 +1,27 @@
+// The main entry point for the background script. Note that in Manifest V3 this
+// is run in a service worker.
+// https://developer.chrome.com/docs/extensions/migrating/to-service-workers/
+
+import browser from "webextension-polyfill";
+
+if ($browser === "firefox") {
+  browser.browserAction.onClicked.addListener(async () => {
+    await browser.runtime.openOptionsPage();
+  });
+} else {
+  browser.action.onClicked.addListener(async () => {
+    await browser.runtime.openOptionsPage();
+  });
+}
+
+browser.runtime.onInstalled.addListener(async () => {
+  if (!$dev) {
+    await browser.runtime.openOptionsPage();
+  }
+});
+
+browser.runtime.onMessage.addListener(async (message) => {
+  if (message === "open-options-page") {
+    await browser.runtime.openOptionsPage();
+  }
+});
--- a/source/build.ts
+++ b/source/build.ts
@ -0,0 +1,120 @@
+import path from "node:path";
+import process from "node:process";
+import fsp from "node:fs/promises";
+import esbuild from "esbuild";
+import copyPlugin from "esbuild-copy-static-files";
+import {sassPlugin, type SassPluginOptions} from "esbuild-sass-plugin";
+import cssnano from "cssnano";
+import postcss from "postcss";
+import {createManifest} from "./manifest.js";
+import {createWebExtConfig} from "./web-ext.js";
+
+/**
+ * Create an absolute path from a given relative one, using the directory
+ * this file is located in as the base.
+ *
+ * @param relative The relative path to make absolute.
+ * @returns The absolute path.
+ */
+function toAbsolutePath(relative: string): string {
+  return new URL(relative, import.meta.url).pathname;
+}
+
+// Create variables based on the environment.
+const browser = process.env.BROWSER ?? "firefox";
+const dev = process.env.NODE_ENV === "development";
+const test = process.env.TEST === "true";
+const watch = process.env.WATCH === "true";
+
+// Create absolute paths to various directories.
+const buildDir = toAbsolutePath("../build");
+const outDir = path.join(buildDir, browser);
+const sourceDir = toAbsolutePath("../source");
+
+// Ensure that the output directory exists.
+await fsp.mkdir(outDir, {recursive: true});
+
+// Write the WebExtension manifest file.
+await fsp.writeFile(
+  path.join(outDir, "manifest.json"),
+  JSON.stringify(createManifest(browser)),
+);
+
+// Write the web-ext configuration file.
+await fsp.writeFile(
+  path.join(buildDir, `web-ext-${browser}.json`),
+  JSON.stringify(createWebExtConfig(browser, buildDir, dev, outDir)),
+);
+
+const cssProcessor = postcss([cssnano()]);
+
+const createSassPlugin = (type: SassPluginOptions["type"]) => {
+  return sassPlugin({
+    type,
+    async transform(source) {
+      // In development, don't do any extra processing.
+      if (dev) {
+        return source;
+      }
+
+      // But in production, run the CSS through PostCSS.
+      const {css} = await cssProcessor.process(source, {from: undefined});
+      return css;
+    },
+  });
+};
+
+const options: esbuild.BuildOptions = {
+  bundle: true,
+  // Define variables to be replaced in the code. Note that these are replaced
+  // "as is" and so we have to stringify them as JSON, otherwise a string won't
+  // have its quotes for example.
+  define: {
+    $browser: JSON.stringify(browser),
+    $dev: JSON.stringify(dev),
+    $test: JSON.stringify(test),
+  },
+  entryPoints: [
+    path.join(sourceDir, "background/setup.ts"),
+    path.join(sourceDir, "options/setup.tsx"),
+    path.join(sourceDir, "content-scripts/setup.ts"),
+  ],
+  format: "esm",
+  logLevel: "info",
+  minify: !dev,
+  outdir: outDir,
+  plugins: [
+    // Copy all files from `source/assets/` to the output directory.
+    copyPlugin({src: path.join(sourceDir, "assets/"), dest: outDir}),
+    // Compile SCSS to CSS.
+    createSassPlugin("style"),
+  ],
+  // Link sourcemaps in development but omit them in production.
+  sourcemap: dev ? "linked" : false,
+  // Currently code splitting can't be used because we use ES modules and
+  // Firefox doesn't run the background script with `type="module"`.
+  // Once Firefox properly supports Manifest V3 this should be possible though.
+  splitting: false,
+  // Target ES2022, and the first Chromium and Firefox releases from 2022.
+  target: ["es2022", "chrome97", "firefox102"],
+  treeShaking: true,
+};
+
+const contentStyleOptions: esbuild.BuildOptions = {
+  entryPoints: [path.join(sourceDir, "scss/shepherd/shepherd.scss")],
+  logLevel: options.logLevel,
+  minify: options.minify,
+  outfile: path.join(outDir, "css/shepherd.css"),
+  plugins: [createSassPlugin("css")],
+  sourcemap: options.sourcemap,
+  target: options.target,
+};
+
+if (watch) {
+  const context = await esbuild.context(options);
+  const contentStyleContext = await esbuild.context(contentStyleOptions);
+  await Promise.all([context.watch(), contentStyleContext.watch()]);
+} else {
+  await esbuild.build(options);
+  await esbuild.build(contentStyleOptions);
+}
--- a/source/manifest.ts
+++ b/source/manifest.ts
@ -0,0 +1,69 @@
+/* eslint-disable @typescript-eslint/naming-convention */
+
+import {type Manifest} from "webextension-polyfill";
+
+/**
+ * Creates the WebExtension manifest based on the browser target.
+ *
+ * @param browser The browser target ("firefox" or "chromium").
+ * @returns The WebExtension manifest.
+ */
+export function createManifest(browser: string): Manifest.WebExtensionManifest {
+  const manifest: Manifest.WebExtensionManifest = {
+    manifest_version: Number.NaN,
+    name: "Tildes Shepherd",
+    version: "0.1.0",
+    permissions: ["storage"],
+    options_ui: {
+      page: "options/index.html",
+      open_in_tab: true,
+    },
+    content_scripts: [
+      {
+        css: ["css/shepherd.css"],
+        js: ["content-scripts/setup.js"],
+        matches: ["https://*.tildes.net/*"],
+        run_at: "document_start",
+      },
+    ],
+  };
+
+  const icons: Manifest.IconPath = {
+    128: "tildes-shepherd.png",
+  };
+
+  const action: Manifest.ActionManifest = {
+    default_icon: icons,
+  };
+
+  const backgroundScript = "background/setup.js";
+
+  if (browser === "firefox") {
+    manifest.manifest_version = 2;
+    manifest.background = {
+      scripts: [backgroundScript],
+    };
+    manifest.browser_action = action;
+    manifest.browser_specific_settings = {
+      gecko: {
+        // TODO: Add the AMO ID once it has been published.
+        strict_min_version: "102.0",
+      },
+    };
+  } else if (browser === "chromium") {
+    manifest.manifest_version = 3;
+    manifest.action = action;
+    manifest.background = {
+      service_worker: backgroundScript,
+      type: "module",
+    };
+  } else {
+    throw new Error(`Unknown target browser: ${browser}`);
+  }
+
+  if (Number.isNaN(manifest.manifest_version)) {
+    throw new TypeError("Manifest version is NaN");
+  }
+
+  return manifest;
+}
--- a/source/packages.d.ts
+++ b/source/packages.d.ts
@ -0,0 +1,15 @@
+// Type definitions for third-party packages.
+
+declare module "esbuild-copy-static-files" {
+  import {type cpSync} from "node:fs";
+  import {type Plugin} from "esbuild";
+
+  type CopySyncParameters = Parameters<typeof cpSync>;
+
+  type Options = {
+    src?: CopySyncParameters[0];
+    dest?: CopySyncParameters[1];
+  } & CopySyncParameters[2];
+
+  export default function (options: Options): Plugin;
+}
--- a/source/types.d.ts
+++ b/source/types.d.ts
@ -0,0 +1,8 @@
+// Export something so TypeScript doesn't see this file as an ambient module.
+export {};
+
+declare global {
+  const $browser: "chromium" | "firefox";
+  const $dev: boolean;
+  const $test: boolean;
+}
--- a/source/web-ext.ts
+++ b/source/web-ext.ts
@ -0,0 +1,75 @@
+import path from "node:path";
+
+/**
+ * Barebones type definition for web-ext configuration.
+ *
+ * Since web-ext doesn't export any types this is done by ourselves. The keys
+ * mostly follow a camelCased version of the CLI options
+ * (ie. --start-url becomes startUrl).
+ */
+type WebExtConfig = {
+  artifactsDir: string;
+  sourceDir: string;
+  verbose?: boolean;
+
+  build: {
+    filename: string;
+    overwriteDest: boolean;
+  };
+
+  run: {
+    browserConsole: boolean;
+    firefoxProfile: string;
+    keepProfileChanges: boolean;
+    profileCreateIfMissing: boolean;
+    startUrl: string[];
+    target: string[];
+  };
+};
+
+/**
+ * Create the web-ext configuration.
+ *
+ * @param browser The browser target ("firefox" or "chromium").
+ * @param buildDir The path to the build directory.
+ * @param dev Is this for development or production.
+ * @param outDir The path to the output directory.
+ * @returns The configuration for web-ext.
+ */
+export function createWebExtConfig(
+  browser: string,
+  buildDir: string,
+  dev: boolean,
+  outDir: string,
+): WebExtConfig {
+  const config: WebExtConfig = {
+    artifactsDir: path.join(buildDir, "artifacts"),
+    sourceDir: outDir,
+
+    build: {
+      filename: `{name}-{version}-${browser}.zip`,
+      overwriteDest: true,
+    },
+
+    run: {
+      browserConsole: dev,
+      firefoxProfile: path.join(buildDir, "firefox-profile/"),
+      keepProfileChanges: true,
+      profileCreateIfMissing: true,
+      startUrl: [],
+      target: [],
+    },
+  };
+
+  if (browser === "firefox") {
+    config.run.startUrl.push("about:debugging#/runtime/this-firefox");
+    config.run.target.push("firefox-desktop");
+  } else if (browser === "chromium") {
+    config.run.startUrl.push("chrome://extensions/");
+    config.run.target.push("chromium");
+  } else {
+    throw new Error(`Unknown target browser: ${browser}`);
+  }
+
+  return config;
+}