Initial commit! 🎉

.gitignore

@@ -0,0 +1,112 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# Next.js build output
+.next
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and *not* Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Browser profile directories
+chromium/
+firefox/
+
+# Build output directories
+build/
+web-ext-artifacts/

.stylelintrc.json

@@ -0,0 +1,9 @@
+{
+  "extends": [
+    "stylelint-config-standard-scss"
+  ],
+  "rules": {
+    "no-descending-specificity": null,
+    "string-quotes": "single"
+  }
+}

README.md

@@ -0,0 +1,51 @@
+# WebExtension Template
+
+> An opinionated WebExtension template.
+
+* Building with [Vite] and [vite-plugin-web-extension]
+* Packaging with [git-archive], [pnpm] and [web-ext]
+* [Sass] and [TypeScript] preconfigured
+* [Stylelint] and [XO] code linting
+* [HTM] and [Preact] frontend development
+* Typed browser APIs with [webextension-polyfill]
+
+## Usage
+
+1. Download the repository.
+2. Install the dependencies.
+    * Optionally update the dependencies too.
+3. Start an auto-reloading browser instance for development.
+4. Check for linting and TypeScript errors.
+5. Build the WebExtension for production.
+
+```sh
+# Step 1.
+pnpx degit Holllo/web-ext-template your-awesome-project
+cd your-awesome-project
+
+# Step 2.
+pnpm install
+pnpm update --latest
+
+# Step 3, you can change which browser to use in the Vite config.
+pnpm start
+
+# Step 4.
+pnpm test
+
+# Step 5, see the web-ext-artifacts directory for output.
+pnpm build
+```
+
+[git-archive]: https://git-scm.com/docs/git-archive
+[HTM]: https://github.com/developit/htm
+[pnpm]: https://pnpm.io
+[Preact]: https://preactjs.com
+[Sass]: https://sass-lang.com
+[Stylelint]: https://stylelint.io
+[TypeScript]: https://typescriptlang.org
+[Vite]: https://vitejs.dev
+[vite-plugin-web-extension]: https://github.com/aklinker1/vite-plugin-web-extension
+[web-ext]: https://github.com/mozilla/web-ext
+[webextension-polyfill]: https://github.com/mozilla/webextension-polyfill
+[XO]: https://github.com/xojs/xo

UNLICENSE

@@ -0,0 +1,24 @@
+This is free and unencumbered software released into the public domain.
+
+Anyone is free to copy, modify, publish, use, compile, sell, or
+distribute this software, either in source code form or as a compiled
+binary, for any purpose, commercial or non-commercial, and by any
+means.
+
+In jurisdictions that recognize copyright laws, the author or authors
+of this software dedicate any and all copyright interest in the
+software to the public domain. We make this dedication for the benefit
+of the public at large and to the detriment of our heirs and
+successors. We intend this dedication to be an overt act of
+relinquishment in perpetuity of all present and future rights to this
+software under copyright law.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR
+OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
+ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+OTHER DEALINGS IN THE SOFTWARE.
+
+For more information, please refer to <https://unlicense.org>

package.json

@@ -0,0 +1,38 @@
+{
+  "name": "web-ext-template",
+  "license": "Unlicense",
+  "repository": "https://github.com/Holllo/web-ext-template",
+  "private": true,
+  "scripts": {
+    "start": "vite build -m development --watch",
+    "clean": "trash build web-ext-artifacts",
+    "build": "pnpm clean && vite build && web-ext build --source-dir build && pnpm zip-source",
+    "zip-source": "git archive --format zip --output web-ext-artifacts/webextension_template-source.zip HEAD",
+    "test": "xo && stylelint 'source/**/*.scss' && tsc"
+  },
+  "dependencies": {
+    "@fontsource/inter": "^4.5.4",
+    "htm": "^3.1.0",
+    "modern-normalize": "^1.1.0",
+    "preact": "^10.6.6",
+    "webextension-polyfill": "^0.8.0"
+  },
+  "devDependencies": {
+    "@preact/preset-vite": "^2.1.7",
+    "@types/webextension-polyfill": "^0.8.2",
+    "postcss": "^8.4.7",
+    "sass": "^1.49.9",
+    "stylelint": "^14.5.3",
+    "stylelint-config-standard-scss": "^3.0.0",
+    "trash-cli": "^5.0.0",
+    "typescript": "^4.5.5",
+    "vite": "^2.8.4",
+    "vite-plugin-web-extension": "^1.1.2",
+    "web-ext": "^6.7.0",
+    "xo": "^0.48.0"
+  },
+  "xo": {
+    "prettier": true,
+    "space": true
+  }
+}

