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

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',

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-bin": "^0.196.3",
-    "flow-interfaces-chrome": "^0.6.0",
+    "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",
+    "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-cli": "^5.0.1",
     "webpack-dev-server": "^4.11.1",

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 {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 = {
     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;

extension/src/js/common.js

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

extension/src/js/options.js

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

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<any> {
     return awrap(chrome.permissions.request, params);
 }
 
-export function chromePermissionsContains(params: any) {
+export function chromePermissionsContains(params: any): Promise<any> {
     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<any> {
     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<any> {
     const perms = {
         origins: [
             urlForPermissionsCheck(endpoint),

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();

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
 }

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$/,
-        exclude: /node_modules/,
-        use: {
         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$/,
-        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]'},
+        { context: 'src', from: '**/*.html' },
-        { from: 'src/img/*.png', to: '[name][ext]'},
+        { context: 'src', from: '**/*.png'  },
       ]
     }),
     new WebpackExtensionManifestPlugin({