webpack-webextension-runtime-plugin

Quick & Dirty runtime mods for webextension dependency loading with runtime.getURL

Why?

Webpack imports from __webpack_import_path__, which is usually set to the homepage of whatever you are building. This will not work with content scripts of webextensions, as everything must be resolved relative to manifest.json for the paths to work. We can't dynamically resolve this in the injected scripts either as they do not get access to the extension API. The injector must somehow pass it in!

Usage

Simply do:

1config.optimization.runtimeChunk = 'single'
2config.plugins.push(new (require('webpack-webextension-runtime-plugin'))({
3    globalObject: config.output.globalObject, // I cannot read the config!
4    chunks: ['runtime'], // this is the default; adjust if not using "single"
5    bareRuntime: true    // false if you are throwing entry points at us
6}))

When it's time to inject the scripts:

1const quoteRuntimeURL = (s) => JSON.stringify(browser.runtime.getURL(s))
2    const contentScript = `{
3        const promisifyLoad = function (tag) {
4            return new Promise((res, _) => {
5                document.documentElement.appendChild(tag)
6                tag.onload = () => res() })}
7
8        const rt = document.createElement('script')
9        rt.src = ${quoteRuntimeURL('js/runtime.js')}
10        const pp = document.createElement('script')
11        pp.src = 'data:text/javascript;charset=utf-8,' +
12            encodeURIComponent('globalThis["webpackSetPublicPath"](${quoteRuntimeURL('/')})')
13        const is = document.createElement('script')
14        is.src = ${quoteRuntimeURL('js/injectedscript.js')}
15        
16        promisifyLoad(rt)
17            .then(_ => promisifyLoad(pp))
18            .then(_ => promisifyLoad(is))
19    }`
20browser.webNavigation.onCommitted.addListener(async arg => {
21        browser.tabs
22            .executeScript(arg.tabId, {
23                runAt: 'document_start',
24                frameId: arg.frameId,
25                code: contentScript
26            })
27            .catch(IgnoreError(arg))
28})

How?

Oh I just try to throw a line global["webpackSetPublicPath"] = (s) => __webpack_require__.p = s; into the runtime definitions. It should work on plain runtime libraries, but I think the matching is also lax enough to accomendate runtimes thrown into entry points. Hell I know how to do this with ed commands better than I do with this wacky code.