Goyslop/web-extension-starter
Template
1
0
Fork 0
mirror of https://github.com/abhijithvijayan/web-extension-starter.git synced 2025-10-07 07:22:37 +02:00
Code Issues Packages Projects Releases Wiki Activity

refactor: migrate to wext-manifest-loader (breaking change)

Browse Source
This commit is contained in:
abhijithvijayan 2020-04-02 21:28:55 +05:30
parent 459ed4dc12
commit fadc746bc7
5 changed files with 100 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
package.json
View File

@ -73,8 +73,8 @@
"webpack": "^4.42.1",
"webpack-cli": "^3.3.11",
"webpack-extension-reloader": "^1.1.4",
"wext-manifest": "^2.2.0",
"write-webpack-plugin": "^1.1.0",
"wext-manifest-loader": "^1.0.1",
"wext-manifest-webpack-plugin": "^1.0.3",
"zip-webpack-plugin": "^3.0.0"
}
}
}

65
src/manifest.json Normal file
View File

@ -0,0 +1,65 @@
{
"manifest_version": 2,
"name": "Sample WebExtension",
"version": "0.0.0",
"icons": {
"16": "assets/icons/favicon-16.png",
"32": "assets/icons/favicon-32.png",
"48": "assets/icons/favicon-48.png",
"128": "assets/icons/favicon-128.png"
},
"description": "Sample description",
"homepage_url": "https://github.com/abhijithvijayan/web-extension-starter",
"short_name": "Sample Name",
"permissions": [
"activeTab",
"storage",
"http://*/*",
"https://*/*"
],
"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
"__chrome|firefox__author": "abhijithvijayan",
"__opera__developer": {
"name": "abhijithvijayan"
},
"__firefox__applications": {
"gecko": {
"id": "{754FB1AD-CC3B-4856-B6A0-7786F8CA9D17}"
}
},
"__chrome__minimum_chrome_version": "49",
"__opera__minimum_opera_version": "36",
"browser_action": {
"default_popup": "popup.html",
"default_icon": {
"16": "assets/icons/favicon-16.png",
"32": "assets/icons/favicon-32.png",
"48": "assets/icons/favicon-48.png",
"128": "assets/icons/favicon-128.png"
},
"default_title": "tiny title",
"__chrome|opera__chrome_style": false,
"__firefox__browser_style": false
},
"__chrome|opera__options_page": "options.html",
"options_ui": {
"page": "options.html",
"open_in_tab": true,
"__chrome__chrome_style": false
},
"background": {
"scripts": [
"js/background.bundle.js"
],
"__chrome|opera__persistent": false
},
"content_scripts": [{
"matches": [
"http://*/*",
"https://*/*"
],
"js": [
"js/contentScript.bundle.js"
]
}]
}

68
src/manifest/index.js
View File

@ -1,68 +0,0 @@
const pkg = require('../../package.json');
const manifestInput = {
manifest_version: 2,
name: 'Sample WebExtension',
version: pkg.version,
icons: {
'16': 'assets/icons/favicon-16.png',
'32': 'assets/icons/favicon-32.png',
'48': 'assets/icons/favicon-48.png',
'128': 'assets/icons/favicon-128.png',
},
description: 'Sample description',
homepage_url: 'https://github.com/abhijithvijayan/web-extension-starter',
short_name: 'Sample Name',
permissions: ['activeTab', 'storage', 'http://*/*', 'https://*/*'],
content_security_policy: "script-src 'self' 'unsafe-eval'; object-src 'self'",
'__chrome|firefox__author': 'abhijithvijayan',
__opera__developer: {
name: 'abhijithvijayan',
},
__firefox__applications: {
gecko: { id: '{754FB1AD-CC3B-4856-B6A0-7786F8CA9D17}' },
},
__chrome__minimum_chrome_version: '49',
__opera__minimum_opera_version: '36',
browser_action: {
default_popup: 'popup.html',
default_icon: {
'16': 'assets/icons/favicon-16.png',
'32': 'assets/icons/favicon-32.png',
'48': 'assets/icons/favicon-48.png',
'128': 'assets/icons/favicon-128.png',
},
default_title: 'tiny title',
'__chrome|opera__chrome_style': false,
__firefox__browser_style: false,
},
'__chrome|opera__options_page': 'options.html',
options_ui: {
page: 'options.html',
open_in_tab: true,
__chrome__chrome_style: false,
},
background: {
scripts: ['js/background.bundle.js'],
'__chrome|opera__persistent': false,
},
content_scripts: [
{
matches: ['http://*/*', 'https://*/*'],
js: ['js/contentScript.bundle.js'],
},
],
};
module.exports = manifestInput;

21
webpack.config.js
View File

