Stop using `--load-extension` flag to load extensions in Chrome

[cezaraugusto]

see convo in https://groups.google.com/a/chromium.org/g/chromium-extensions/c/1-g8EFx2BBY.

[gusxodnjs]

@cezaraugusto Hi, I am developing and operating a service using this library. Thank you. Since the flag was removed in Chrome 137, it seems that the extension app is not automatically loaded when running in development mode. Could you please tell me how to fix this library? I wonder if there is a way to use it as before.

[cezaraugusto]

hey @gusxodnjs this is fixed in latest ([email protected]), pls try again and let me know how it goes

[gusxodnjs]

@cezaraugusto Hi, I was tested on [email protected] version and it works well. But I'm having trouble my project upgrading from beta 9 to the latest version. There are a lot of changes in the rc version, so it'll take a long time and I'll probably have to modify the source code. When you release the 2.x version, I'd appreciate it if you could create a document for the migration. 🙏 Thanks!!

[tom2strobl]

I need to upgrade from beta 9 as well as it started chrome but didnt load the extension anymore (chrome 137 landed) — after upgrading to rc.36 and running the dev command I get stuck in compilation where it only showed this and stopped right after:

►►► Using extension.config.js. This is very experimental.
►►► Using own starting URL http://localhost:3008. 

But neither further logs nor errors. Switching to the build command instead then I saw that my webpack.DefinePlugin in extension.config.js errors. Then I saw in the rc commits that we switched to rspack (nice!). So I installed @rspack/core in my devDependencies and switched to new rspack.DefinePlugin().

Running build then resulted in

Build Target: Chrome
Build Status: Failed

Build completed in 0.85 seconds.
ERROR in Extension.js✖︎✖︎✖︎ Failed to compress extension package.
Error: ENOENT: no such file or directory, open '/<mymonorepopath>/clients/browser-extension/dist/chrome/manifest.json'
node:fs:442
    return binding.readFileUtf8(path, stringToFlags(options.flag));
                   ^

Error: ENOENT: no such file or directory, open '/<mymonorepopath>/clients/browser-extension/dist/chrome/manifest.json'
    at Object.readFileSync (node:fs:442:20)
    at generateZip (/<mymonorepopath>/node_modules/extension-develop/dist/module.js:5910:65)
    at /<mymonorepopath>/node_modules/extension-develop/dist/module.js:6039:139
    at finalCallback (/<mymonorepopath>/node_modules/@rspack/core/dist/index.js:8492:140)
    at /<mymonorepopath>/node_modules/@rspack/core/dist/index.js:8509:84
    at done (/<mymonorepopath>/node_modules/@rspack/lite-tapable/dist/index.js:473:13)
    at /<mymonorepopath>/node_modules/@rspack/lite-tapable/dist/index.js:512:29
    at /<mymonorepopath>/node_modules/@rspack/core/dist/index.js:8252:29
    at /<mymonorepopath>/node_modules/extension-develop/dist/module.js:338:13
    at Object.id2 [as fn] (/<mymonorepopath>/node_modules/@rspack/core/dist/index.js:8242:21) {
  errno: -2,
  code: 'ENOENT',
  syscall: 'open',
  path: '/<mymonorepopath>/clients/browser-extension/dist/chrome/manifest.json'
}

Which is interesting since it printed Build completed in 0.85 seconds. but there was no chrome directory in dist as in it failed to produce files. What's also interesting is that even if I set commands: { build: { zip: false } } } just to try (I need the zip anyway but just to try), it still errors at generateZip. Logging buildOptions in the extensionBuild source promise shows:

buildOptions {
  browser: 'chrome',
  polyfill: true,
  zip: 'true',
  zipSource: undefined,
  zipFilename: undefined,
  silent: undefined
}

meaning that the extension.config.js setting for zip is not respected I guess. I manually commented it out for now and could see that rspack compile itself errored but somehow maybe the timing is off?

So now I can see the errors – any file that uses the browser namespaces erros with:

ERROR in ./app/services/communication.ts 1:1165-1172
  × Module not found: Can't resolve '/<mymonorepopath>/node_modules/extension-develop/node_modules/webextension-polyfill/dist/browser-polyfill.js' in '/<mymonorepopath>/clients/browser-extension/app/services'

So I'm assuming the polyfilling step resolution is broken. I can see buildOptions.polyfill being true and jumped into the PolyfillPlugin where I can see:

external_path_namespaceObject.resolve(__dirname, '..', 'node_modules/webextension-polyfill/dist/browser-polyfill.js')

and that's where the issue is. Since in my monorepo node_modules get hoisted to the root, it is not able to find the dependency. Manually changing it temporarily to

external_path_namespaceObject.resolve(__dirname, '..', '..', '..', 'node_modules/webextension-polyfill/dist/browser-polyfill.js')

makes the build work! I also was able to generate the zip and the dev command also works and starts chrome with the extension equipped 🚀 Unfortunately using process.cwd() for resolving doesn't help either for me in that case, since process.cwd() returns the package subdirectory, but node_modules would be one level higher in my case. Tricky business. For now I'm just yarn patching it.

So to sum up:

• commands: { build: { zip: false } } } setting needs to be reflected
• probably there's a timing issue that swallows compile errors
• PolyfillPlugin resolving needs to be adapted to find the module up the tree to support monorepos

I hope my findings can help, thanks for putting in all this effort (that transition from webpack to rspack must have been quite the journey with all your custom stuff :-) )

[cezaraugusto]

@tom2strobl thanks for the detailed feedback! I haven't tested the project using a monorepo yet, so results might not be the best or even work at all. could you create a sample repo so I can reproduce the errors you are seeing?

[tom2strobl]

@cezaraugusto finally got some time, here you go: https://github.com/tom2strobl/extension-js-monorepo I tried to strip it down to the bare minimum so there's less fluff for you to navigate through