source/background-scripts/initialize.ts

@@ -0,0 +1,13 @@
+import browser from 'webextension-polyfill';
+
+browser.browserAction.onClicked.addListener(async () => {
+  await browser.runtime.openOptionsPage();
+});
+
+browser.runtime.onInstalled.addListener(async () => {
+  console.debug('WebExtension Template has been installed!');
+
+  if (import.meta.env.DEV) {
+    await browser.runtime.openOptionsPage();
+  }
+});

source/content-scripts/content-styles.scss

@@ -0,0 +1,3 @@
+body {
+  --web-ext-template: 'active';
+}

source/content-scripts/initialize.ts

@@ -0,0 +1,7 @@
+import './content-styles.scss';
+
+async function initializeScripts() {
+  console.debug('Initializing content scripts!');
+}
+
+void initializeScripts();

source/manifest.json

@@ -0,0 +1,47 @@
+{
+  "$schema": "http://json.schemastore.org/webextension",
+  "manifest_version": 2,
+  "name": "WebExtension Template",
+  "description": "An opinionated WebExtension template.",
+  "version": "0.1.0",
+  "permissions": [
+    "downloads",
+    "storage",
+    "*://example.org/*"
+  ],
+  "content_security_policy": "script-src 'self'; object-src 'self'; style-src 'unsafe-inline'",
+  "web_accessible_resources": [
+    "assets/**"
+  ],
+  "icons": {
+    "128": "assets/web-ext-template-logo.png"
+  },
+  "browser_action": {
+    "default_icon": {
+      "128": "assets/web-ext-template-logo.png"
+    }
+  },
+  "options_ui": {
+    "page": "options/index.html",
+    "open_in_tab": true
+  },
+  "background": {
+    "scripts": [
+      "background-scripts/initialize.ts"
+    ]
+  },
+  "content_scripts": [
+    {
+      "matches": [
+        "*://example.org/*"
+      ],
+      "run_at": "document_end",
+      "css": [
+        "generated:content-scripts/style.css"
+      ],
+      "js": [
+        "content-scripts/initialize.ts"
+      ]
+    }
+  ]
+}

source/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>WebExtension Template</title>
+  <link rel="stylesheet" href="./index.scss">
+</head>
+
+<body>
+  <noscript>
+    This WebExtension doesn't work without JavaScript enabled, sorry! 😭
+  </noscript>
+
+  <script type="module" src="./index.ts"></script>
+</body>
+
+</html>

source/options/index.scss

@@ -0,0 +1,95 @@
+@use '../../node_modules/modern-normalize/modern-normalize.css';
+@use 'scss/reset';
+@use 'scss/mixins';
+
+html {
+  font-size: 62.5%;
+}
+
+body {
+  --background-1: #202020;
+  --background-2: #303030;
+  --foreground-1: #fafafa;
+  --foreground-2: #cacaca;
+  --blue: #40d5fe;
+
+  background-color: var(--background-1);
+  color: var(--foreground-1);
+  font-family: Inter, sans-serif;
+  font-size: 2rem;
+  padding: 1rem;
+}
+
+code {
+  background-color: var(--background-1);
+  font-family: monospace;
+  display: inline-block;
+  padding: 0.25rem;
+}
+
+table {
+  border: 2px solid var(--background-1);
+  border-collapse: collapse;
+
+  td {
+    padding: 1rem;
+
+    &:first-child {
+      font-weight: bold;
+    }
+  }
+
+  tr {
+    &:nth-child(odd) {
+      background-color: var(--background-1);
+    }
+  }
+}
+
+.page-header,
+.page-main {
+  @include mixins.responsive-container;
+
+  background-color: var(--background-2);
+  border: 2px solid var(--blue);
+  border-radius: 1rem;
+}
+
+.page-header {
+  padding: 1rem;
+
+  h1 {
+    align-items: center;
+    display: flex;
+    gap: 1rem;
+  }
+
+  img {
+    border-radius: 1rem;
+    height: 5rem;
+  }
+}
+
+.page-main {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: repeat(2, 1fr);
+  margin-top: 1rem;
+}
+
+.info {
+  padding: 2rem;
+
+  h2 {
+    margin-bottom: 1rem;
+  }
+
+  ul {
+    display: grid;
+    gap: 0.5rem;
+  }
+
+  li {
+    margin-left: 2rem;
+  }
+}

source/options/index.ts

