How do I include additional pages not in the manifest?

[askmrsinh]

The idea is to show a page (included within the extension) when the user clicks on the extension icon. The directory structure for my extension is as follows:

src
├── app
│   ├── Meet.svelte
│   ├── index.html
│   ├── index.ts
│   └── styles.css
├── background
│   └── index.ts
├── constants.ts
├── manifest.ts
├── options
│   ├── Options.svelte
│   ├── index.html
│   └── index.ts
└── types.ts

I am opening the page via:

chrome.action.onClicked.addListener(async () => {
    await chrome.windows.create({
        url: `extension://${chrome.runtime.id}/app/index.html`,
        type: 'popup',
        height: applicationHeight,
        width: applicationWidth,
        focused: focused
    });
});

However the manifest file doesn't include any reference to the file (since it is not a part of any of the extension pages ie. newtab/options/devpanel etc). As a result the build output doesn't include the file.

Is there an easy solution to this? My app/index.html and options/index.html share a decent amount of CSS/JS imports as well so I would like to find a solution that can take advantage of chunking.

[jacksteamdev]

You can define extra HTML pages in vite.config.js the same as in a Vite multi-page app.

Vite will take care of file-splitting if you do it this way 👍

[askmrsinh]

I believe this is only for v4? Is there any documentation or sample repo that I can refer?

[jacksteamdev]

If you are using v3, you can just add the HTML files to the Rollup config input.

Either the input array or the input object should work:

// input array
export default {
  input: ['src/manifest.json', 'src/app/index.html'],
  ...options,
}

// input object
export default {
  input: {
    manifest: 'src/manifest.json',
    'app/index': 'src/app/index.html'
  },
  ...options,
}

Rollup will take care of file splitting.

[jacksteamdev]

Examples are in the tests, this is one with an iframe in the options page.

I'm writing an article for v4 multipage extensions, this seems to be a popular use case.

v4 docs are in progress, v3 docs are at https://www.extend-chrome.dev/rollup-plugin

[askmrsinh]

Thank you that helped a lot!
I have another question - is it possible to do an iife build with the plugin?
I am trying to open a page (in a popup window) which links to a local library with unsafe-eval (CSP can't be modified in v3). However, this just fails when the output is set to esm but works with iife (of course, without the plugin).

[jacksteamdev]

is it possible to do an iife build with the plugin

Not currently.

[shreyanshxyz]

@jacksteamdev is iife build now supported with rollupOptions? I've been looking for answers but I think this issue is the closest I've come to one with the same issue. Currently crxjs works wonders for me with contentscript injection and stuff but not using iife basically scrambles my index.js and other files into ~20 chunks and I cannot load it up my extension which runs in a popup window.
Please let me know if there's some workaround now.
Cheers!