Add build support for Chromium with Manifest V3.

This commit is contained in:
Bauke 2022-03-20 19:02:37 +01:00
parent e18714c9f2
commit 62f2188070
Signed by: Bauke
GPG Key ID: C1C0F29952BCF558
5 changed files with 62 additions and 14 deletions

View File

@ -10,8 +10,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 queue-chromium-{version}.zip -s build/chromium",
"build:firefox": "VITE_BROWSER=firefox vite build && web-ext build -n queue-firefox-{version}.zip -s build/firefox",
"zip-source": "git archive --format zip --output web-ext-artifacts/queue-source.zip HEAD", "zip-source": "git archive --format zip --output web-ext-artifacts/queue-source.zip HEAD",
"test": "xo && stylelint 'source/**/*.scss' && tsc && c8 ava" "test": "xo && stylelint 'source/**/*.scss' && tsc && c8 ava"
}, },

View File

@ -0,0 +1,27 @@
{
"manifest_version": 3,
"name": "Queue",
"description": "A WebExtension for queueing links.",
"version": "0.2.2",
"permissions": [
"contextMenus",
"storage",
"tabs"
],
"icons": {
"128": "assets/queue.png"
},
"action": {
"default_icon": {
"128": "assets/queue.png"
}
},
"options_ui": {
"page": "options/index.html",
"open_in_tab": true
},
"background": {
"service_worker": "background-scripts/initialize.ts",
"type": "module"
}
}

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';
@ -9,12 +10,34 @@ 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)); const currentDir = path.dirname(url.fileURLToPath(import.meta.url));
const buildDir = path.join(currentDir, 'build');
const sourceDir = path.join(currentDir, 'source'); const sourceDir = path.join(currentDir, 'source');
// Create the Firefox profile if it doesn't already exist. const targetBrowser = process.env.VITE_BROWSER ?? 'firefox';
process.env.VITE_BROWSER = targetBrowser;
let webExtConfig;
if (targetBrowser === 'chromium') {
fs.mkdirSync(path.join(currentDir, 'chromium'), {recursive: true});
webExtConfig = {
browserConsole: true,
chromiumProfile: 'chromium/',
keepProfileChanges: true,
startUrl: 'chrome://extensions/',
target: 'chromium',
};
} else {
fs.mkdirSync(path.join(currentDir, 'firefox'), {recursive: true}); fs.mkdirSync(path.join(currentDir, 'firefox'), {recursive: true});
webExtConfig = {
browserConsole: true,
firefoxProfile: 'firefox/',
keepProfileChanges: true,
startUrl: 'about:debugging#/runtime/this-firefox',
target: 'firefox-desktop',
};
}
const buildDir = path.join(currentDir, 'build', targetBrowser);
export default defineConfig({ export default defineConfig({
build: { build: {
@ -28,15 +51,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: path.join(sourceDir, `${targetBrowser}-manifest.json`),
webExtConfig: { webExtConfig,
browserConsole: true,
firefoxProfile: 'firefox/',
keepProfileChanges: true,
startUrl: 'about:debugging#/runtime/this-firefox',
target: 'firefox-desktop',
},
}), }),
], ],
root: sourceDir, root: sourceDir,