samrum / vite-plugin-web-extension

A vite plugin for generating cross browser platform, ES module based web extensions.
MIT License
331 stars 32 forks source link

Bundling a static page with the extension #3

Closed guytepper closed 2 years ago

guytepper commented 2 years ago

Hey there! Big thanks for this template. I've been on the hunt for one for a while, and this is the best one I found!

I have a question regarding bundling a static page with the extension: On my background page I want to redirect the user to a static page that will come bundled with the extension. I've been trying to figure how to configure Vite to bundle the page alongside the manifest entry files, but couldn't figure it out. Any clues on how make it happen?

The static page will use svelte, if it matters 🤓

guytepper commented 2 years ago

btw, not sure if it's related but the dist manifest.json file point to a background html file, instead of the javascript file that the manifest.ts file pointed to in the src folder:

src/manifest.ts

{
  background: {
    scripts: ["src/entries/background/script.ts"],
    persistent: false
  }
}

dist/manifest.json

  "background": {
    "persistent": false,
    "page": "background.html"
  }
samrum commented 2 years ago

Hey, awesome that you found it useful!

You should be able to add the html file you want to be bundled to the web_accessible_resources key of your manifest definition and the plugin will process it like the other manifest html files.

It’s intentional that background scripts get wrapped in an html page. It’s so that the script can be loaded as an ES module since manifest scripts can’t be loaded directly as modules.

guytepper commented 2 years ago

Thanks for the explanations! It worked :)