mirror of
https://github.com/abhijithvijayan/web-extension-starter.git
synced 2025-10-07 07:22:37 +02:00
refactor: replace wext-manifest with wext-manifest-loader
This commit is contained in:
abhijithvijayan
parent
3c050d006d
commit
514ec23e39
@ -90,7 +90,7 @@ Then run the following:
|
||||
- Check the `Developer Mode` and load as unpacked from extension’s extracted directory.
|
||||
|
||||
### Generating browser specific manifest.json
|
||||
Update `src/manifest/index.js` file with browser vendor prefixed manifest keys
|
||||
Update `src/manifest.json` file with browser vendor prefixed manifest keys
|
||||
|
||||
```js
|
||||
{
|
||||
@ -127,7 +127,7 @@ if the vendor is `chrome` or `opera`, this compiles to:
|
||||
}
|
||||
```
|
||||
|
||||
See the original [README](https://github.com/abhijithvijayan/wext-manifest) of wext-manifest package for more details
|
||||
See the original [README](https://github.com/abhijithvijayan/wext-manifest-loader) of `wext-manifest-loader` package for more details
|
||||
|
||||
### Production
|
||||
|
||||
|
||||
@ -65,8 +65,8 @@
|
||||
"webpack-cli": "^3.3.11",
|
||||
"webpack-extension-reloader": "^1.1.4",
|
||||
"webpack-fix-style-only-entries": "^0.4.0",
|
||||
"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
65
src/manifest.json
Normal 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"
|
||||
]
|
||||
}]
|
||||
}
|
||||
@ -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;
|
||||
@ -1,21 +1,17 @@
|
||||
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 WextManifestWebpackPlugin = require('wext-manifest-webpack-plugin');
|
||||
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
|
||||
const FixStyleOnlyEntriesPlugin = require('webpack-fix-style-only-entries');
|
||||
|
||||
const manifestInput = require('./src/manifest');
|
||||
|
||||
const nodeEnv = process.env.NODE_ENV || 'development';
|
||||
const targetBrowser = process.env.TARGET_BROWSER;
|
||||
const manifest = wextManifest[targetBrowser](manifestInput);
|
||||
|
||||
const extensionReloaderPlugin =
|
||||
nodeEnv === 'development'
|
||||
@ -48,6 +44,7 @@ module.exports = {
|
||||
mode: nodeEnv,
|
||||
|
||||
entry: {
|
||||
manifest: './src/manifest.json',
|
||||
background: './src/scripts/background.js',
|
||||
contentScript: './src/scripts/contentScript.js',
|
||||
popup: './src/scripts/popup.js',
|
||||
@ -56,12 +53,18 @@ module.exports = {
|
||||
},
|
||||
|
||||
output: {
|
||||
filename: 'js/[name].bundle.js',
|
||||
path: path.resolve(__dirname, 'extension', targetBrowser),
|
||||
filename: 'js/[name].bundle.js'
|
||||
},
|
||||
|
||||
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|jsx)$/,
|
||||
include: [path.resolve(__dirname, 'src/scripts')],
|
||||
@ -115,6 +118,7 @@ module.exports = {
|
||||
|
||||
plugins: [
|
||||
new webpack.ProgressPlugin(),
|
||||
new WextManifestWebpackPlugin(),
|
||||
new FixStyleOnlyEntriesPlugin({ silent: true }),
|
||||
new webpack.EnvironmentPlugin(['NODE_ENV', 'TARGET_BROWSER']),
|
||||
new CleanWebpackPlugin({
|
||||
@ -138,7 +142,6 @@ module.exports = {
|
||||
filename: 'popup.html',
|
||||
}),
|
||||
new CopyWebpackPlugin([{ from: 'src/assets', to: 'assets' }]),
|
||||
new WriteWebpackPlugin([{ name: manifest.name, data: Buffer.from(manifest.content) }]),
|
||||
extensionReloaderPlugin,
|
||||
],
|
||||
|
||||
|
||||
20
yarn.lock
20
yarn.lock
@ -8086,10 +8086,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"
|
||||
@ -8156,11 +8163,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"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user