extension: simplify webpack config a bit, remove some legacy, update dev packages

This commit is contained in:
Dima Gerasimov 2022-12-23 22:34:37 +00:00 committed by karlicoss
parent ddb5fe5c31
commit 83e7de9be9
9 changed files with 32 additions and 28 deletions

View file

@ -2,6 +2,7 @@ const presets = [
[ [
'@babel/preset-env', '@babel/preset-env',
// https://caniuse.com/usage-table // https://caniuse.com/usage-table
// TODO ideally should use https://github.com/browserslist/browserslist
{targets: {chrome: 75, firefox: 75}} {targets: {chrome: 75, firefox: 75}}
], ],
'@babel/preset-flow', '@babel/preset-flow',

View file

@ -30,22 +30,22 @@
"@babel/eslint-parser": "^7.16.3", "@babel/eslint-parser": "^7.16.3",
"@babel/preset-env": "^7.16.4", "@babel/preset-env": "^7.16.4",
"@babel/preset-flow": "^7.16.0", "@babel/preset-flow": "^7.16.0",
"babel-loader": "^8.2.3", "babel-loader": "^9.1.0",
"chrome-webstore-upload-cli": "^2.1.0", "chrome-webstore-upload-cli": "^2.1.0",
"clean-webpack-plugin": "^4.0.0", "clean-webpack-plugin": "^4.0.0",
"copy-webpack-plugin": "^10.0.0", "copy-webpack-plugin": "^11.0.0",
"css-loader": "^6.5.1", "css-loader": "^6.5.1",
"eslint": "^8.15.0", "eslint": "^8.15.0",
"eslint-plugin-flowtype": "^8.0.3", "eslint-plugin-flowtype": "^8.0.3",
"flow-bin": "^0.133.0", "flow-bin": "^0.196.3",
"flow-interfaces-chrome": "^0.6.0", "flow-interfaces-chrome": "^0.7.0",
"jest": "^28.1.0", "jest": "^28.1.0",
"jest-environment-jsdom": "^28.1.0", "jest-environment-jsdom": "^28.1.0",
"jest-fetch-mock": "^3.0.3", "jest-fetch-mock": "^3.0.3",
"node-fetch": "^2.6.1", "node-fetch": "^2.6.1",
"style-loader": "^1.0.0", "style-loader": "^3.3.1",
"web-ext": "^6.8.0", "web-ext": "^7.4.0",
"web-ext-submit": "^6.8.0", "web-ext-submit": "^7.4.0",
"webpack": "^5.75.0", "webpack": "^5.75.0",
"webpack-cli": "^5.0.1", "webpack-cli": "^5.0.1",
"webpack-dev-server": "^4.11.1", "webpack-dev-server": "^4.11.1",

View file

@ -1,8 +1,10 @@
/* @flow */ /* @flow */
// TODO do I really need to annotate all files with @flow?? // TODO do I really need to annotate all files with @flow??
import {COMMAND_CAPTURE_SIMPLE, METHOD_CAPTURE_WITH_EXTRAS, showNotification} from './common'; import {COMMAND_CAPTURE_SIMPLE, METHOD_CAPTURE_WITH_EXTRAS, showNotification} from './common'
import {get_options} from './options'; import {get_options} from './options'
import type {Options} from './options'
type Params = { type Params = {
url: string, url: string,
@ -15,7 +17,7 @@ type Params = {
function makeCaptureRequest( function makeCaptureRequest(
params: Params, params: Params,
options, options: Options,
) { ) {
if (params.tag_str == null) { if (params.tag_str == null) {
params.tag_str = options.default_tags; params.tag_str = options.default_tags;

View file

@ -16,6 +16,7 @@ export function showNotification(text: string, priority: number=0) {
// $FlowFixMe // $FlowFixMe
export function awrap(fn, ...args: Array<any>): Promise<any> { export function awrap(fn, ...args: Array<any>): Promise<any> {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
// $FlowFixMe
const cbb = (...xxx) => { const cbb = (...xxx) => {
const err = chrome.runtime.lastError; const err = chrome.runtime.lastError;
if (err) { if (err) {

View file

@ -1,6 +1,6 @@
/* @flow */ /* @flow */
type Options = { export type Options = {
endpoint: string; endpoint: string;
default_tags: string; default_tags: string;
notification: boolean; notification: boolean;

View file

@ -3,11 +3,11 @@ import {showNotification, awrap} from './common';
import {getOptions} from './options'; import {getOptions} from './options';
export function chromePermissionsRequest(params: any) { export function chromePermissionsRequest(params: any): Promise<any> {
return awrap(chrome.permissions.request, params); return awrap(chrome.permissions.request, params);
} }
export function chromePermissionsContains(params: any) { export function chromePermissionsContains(params: any): Promise<any> {
return awrap(chrome.permissions.contains, params); return awrap(chrome.permissions.contains, params);
} }
@ -23,7 +23,7 @@ function urlForPermissionsCheck(url: string): string {
return u.toString(); return u.toString();
} }
export function hasPermissions(endpoint: string) { export function hasPermissions(endpoint: string): Promise<any> {
const perms = { const perms = {
origins: [ origins: [
urlForPermissionsCheck(endpoint), urlForPermissionsCheck(endpoint),
@ -32,7 +32,7 @@ export function hasPermissions(endpoint: string) {
return chromePermissionsContains(perms); return chromePermissionsContains(perms);
} }
export function ensurePermissions(endpoint: string) { export function ensurePermissions(endpoint: string): Promise<any> {
const perms = { const perms = {
origins: [ origins: [
urlForPermissionsCheck(endpoint), urlForPermissionsCheck(endpoint),

View file

@ -81,9 +81,10 @@ var ctrlEnterSubmit: KeyboardEventListener = (e) => {
// https://stackoverflow.com/a/6003829/706389 // https://stackoverflow.com/a/6003829/706389
function moveCaretToEnd(el) { function moveCaretToEnd(el: HTMLInputElement) {
if (typeof el.selectionStart == "number") { if (typeof el.selectionStart == "number") {
el.selectionStart = el.selectionEnd = el.value.length; el.selectionStart = el.selectionEnd = el.value.length;
// $FlowFixMe https://github.com/facebook/flow/issues/8705
} else if (typeof el.createTextRange != "undefined") { } else if (typeof el.createTextRange != "undefined") {
el.focus(); el.focus();
var range = el.createTextRange(); var range = el.createTextRange();

View file

@ -9,7 +9,7 @@
"page": "options.html" "page": "options.html"
}, },
"browser_action": { "browser_action": {
"default_icon": "unicorn.png", "default_icon": "img/unicorn.png",
"default_popup": "popup.html", "default_popup": "popup.html",
"default_title": "Capture page, with extra information" "default_title": "Capture page, with extra information"
}, },
@ -22,7 +22,7 @@
} }
}, },
"icons": { "icons": {
"128": "unicorn.png" "128": "img/unicorn.png"
}, },
"manifest_version": 2 "manifest_version": 2
} }

View file

@ -94,9 +94,7 @@ const options = {
options_page: path.join(__dirname, "src", "js", "options_page"), options_page: path.join(__dirname, "src", "js", "options_page"),
}, },
output: { output: {
publicPath: '', // https://stackoverflow.com/a/64715069
path: buildPath, path: buildPath,
filename: "[name].js",
}, },
optimization: { optimization: {
// https://webpack.js.org/configuration/optimization // https://webpack.js.org/configuration/optimization
@ -107,28 +105,29 @@ const options = {
rules: [ rules: [
{ {
test: /\.js$/, test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader', loader: 'babel-loader',
} exclude: /node_modules/,
}, },
{ {
test: /\.css$/i, test: /\.css$/,
use: ['style-loader', 'css-loader'], use: 'style-loader!css-loader',
exclude: /node_modules/,
}, },
{ {
test: /\.html$/, test: /\.html$/,
loader: "html-loader", loader: 'html-loader',
exclude: /node_modules/ exclude: /node_modules/
} }
] ]
}, },
plugins: [ plugins: [
new CleanWebpackPlugin(), // ok, respects symlinks new CleanWebpackPlugin(), // ok, respects symlinks
// without copy pluging, webpack only bundles js/json files
new CopyWebpackPlugin({ new CopyWebpackPlugin({
patterns: [ patterns: [
{ from: 'src/*.html' , to: '[name][ext]'}, { context: 'src', from: '**/*.html' },
{ from: 'src/img/*.png', to: '[name][ext]'}, { context: 'src', from: '**/*.png' },
] ]
}), }),
new WebpackExtensionManifestPlugin({ new WebpackExtensionManifestPlugin({