@ -1,25 +1,21 @@
const path = require('path');
const webpack = require('webpack');
const wextManifest = require('wext-manifest');
const ZipPlugin = require('zip-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const WriteWebpackPlugin = require('write-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const ExtensionReloader = require('webpack-extension-reloader');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const WextManifestWebpackPlugin = require('wext-manifest-webpack-plugin');
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const manifestInput = require('./src/manifest');
const viewsPath = path.join(__dirname, 'views');
const sourcePath = path.join(__dirname, 'src');
const destPath = path.join(__dirname, 'extension');
const nodeEnv = process.env.NODE_ENV || 'development';
const targetBrowser = process.env.TARGET_BROWSER;
const manifest = wextManifest[targetBrowser](manifestInput);
const extensionReloaderPlugin =
nodeEnv === 'development'
@ -37,7 +33,7 @@ const extensionReloaderPlugin =
this.apply = () => {};
};
const getExtensionFileType = browser => {
const getExtensionFileType = (browser) => {
if (browser === 'opera') {
return 'crx';
}
@ -53,6 +49,7 @@ module.exports = {
mode: nodeEnv,
entry: {
manifest: path.join(sourcePath, 'manifest.json'),
background: path.join(sourcePath, 'Background', 'index.ts'),
contentScript: path.join(sourcePath, 'ContentScript', 'index.ts'),
popup: path.join(sourcePath, 'Popup', 'index.tsx'),
@ -60,8 +57,8 @@ module.exports = {
},
output: {
filename: 'js/[name].bundle.js',
path: path.join(destPath, targetBrowser),
filename: 'js/[name].bundle.js',
},
resolve: {
@ -73,6 +70,12 @@ module.exports = {
module: {
rules: [
{
type: 'javascript/auto', // prevent webpack handling json with its own loaders,
test: /manifest\.json$/,
use: 'wext-manifest-loader',
exclude: /node_modules/,
},
{
test: /\.(js|ts)x?$/,
loader: 'babel-loader',
@ -106,6 +109,8 @@ module.exports = {
},
plugins: [
// Plugin to not generate js bundle for manifest entry
new WextManifestWebpackPlugin(),
new ForkTsCheckerWebpackPlugin(),
// environmental variables
new webpack.EnvironmentPlugin(['NODE_ENV', 'TARGET_BROWSER']),
@ -134,8 +139,6 @@ module.exports = {
new MiniCssExtractPlugin({ filename: 'css/[name].css' }),
// copy static assets
new CopyWebpackPlugin([{ from: 'src/assets', to: 'assets' }]),
// write manifest.json
new WriteWebpackPlugin([{ name: manifest.name, data: Buffer.from(manifest.content) }]),
// plugin to enable browser reloading in development mode
extensionReloaderPlugin,
],

29
yarn.lock
View File

@ -4667,6 +4667,15 @@ loader-utils@^1.1.0, loader-utils@^1.2.3, loader-utils@^1.4.0:
emojis-list "^3.0.0"
json5 "^1.0.1"
loader-utils@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-2.0.0.tgz#e4cace5b816d425a166b5f097e10cd12b36064b0"
integrity sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==
dependencies:
big.js "^5.2.2"
emojis-list "^3.0.0"
json5 "^2.1.2"
locate-path@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-2.0.0.tgz#2b568b265eec944c6d9c0de9c3dbbbca0354cd8e"
@ -7778,10 +7787,17 @@ webpack@^4.42.1:
watchpack "^1.6.0"
webpack-sources "^1.4.1"
wext-manifest@^2.2.0:
version "2.2.0"
resolved "https://registry.yarnpkg.com/wext-manifest/-/wext-manifest-2.2.0.tgz#fe8074f4a66971acd2f885d0a27a601b437e9aab"
integrity sha512-r2ZTSr/2yIWU8bu8EYHSfHAifaZO3mTiL5iGJ0+6cX7iWcdJtWFe/Kc2HxYc5rDJYl5xY+hqxGEYX0UfOtzpPg==
wext-manifest-loader@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/wext-manifest-loader/-/wext-manifest-loader-1.0.1.tgz#8b8c5fbbd1f78deda2286e7d23c4e3c8920a03b7"
integrity sha512-MSjoe2xhAu2C/3hhOD+/oDR8o0tzqsKQBREgfcE0NBMAAU0BumXCxNTeC0AxoFL8VtV+hjY4+Ljm+gcAIaJ0iw==
dependencies:
loader-utils "^2.0.0"
wext-manifest-webpack-plugin@^1.0.3:
version "1.0.3"
resolved "https://registry.yarnpkg.com/wext-manifest-webpack-plugin/-/wext-manifest-webpack-plugin-1.0.3.tgz#63e376e88c1a6899faaffc57274791555fbcf830"
integrity sha512-OPrUp0WdgRoicktmpURd1SpQB4VJQmB7J382Ez1kHkufuY31W10No/bdkcVzTBa8WwonIWG5wXqO9fmp4tNu7w==
which-module@^1.0.0:
version "1.0.0"
@ -7855,11 +7871,6 @@ wrappy@1:
resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
integrity sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=
write-webpack-plugin@^1.1.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/write-webpack-plugin/-/write-webpack-plugin-1.1.0.tgz#ac60a7fcbc149a8cc33a465420fbdf2f612e9af9"
integrity sha512-/E04VeJtHiOW02ET68yy38KRSOJTtvMFvAV3pLLgtYJWuhhNRQypPQWUsYzChndkRtedspqydOCG134AZZqBaA==
write@1.0.3:
version "1.0.3"
resolved "https://registry.yarnpkg.com/write/-/write-1.0.3.tgz#0800e14523b923a387e415123c865616aae0f5c3"