@@ -0,0 +1,64 @@
+import '@fontsource/inter/latin.css';
+
+import browser from 'webextension-polyfill';
+import {html} from 'htm/preact';
+import {Component, render} from 'preact';
+
+window.addEventListener('DOMContentLoaded', () => {
+  console.debug('Options page opened!');
+
+  render(html`<${OptionsPage} />`, document.body);
+});
+
+class OptionsPage extends Component {
+  render() {
+    const manifest = browser.runtime.getManifest();
+
+    const tableRows = [
+      ['Name', manifest.name],
+      ['Description', manifest.description],
+      ['Version', manifest.version],
+      ['Mode', import.meta.env.MODE],
+    ].map(
+      ([key, value]) =>
+        html`
+          <tr>
+            <td>${key}</td>
+            <td>${value}</td>
+          </tr>
+        `,
+    );
+
+    const permissions = manifest.permissions?.map(
+      (permission) => html`<li><code>${permission}</code></li>`,
+    );
+
+    return html`
+      <header class="page-header">
+        <h1>
+          <img
+            alt="WebExtension Template Logo"
+            src="/assets/web-ext-template-logo.png"
+          />
+          WebExtension Template
+        </h1>
+      </header>
+
+      <main class="page-main">
+        <div class="info">
+          <h2>Manifest Info</h2>
+          <table>
+            ${tableRows}
+          </table>
+        </div>
+
+        <div class="info">
+          <h2>Permissions</h2>
+          <ul>
+            ${permissions}
+          </ul>
+        </div>
+      </main>
+    `;
+  }
+}

source/options/scss/mixins.scss

@@ -0,0 +1,11 @@
+@use 'variables';
+
+@mixin responsive-container {
+  margin-left: auto;
+  margin-right: auto;
+  width: variables.$large-breakpoint;
+
+  @media (max-width: variables.$large-breakpoint) {
+    width: 100%;
+  }
+}

source/options/scss/reset.scss

@@ -0,0 +1,12 @@
+h1,
+h2,
+h3,
+h4,
+h5,
+ol,
+ul,
+li,
+p {
+  margin: 0;
+  padding: 0;
+}

source/options/scss/variables.scss

@@ -0,0 +1,4 @@
+$small-breakpoint: 600px;
+$medium-breakpoint: 900px;
+$large-breakpoint: 1200px;
+$extra-large-breakpoint: 1800px;

source/types.d.ts

@@ -0,0 +1,19 @@
+import {html} from 'htm/preact';
+
+declare global {
+  // See Vite documentation for `import.meta.env` usage.
+  // https://vitejs.dev/guide/env-and-mode.html
+
+  interface ImportMeta {
+    readonly env: ImportMetaEnv;
+  }
+
+  interface ImportMetaEnv {
+    readonly BASE_URL: string;
+    readonly DEV: boolean;
+    readonly MODE: string;
+    readonly PROD: boolean;
+  }
+
+  type HtmComponent = ReturnType<typeof html>;
+}

tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "esModuleInterop": true,
+    "lib": [
+      "ESNext"
+    ],
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "noEmit": true,
+    "outDir": "build",
+    "strict": true,
+    "target": "ESNext"
+  },
+  "include": [
+    "source/**/*.ts",
+    "vite.config.ts"
+  ]
+}

vite.config.ts

@@ -0,0 +1,42 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import url from 'node:url';
+
+import {defineConfig} from 'vite';
+
+// Vite Plugins
+import preactPreset from '@preact/preset-vite';
+import webExtension from 'vite-plugin-web-extension';
+
+const currentDir = path.dirname(url.fileURLToPath(import.meta.url));
+
+const buildDir = path.join(currentDir, 'build');
+const sourceDir = path.join(currentDir, 'source');
+
+// Create the Firefox profile if it doesn't already exist.
+fs.mkdirSync(path.join(currentDir, 'firefox'), {recursive: true});
+
+export default defineConfig({
+  build: {
+    outDir: buildDir,
+    sourcemap: 'inline',
+  },
+  plugins: [
+    preactPreset(),
+    // See vite-plugin-web-extension for documentation.
+    // https://github.com/aklinker1/vite-plugin-web-extension
+    webExtension({
+      assets: 'assets',
+      browser: 'firefox',
+      manifest: path.join(sourceDir, 'manifest.json'),
+      webExtConfig: {
+        browserConsole: true,
+        firefoxProfile: 'firefox/',
+        keepProfileChanges: true,
+        startUrl: 'about:debugging#/runtime/this-firefox',
+        target: 'firefox-desktop',
+      },
+    }),
+  ],
+  root: sourceDir,
+});