1
Fork 0

Add Chromium/Manifest V3 compatibility.

This commit is contained in:
Bauke 2022-03-23 21:52:22 +01:00
parent f3d7e6163d
commit cf37b1a523
Signed by: Bauke
GPG Key ID: C1C0F29952BCF558
6 changed files with 97 additions and 65 deletions

View File

@ -5,8 +5,11 @@
"private": true, "private": true,
"scripts": { "scripts": {
"start": "vite build -m development --watch", "start": "vite build -m development --watch",
"start:chromium": "VITE_BROWSER=chromium pnpm start",
"clean": "trash build web-ext-artifacts", "clean": "trash build web-ext-artifacts",
"build": "pnpm clean && vite build && web-ext build --source-dir build && pnpm zip-source", "build": "pnpm clean && pnpm build:chromium && pnpm build:firefox && pnpm zip-source",
"build:chromium": "VITE_BROWSER=chromium vite build && web-ext build -n web-ext-template-chromium-{version}.zip -s build/chromium",
"build:firefox": "VITE_BROWSER=firefox vite build && web-ext build -n web-ext-template-firefox-{version}.zip -s build/firefox",
"zip-source": "git archive --format zip --output web-ext-artifacts/webextension_template-source.zip HEAD", "zip-source": "git archive --format zip --output web-ext-artifacts/webextension_template-source.zip HEAD",
"test": "xo && stylelint 'source/**/*.scss' && tsc" "test": "xo && stylelint 'source/**/*.scss' && tsc"
}, },

View File

@ -1,8 +1,14 @@
import browser from 'webextension-polyfill'; import browser from 'webextension-polyfill';
browser.browserAction.onClicked.addListener(async () => { async function browserActionClicked() {
await browser.runtime.openOptionsPage(); await browser.runtime.openOptionsPage();
}); }
if (import.meta.env.VITE_BROWSER === 'chromium') {
browser.action.onClicked.addListener(browserActionClicked);
} else {
browser.browserAction.onClicked.addListener(browserActionClicked);
}
browser.runtime.onInstalled.addListener(async () => { browser.runtime.onInstalled.addListener(async () => {
console.debug('WebExtension Template has been installed!'); console.debug('WebExtension Template has been installed!');

View File

@ -1,47 +0,0 @@
{
"$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": [
"content-scripts/content-styles.scss"
],
"js": [
"content-scripts/initialize.ts"
]
}
]
}

55
source/manifest.ts Normal file
View File

@ -0,0 +1,55 @@
/* eslint-disable @typescript-eslint/naming-convention */
export default function createManifest(
target: string,
): Record<string, unknown> {
const manifest: Record<string, unknown> = {
name: 'WebExtension Template',
description: 'An opinionated WebExtension template.',
version: '0.1.0',
permissions: ['downloads', 'storage'],
options_ui: {
page: 'options/index.html',
open_in_tab: true,
},
content_scripts: [
{
matches: ['*://example.org/*'],
run_at: 'document_end',
css: ['content-scripts/content-styles.scss'],
js: ['content-scripts/initialize.ts'],
},
],
};
const icons = {
128: 'assets/web-ext-template-logo.png',
};
manifest.icons = icons;
const browserAction = {
default_icon: icons,
};
const backgroundScript = 'background-scripts/initialize.ts';
if (target === 'chromium') {
manifest.manifest_version = 3;
manifest.action = browserAction;
manifest.background = {
service_worker: backgroundScript,
type: 'module',
};
manifest.host_permissions = ['*://example.org/*'];
} else {
manifest.manifest_version = 2;
manifest.browser_action = browserAction;
manifest.background = {
scripts: [backgroundScript],
};
(manifest.permissions as string[]).push('*://example.org/*');
}
return manifest;
}

1
source/types.d.ts vendored
View File

@ -13,6 +13,7 @@ declare global {
readonly DEV: boolean; readonly DEV: boolean;
readonly MODE: string; readonly MODE: string;
readonly PROD: boolean; readonly PROD: boolean;
readonly VITE_BROWSER: 'chromium' | 'firefox';
} }
type HtmComponent = ReturnType<typeof html>; type HtmComponent = ReturnType<typeof html>;

View File

@ -1,5 +1,6 @@
import fs from 'node:fs'; import fs from 'node:fs';
import path from 'node:path'; import path from 'node:path';
import process from 'node:process';
import url from 'node:url'; import url from 'node:url';
import {defineConfig} from 'vite'; import {defineConfig} from 'vite';
@ -8,19 +9,38 @@ import {defineConfig} from 'vite';
import preactPreset from '@preact/preset-vite'; import preactPreset from '@preact/preset-vite';
import webExtension from 'vite-plugin-web-extension'; import webExtension from 'vite-plugin-web-extension';
const currentDir = path.dirname(url.fileURLToPath(import.meta.url)); import createManifest from './source/manifest.js';
const buildDir = path.join(currentDir, 'build'); const targetBrowser = process.env.VITE_BROWSER ?? 'firefox';
process.env.VITE_BROWSER = targetBrowser;
const currentDir = path.dirname(url.fileURLToPath(import.meta.url));
const buildDir = path.join(currentDir, 'build', targetBrowser);
const sourceDir = path.join(currentDir, 'source'); const sourceDir = path.join(currentDir, 'source');
// Create the Firefox profile if it doesn't already exist. // Create the browser profile if it doesn't already exist.
fs.mkdirSync(path.join(currentDir, 'firefox'), {recursive: true}); fs.mkdirSync(path.join(currentDir, targetBrowser), {recursive: true});
const webExtConfig: Record<string, unknown> = {
browserConsole: true,
chromiumProfile: 'chromium/',
firefoxProfile: 'firefox/',
keepProfileChanges: true,
};
if (targetBrowser === 'chromium') {
webExtConfig.startUrl = 'chrome://extensions/';
webExtConfig.target = 'chromium';
} else {
webExtConfig.startUrl = 'about:debugging#/runtime/this-firefox';
webExtConfig.target = 'firefox-desktop';
}
export default defineConfig({ export default defineConfig({
build: { build: {
minify: false,
outDir: buildDir, outDir: buildDir,
sourcemap: true, minify: false,
sourcemap: 'inline',
}, },
plugins: [ plugins: [
preactPreset(), preactPreset(),
@ -28,15 +48,9 @@ export default defineConfig({
// https://github.com/aklinker1/vite-plugin-web-extension // https://github.com/aklinker1/vite-plugin-web-extension
webExtension({ webExtension({
assets: 'assets', assets: 'assets',
browser: 'firefox', browser: targetBrowser,
manifest: path.join(sourceDir, 'manifest.json'), manifest: () => createManifest(targetBrowser),
webExtConfig: { webExtConfig,
browserConsole: true,
firefoxProfile: 'firefox/',
keepProfileChanges: true,
startUrl: 'about:debugging#/runtime/this-firefox',
target: 'firefox-desktop',
},
}), }),
], ],
root: sourceDir, root: sourceDir,