hiikezoe/web-ext-webpack-plugin

Extension not running in Firefox despite working when launched with `web-ext run`

nesbocaj opened this issue · 5 comments

As mentioned in this comment, the extension doesn't run with the following config:

// @ts-check

"use strict";

import path from "path";

import CopyPlugin from "copy-webpack-plugin";

export default {
  mode: "development",
  devtool: "inline-source-map",
  entry : {
    "background.js": "./src/background.ts",
    "content-scripts/cms.js": "./src/content-scripts/cms.ts",
    "content-scripts/gul-og-gratis.js": "./src/content-scripts/gul-og-gratis.ts",
    "pages/options/index.js": "./src/pages/options/index.ts",
  },
  output: {
    path: path.resolve("./dist"),
    filename: "[name]"
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: "ts-loader",
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: [".tsx", ".ts", ".js"],
    alias: { "src": path.resolve("./src") },
  },
  plugins: [
    new CopyPlugin({
      patterns: [
        { from: "./manifest.json", to: "[file]" },
        { from: "./pages/**/*.html", to: "[file]", context: "./src" },
        { from: "./public/**/*", to: "[file]" },
      ],
    }),
    new WebExtPlugin({
      sourceDir: path.resolve("./dist"),
      target: "firefox-desktop",
      startUrl: "https://google.com",
    })
  ],
}

Despite working fine when manually launched with npx web-ext run -s "./dist" -t "firefox-desktop" --start-url "https://google.com".

Are there any errors shown?

For what it's worth, it is working for me with the following configuration:

https://github.com/birchill/10ten-ja-reader/blob/c48159a5fca0bb84830e8f2d8be3663cb716e0cc/webpack.config.js#L351-L361

Nope, no errors. Let me check if the other configuration works though.

I had a hunch that it might not actually be running after the emit due to the following output:

Validation Summary:

errors          0
notices         0
warnings        0

assets by path content-scripts/*.js 368 KiB
  asset content-scripts/gul-og-gratis.js 191 KiB [compared for emit] (name: content-scripts/gul-og-gratis.js)
  asset content-scripts/cms.js 178 KiB [compared for emit] (name: content-scripts/cms.js)
assets by path pages/options/ 116 KiB
  asset pages/options/index.js 115 KiB [compared for emit] (name: pages/options/index.js)
  asset pages/options/index.html 707 bytes [compared for emit] [from: src/pages/options/index.html] [copied]
assets by path public/icons/*.png 11 KiB
  asset public/icons/icon@2x.png 6.93 KiB [compared for emit] [from: public/icons/icon@2x.png] [copied]
  asset public/icons/icon.png 4.04 KiB [compared for emit] [from: public/icons/icon.png] [copied]
asset background.js 125 KiB [compared for emit] (name: background.js)
asset manifest.json 1.2 KiB [compared for emit] [from: manifest.json] [copied]
runtime modules 3.66 KiB 16 modules
cacheable modules 90.4 KiB
  modules by path ./src/models/*.ts 9.87 KiB
    ./src/models/index.ts 502 bytes [built] [code generated]
    ./src/models/customer.ts 1.27 KiB [built] [code generated]
    ./src/models/delivery-details.ts 1.05 KiB [built] [code generated]
    ./src/models/weight.ts 4.77 KiB [built] [code generated]
    ./src/models/order.ts 1.34 KiB [built] [code generated]
    ./src/models/track-and-trace-info.ts 974 bytes [built] [code generated]
  modules by path ./src/content-scripts/*.ts 34.7 KiB
    ./src/content-scripts/cms.ts 14.8 KiB [built] [code generated]
    ./src/content-scripts/gul-og-gratis.ts 19.9 KiB [built] [code generated]
  ./src/background.ts 5.65 KiB [built] [code generated]
  ./src/pages/options/index.ts 2.07 KiB [built] [code generated]
  ./node_modules/webextension-polyfill/dist/browser-polyfill.js 38.2 KiB [built] [code generated]
webpack 5.60.0 compiled successfully in 5706 ms

But that turned out to be wrong since after setting buildPackage and artifactsDir the generated zip file does indeed include the files emitted to ./dist.

Looking at my setup, you need to run webpack -w to actually trigger web-ext run as opposed to web-ext build.

It looks like this plugin detects watch mode here:

if (!this.watchMode) {

Okay, now it works! No config changes necessary either.

Thanks again for the quick response!

It makes sense in hindsight, but I'd still suggest mentioning that you need to use webpack -w somewhere in the readme.

It makes sense in hindsight, but I'd still suggest mentioning that you need to use webpack -w somewhere in the readme.

Yes, I definitely agree. I've added a few notes in 8091500 just now.