Possible for me to write a plugin for chrome extension manifest.json files?

[davidmurdoch]

A manifest.json is a required document for Chrome/Firefox extensions. It has a few fields that describe application entry points. A basic example of manifest.json file might have entry points like:

{
  "background": {
    "page": "background.html", // a webpack entry point
    "persistent": true
  },
  "content_scripts": [
    {
      "matches": [
        "file://*/*",
        "http://*/*",
        "https://*/*"
      ],
      "js": [
        "document_start.js" // a webpack entry point
      ],
      "css": [
        "main.css"
      ],
      "run_at": "document_start",
      "all_frames": true
    },
    {
      "matches": [
        "*://connect.example.com/*/example.html"
      ],
      "js": [
        "vendor/example/content-script.js" // a webpack entry point
      ]
    }
  ],
  "web_accessible_resources": [
    "inpage.js" // a webpack entry point
  ]
}

There are some interesting rules around these entry points. For example, the file document_start.js in the content_scripts section might get split by runtime or splitChunks settings, if that happens the js array should be updated to contain the runtime/chunks. Similarly, with inpage.js in the web_accessible_resources array (though this one gets complicated, as inpage.js might be dynamically injected into a browser tab by document_start.js -- and updating the dynamic injection to add runtime/chunk loading is likely not feasible).

The background.html in the background html section should be treated as an entry point.

I'm currently writing a helper function to parse this document in order to collect entry points to add to my webpack config. I was thinking this could be nice to have as a webpack plugin.

This seems doable to me, but I again don't know where to start. I was thinking the test case at https://github.com/webdiscus/html-bundler-webpack-plugin/blob/master/test/cases/hook-beforeEmit-rtlcss/webpack.config.js#L49 would be a good pattern to follow, but I'm unsure how to get a final list of the runtime/chunks that'd need to be inserted back into the manifest.json file.

What do you think? Is this feasible?

[webdiscus]

Hello @davidmurdoch,

I have already thought and prepared the opportunity to extract all output assets.
My idea was to create a new webmanifest plugin, but I self don't need it yet.
Good that you need it and you can do it.

[webdiscus]

See here the stages where what you can doo:

The afterEmit hook receives the entries argument.

This is an array of objects containing all dependencies used in the entry object.

{
  apply(compiler) {
    const pluginName = 'myPlugin';
    compiler.hooks.compilation.tap(pluginName, (compilation) => {
      const hooks = HtmlBundlerPlugin.getHooks(compilation);

      hooks.afterEmit.tap(pluginName, (entries, options) => {
        // output the structure of the entries object
        console.dir(entries, { depth: 8 })
        
        // TODO: write your own function to walk through the entries and generate an JSON object what you need 
        //const assets = manifest(entries);

        // TODO: write manifest to disk
        const saveAs = path.join(__dirname, 'dist/manifest.json');
        //const data = JSON.stringify(assets, null, '  ');
        //fs.writeFileSync(saveAs, data);
      });
    });
  },
}

See please the working manifest plugin in the test case hook-afterEmit and modify it to suit your needs.

[davidmurdoch]

I was actually looking to do the opposite: I have a manifest.json file, and want to create entry points from it, and then expand it with additional assets from runtime chunks and splitting.

I'm also looking to create a zip file from all assets, and so your suggestion was relevant to that effort. However, HtmlBundlerPlugin's hooks.afterEmit omits files that are emitted by compilation.hooks.processAssets. So I think I'll need to combine the two? Does that sound right?

[webdiscus]

The plugin.hooks.afterEmit receives the collection of assets (source file -> [output chunks]) resolved by the plugin self (all assets detected in HTML, JS, CSS).
If you manuell add new asset by compilation.hooks.processAssets, this is not in plugin collection, yes it will be omitted.

Also the principe is simple: all assets (js, css, images, fonts, etc) resolved in all dependencies of any entrypoint (template) will be added to the plugin assets collection.