Goyslop/web-extension-starter
Template
1
0
Fork 0
mirror of https://github.com/abhijithvijayan/web-extension-starter.git synced 2026-03-20 01:37:46 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix: apply new prettier rules

Browse Source
This commit is contained in:
abhijithvijayan 2020-04-17 13:00:43 +05:30
parent 2793318d41
commit 9a8f575867
5 changed files with 185 additions and 180 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
package.json
View File

@ -33,7 +33,7 @@
"webextension-polyfill": "^0.6.0" "webextension-polyfill": "^0.6.0"
}, },
"devDependencies": { "devDependencies": {
"@abhijithvijayan/eslint-config": "0.14.1", "@abhijithvijayan/eslint-config": "^1.3.0",
"@babel/core": "^7.9.0", "@babel/core": "^7.9.0",
"@babel/plugin-proposal-object-rest-spread": "^7.9.0", "@babel/plugin-proposal-object-rest-spread": "^7.9.0",
"@babel/plugin-transform-destructuring": "^7.8.8", "@babel/plugin-transform-destructuring": "^7.8.8",
@ -75,4 +75,4 @@
"wext-manifest-webpack-plugin": "^1.0.3", "wext-manifest-webpack-plugin": "^1.0.3",
"zip-webpack-plugin": "^3.0.0" "zip-webpack-plugin": "^3.0.0"
} }
} }

12
source/scripts/background.js
View File

@ -1,14 +1,14 @@
import browser from 'webextension-polyfill'; import browser from 'webextension-polyfill';
browser.runtime.onInstalled.addListener(() => { browser.runtime.onInstalled.addListener(() => {
// eslint-disable-next-line no-console // eslint-disable-next-line no-console
console.log('onInstalled....'); console.log('onInstalled....');
}); });
browser.runtime.onMessage.addListener((_request, _sender, _sendResponse) => { browser.runtime.onMessage.addListener((_request, _sender, _sendResponse) => {
// Do something with the message! // Do something with the message!
// alert(request.url); // alert(request.url);
// And respond back to the sender. // And respond back to the sender.
return Promise.resolve('got your message, thanks!'); return Promise.resolve('got your message, thanks!');
}); });

44
source/scripts/popup.js
View File

@ -1,34 +1,36 @@
import browser from 'webextension-polyfill'; import browser from 'webextension-polyfill';
function openWebPage(url) { function openWebPage(url) {
return browser.tabs.create({ url }); return browser.tabs.create({url});
} }
document.addEventListener('DOMContentLoaded', async () => { document.addEventListener('DOMContentLoaded', async () => {
const tabs = await browser.tabs.query({ const tabs = await browser.tabs.query({
active: true, active: true,
lastFocusedWindow: true, lastFocusedWindow: true,
}); });
const url = tabs.length && tabs[0].url; const url = tabs.length && tabs[0].url;
const response = await browser.runtime.sendMessage({ const response = await browser.runtime.sendMessage({
msg: 'hello', msg: 'hello',
url, url,
}); });
// eslint-disable-next-line no-console // eslint-disable-next-line no-console
console.log(response); console.log(response);
document.getElementById('github__button').addEventListener('click', () => { document.getElementById('github__button').addEventListener('click', () => {
return openWebPage('https://github.com/abhijithvijayan/web-extension-starter'); return openWebPage(
}); 'https://github.com/abhijithvijayan/web-extension-starter'
);
});
document.getElementById('donate__button').addEventListener('click', () => { document.getElementById('donate__button').addEventListener('click', () => {
return openWebPage('https://www.buymeacoffee.com/abhijithvijayan'); return openWebPage('https://www.buymeacoffee.com/abhijithvijayan');
}); });
document.getElementById('options__button').addEventListener('click', () => { document.getElementById('options__button').addEventListener('click', () => {
return openWebPage('options.html'); return openWebPage('options.html');
}); });
}); });

297
webpack.config.js
View File

