From 83e7de9be99aebf4ebf9738bf22d96da340bfb45 Mon Sep 17 00:00:00 2001 From: Dima Gerasimov Date: Fri, 23 Dec 2022 22:34:37 +0000 Subject: [PATCH] extension: simplify webpack config a bit, remove some legacy, update dev packages --- extension/babel.config.js | 1 + extension/package.json | 14 +++++++------- extension/src/js/background.js | 8 +++++--- extension/src/js/common.js | 1 + extension/src/js/options.js | 2 +- extension/src/js/permissions.js | 8 ++++---- extension/src/js/popup.js | 3 ++- extension/src/manifest.json | 4 ++-- extension/webpack.config.js | 19 +++++++++---------- 9 files changed, 32 insertions(+), 28 deletions(-) diff --git a/extension/babel.config.js b/extension/babel.config.js index a764417..5f5580d 100644 --- a/extension/babel.config.js +++ b/extension/babel.config.js @@ -2,6 +2,7 @@ const presets = [ [ '@babel/preset-env', // https://caniuse.com/usage-table + // TODO ideally should use https://github.com/browserslist/browserslist {targets: {chrome: 75, firefox: 75}} ], '@babel/preset-flow', diff --git a/extension/package.json b/extension/package.json index faba5b7..acedaca 100644 --- a/extension/package.json +++ b/extension/package.json @@ -30,22 +30,22 @@ "@babel/eslint-parser": "^7.16.3", "@babel/preset-env": "^7.16.4", "@babel/preset-flow": "^7.16.0", - "babel-loader": "^8.2.3", + "babel-loader": "^9.1.0", "chrome-webstore-upload-cli": "^2.1.0", "clean-webpack-plugin": "^4.0.0", - "copy-webpack-plugin": "^10.0.0", + "copy-webpack-plugin": "^11.0.0", "css-loader": "^6.5.1", "eslint": "^8.15.0", "eslint-plugin-flowtype": "^8.0.3", - "flow-bin": "^0.133.0", - "flow-interfaces-chrome": "^0.6.0", + "flow-bin": "^0.196.3", + "flow-interfaces-chrome": "^0.7.0", "jest": "^28.1.0", "jest-environment-jsdom": "^28.1.0", "jest-fetch-mock": "^3.0.3", "node-fetch": "^2.6.1", - "style-loader": "^1.0.0", - "web-ext": "^6.8.0", - "web-ext-submit": "^6.8.0", + "style-loader": "^3.3.1", + "web-ext": "^7.4.0", + "web-ext-submit": "^7.4.0", "webpack": "^5.75.0", "webpack-cli": "^5.0.1", "webpack-dev-server": "^4.11.1", diff --git a/extension/src/js/background.js b/extension/src/js/background.js index 4555b38..f8c3c0e 100644 --- a/extension/src/js/background.js +++ b/extension/src/js/background.js @@ -1,8 +1,10 @@ /* @flow */ // TODO do I really need to annotate all files with @flow?? -import {COMMAND_CAPTURE_SIMPLE, METHOD_CAPTURE_WITH_EXTRAS, showNotification} from './common'; -import {get_options} from './options'; +import {COMMAND_CAPTURE_SIMPLE, METHOD_CAPTURE_WITH_EXTRAS, showNotification} from './common' +import {get_options} from './options' +import type {Options} from './options' + type Params = { url: string, @@ -15,7 +17,7 @@ type Params = { function makeCaptureRequest( params: Params, - options, + options: Options, ) { if (params.tag_str == null) { params.tag_str = options.default_tags; diff --git a/extension/src/js/common.js b/extension/src/js/common.js index b1010a4..7e578db 100644 --- a/extension/src/js/common.js +++ b/extension/src/js/common.js @@ -16,6 +16,7 @@ export function showNotification(text: string, priority: number=0) { // $FlowFixMe export function awrap(fn, ...args: Array): Promise { return new Promise((resolve, reject) => { + // $FlowFixMe const cbb = (...xxx) => { const err = chrome.runtime.lastError; if (err) { diff --git a/extension/src/js/options.js b/extension/src/js/options.js index 7b53c32..39341f2 100644 --- a/extension/src/js/options.js +++ b/extension/src/js/options.js @@ -1,6 +1,6 @@ /* @flow */ -type Options = { +export type Options = { endpoint: string; default_tags: string; notification: boolean; diff --git a/extension/src/js/permissions.js b/extension/src/js/permissions.js index 10f4a99..a3396e1 100644 --- a/extension/src/js/permissions.js +++ b/extension/src/js/permissions.js @@ -3,11 +3,11 @@ import {showNotification, awrap} from './common'; import {getOptions} from './options'; -export function chromePermissionsRequest(params: any) { +export function chromePermissionsRequest(params: any): Promise { return awrap(chrome.permissions.request, params); } -export function chromePermissionsContains(params: any) { +export function chromePermissionsContains(params: any): Promise { return awrap(chrome.permissions.contains, params); } @@ -23,7 +23,7 @@ function urlForPermissionsCheck(url: string): string { return u.toString(); } -export function hasPermissions(endpoint: string) { +export function hasPermissions(endpoint: string): Promise { const perms = { origins: [ urlForPermissionsCheck(endpoint), @@ -32,7 +32,7 @@ export function hasPermissions(endpoint: string) { return chromePermissionsContains(perms); } -export function ensurePermissions(endpoint: string) { +export function ensurePermissions(endpoint: string): Promise { const perms = { origins: [ urlForPermissionsCheck(endpoint), diff --git a/extension/src/js/popup.js b/extension/src/js/popup.js index bbe4b1f..bc3aa7b 100644 --- a/extension/src/js/popup.js +++ b/extension/src/js/popup.js @@ -81,9 +81,10 @@ var ctrlEnterSubmit: KeyboardEventListener = (e) => { // https://stackoverflow.com/a/6003829/706389 -function moveCaretToEnd(el) { +function moveCaretToEnd(el: HTMLInputElement) { if (typeof el.selectionStart == "number") { el.selectionStart = el.selectionEnd = el.value.length; + // $FlowFixMe https://github.com/facebook/flow/issues/8705 } else if (typeof el.createTextRange != "undefined") { el.focus(); var range = el.createTextRange(); diff --git a/extension/src/manifest.json b/extension/src/manifest.json index 331c235..4592c06 100644 --- a/extension/src/manifest.json +++ b/extension/src/manifest.json @@ -9,7 +9,7 @@ "page": "options.html" }, "browser_action": { - "default_icon": "unicorn.png", + "default_icon": "img/unicorn.png", "default_popup": "popup.html", "default_title": "Capture page, with extra information" }, @@ -22,7 +22,7 @@ } }, "icons": { - "128": "unicorn.png" + "128": "img/unicorn.png" }, "manifest_version": 2 } diff --git a/extension/webpack.config.js b/extension/webpack.config.js index 47d0671..5953d50 100644 --- a/extension/webpack.config.js +++ b/extension/webpack.config.js @@ -94,9 +94,7 @@ const options = { options_page: path.join(__dirname, "src", "js", "options_page"), }, output: { - publicPath: '', // https://stackoverflow.com/a/64715069 path: buildPath, - filename: "[name].js", }, optimization: { // https://webpack.js.org/configuration/optimization @@ -107,28 +105,29 @@ const options = { rules: [ { test: /\.js$/, + loader: 'babel-loader', exclude: /node_modules/, - use: { - loader: 'babel-loader', - } }, { - test: /\.css$/i, - use: ['style-loader', 'css-loader'], + test: /\.css$/, + use: 'style-loader!css-loader', + exclude: /node_modules/, }, { test: /\.html$/, - loader: "html-loader", + loader: 'html-loader', exclude: /node_modules/ } ] }, plugins: [ new CleanWebpackPlugin(), // ok, respects symlinks + + // without copy pluging, webpack only bundles js/json files new CopyWebpackPlugin({ patterns: [ - { from: 'src/*.html' , to: '[name][ext]'}, - { from: 'src/img/*.png', to: '[name][ext]'}, + { context: 'src', from: '**/*.html' }, + { context: 'src', from: '**/*.png' }, ] }), new WebpackExtensionManifestPlugin({