@ -4,7 +4,7 @@ const ZipPlugin = require('zip-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin'); const TerserPlugin = require('terser-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin'); const CopyWebpackPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin'); const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const ExtensionReloader = require('webpack-extension-reloader'); const ExtensionReloader = require('webpack-extension-reloader');
const WextManifestWebpackPlugin = require('wext-manifest-webpack-plugin'); const WextManifestWebpackPlugin = require('wext-manifest-webpack-plugin');
const FixStyleOnlyEntriesPlugin = require('webpack-fix-style-only-entries'); const FixStyleOnlyEntriesPlugin = require('webpack-fix-style-only-entries');
@ -14,163 +14,166 @@ const nodeEnv = process.env.NODE_ENV || 'development';
const targetBrowser = process.env.TARGET_BROWSER; const targetBrowser = process.env.TARGET_BROWSER;
const extensionReloaderPlugin = const extensionReloaderPlugin =
nodeEnv === 'development' nodeEnv === 'development'
? new ExtensionReloader({ ? new ExtensionReloader({
port: 9090, port: 9090,
reloadPage: true, reloadPage: true,
entries: { entries: {
// TODO: reload manifest on update // TODO: reload manifest on update
contentScript: 'contentScript', contentScript: 'contentScript',
background: 'background', background: 'background',
extensionPage: ['popup', 'options'], extensionPage: ['popup', 'options'],
}, },
}) })
: () => { : () => {
this.apply = () => {}; this.apply = () => {};
}; };
const getExtensionFileType = (browser) => { const getExtensionFileType = (browser) => {
if (browser === 'opera') { if (browser === 'opera') {
return 'crx'; return 'crx';
} }
if (browser === 'firefox') { if (browser === 'firefox') {
return 'xpi'; return 'xpi';
} }
return 'zip'; return 'zip';
}; };
module.exports = { module.exports = {
mode: nodeEnv, mode: nodeEnv,
entry: { entry: {
manifest: './source/manifest.json', manifest: './source/manifest.json',
background: './source/scripts/background.js', background: './source/scripts/background.js',
contentScript: './source/scripts/contentScript.js', contentScript: './source/scripts/contentScript.js',
popup: './source/scripts/popup.js', popup: './source/scripts/popup.js',
options: './source/scripts/options.js', options: './source/scripts/options.js',
styles: ['./source/styles/popup.scss', './source/styles/options.scss'], styles: ['./source/styles/popup.scss', './source/styles/options.scss'],
}, },
output: { output: {
path: path.resolve(__dirname, 'extension', targetBrowser), path: path.resolve(__dirname, 'extension', targetBrowser),
filename: 'js/[name].bundle.js', filename: 'js/[name].bundle.js',
}, },
module: { module: {
rules: [ rules: [
{ {
type: 'javascript/auto', // prevent webpack handling json with its own loaders, type: 'javascript/auto', // prevent webpack handling json with its own loaders,
test: /manifest\.json$/, test: /manifest\.json$/,
use: { use: {
loader: 'wext-manifest-loader', loader: 'wext-manifest-loader',
options: { options: {
usePackageJSONVersion: true, // set to false to not use package.json version for manifest usePackageJSONVersion: true, // set to false to not use package.json version for manifest
}, },
}, },
}, },
{ {
test: /.(js|jsx)$/, test: /.(js|jsx)$/,
include: [path.resolve(__dirname, 'source/scripts')], include: [path.resolve(__dirname, 'source/scripts')],
loader: 'babel-loader', loader: 'babel-loader',
options: { options: {
plugins: ['syntax-dynamic-import'], plugins: ['syntax-dynamic-import'],
presets: [ presets: [
[ [
'@babel/preset-env', '@babel/preset-env',
{ {
modules: false, modules: false,
}, },
],
],
},
},
{
test: /\.scss$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].css',
context: './source/styles/',
outputPath: 'css/',
},
},
'extract-loader',
{
loader: 'css-loader',
options: {
sourceMap: nodeEnv === 'development',
},
},
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
// eslint-disable-next-line global-require
plugins: [require('autoprefixer')()],
},
},
'resolve-url-loader',
'sass-loader',
],
},
],
},
plugins: [
new webpack.ProgressPlugin(),
new WextManifestWebpackPlugin(),
new FixStyleOnlyEntriesPlugin({ silent: true }),
new webpack.EnvironmentPlugin(['NODE_ENV', 'TARGET_BROWSER']),
new CleanWebpackPlugin({
cleanOnceBeforeBuildPatterns: [
path.join(process.cwd(), `extension/${targetBrowser}`),
path.join(process.cwd(), `extension/${targetBrowser}.${getExtensionFileType(targetBrowser)}`),
], ],
cleanStaleWebpackAssets: false, ],
verbose: true, },
}), },
new HtmlWebpackPlugin({ {
template: 'source/options.html', test: /\.scss$/,
// inject: false, use: [
chunks: ['options'], {
filename: 'options.html', loader: 'file-loader',
}), options: {
new HtmlWebpackPlugin({ name: '[name].css',
template: 'source/popup.html', context: './source/styles/',
// inject: false, outputPath: 'css/',
chunks: ['popup'], },
filename: 'popup.html', },
}), 'extract-loader',
new CopyWebpackPlugin([{ from: 'source/assets', to: 'assets' }]), {
extensionReloaderPlugin, loader: 'css-loader',
], options: {
sourceMap: nodeEnv === 'development',
optimization: { },
minimizer: [ },
new TerserPlugin({ {
cache: true, loader: 'postcss-loader',
parallel: true, options: {
terserOptions: { ident: 'postcss',
output: { // eslint-disable-next-line global-require
comments: false, plugins: [require('autoprefixer')()],
}, },
}, },
extractComments: false, 'resolve-url-loader',
}), 'sass-loader',
new OptimizeCSSAssetsPlugin({
cssProcessorPluginOptions: {
preset: ['default', { discardComments: { removeAll: true } }],
},
}),
new ZipPlugin({
path: path.resolve(__dirname, 'extension'),
extension: `${getExtensionFileType(targetBrowser)}`,
filename: `${targetBrowser}`,
}),
], ],
}, },
],
},
plugins: [
new webpack.ProgressPlugin(),
new WextManifestWebpackPlugin(),
new FixStyleOnlyEntriesPlugin({silent: true}),
new webpack.EnvironmentPlugin(['NODE_ENV', 'TARGET_BROWSER']),
new CleanWebpackPlugin({
cleanOnceBeforeBuildPatterns: [
path.join(process.cwd(), `extension/${targetBrowser}`),
path.join(
process.cwd(),
`extension/${targetBrowser}.${getExtensionFileType(targetBrowser)}`
),
],
cleanStaleWebpackAssets: false,
verbose: true,
}),
new HtmlWebpackPlugin({
template: 'source/options.html',
// inject: false,
chunks: ['options'],
filename: 'options.html',
}),
new HtmlWebpackPlugin({
template: 'source/popup.html',
// inject: false,
chunks: ['popup'],
filename: 'popup.html',
}),
new CopyWebpackPlugin([{from: 'source/assets', to: 'assets'}]),
extensionReloaderPlugin,
],
optimization: {
minimizer: [
new TerserPlugin({
cache: true,
parallel: true,
terserOptions: {
output: {
comments: false,
},
},
extractComments: false,
}),
new OptimizeCSSAssetsPlugin({
cssProcessorPluginOptions: {
preset: ['default', {discardComments: {removeAll: true}}],
},
}),
new ZipPlugin({
path: path.resolve(__dirname, 'extension'),
extension: `${getExtensionFileType(targetBrowser)}`,
filename: `${targetBrowser}`,
}),
],
},
}; };

8
yarn.lock
View File

@ -2,10 +2,10 @@
# yarn lockfile v1 # yarn lockfile v1
"@abhijithvijayan/eslint-config@0.14.1": "@abhijithvijayan/eslint-config@^1.3.0":
version "0.14.1" version "1.3.0"
resolved "https://registry.npmjs.org/@abhijithvijayan/eslint-config/-/eslint-config-0.14.1.tgz#ca6a0e0da188cb9d6be1be44a1e054f76be74c69" resolved "https://registry.yarnpkg.com/@abhijithvijayan/eslint-config/-/eslint-config-1.3.0.tgz#cfe741a97f04725fa931e918014dfabc33aefdb1"
integrity sha512-fx/n434sXdKAyKNxtdy91Wn8uqeyfd4fcIC8I1/xb7JTVlqB4uAdp2xVu5KG5hEFL+liauieT97wXNTTJBLTJg== integrity sha512-b823i+e8Tw9auspey0U+3fVziydJ3d0bxUfd+HJdSuuHV/48EO6erPEy3acusqwSQ9uGB3contePze9Yt/n+eA==
"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.8.3": "@babel/code-frame@^7.0.0", "@babel/code-frame@^7.8.3":
version "7.8.3" version "7.8.3"