crxjs / chrome-extension-tools

Bundling Chrome Extensions can be pretty complex. It doesn't have to be.
https://crxjs.dev/vite-plugin
2.75k stars 182 forks source link

how to use side panel #729

Closed cwjjjjj closed 1 year ago

cwjjjjj commented 1 year ago

Describe the problem

image

i want to use side panel , but i can't can my side panel html in dist

Describe the proposed solution

currently support side panel? If so, how do I need to configure it? If not, when can I support it? Thanks to the author

Alternatives considered

I hope that the dist can contain the html created in my code. Now no matter how many html files I create, there will only be one in the dist. thanks!

Importance

would make my life easier

JoeyDoey commented 1 year ago

Assuming its the same as while using crx (vite plugin)...

Check if you have the following in your manifest

// rest of manifest.json fields
  "side_panel": {
    "default_path": "sidepanel.html"
  },
    "permissions": [
// other permissions
    "sidePanel"
  ],

I think crx should already handle generating the html if its defined in the manifest but if its not, try explicitly defining the pages to output in the vite.config.ts rollupOptions like so:

  // rest of vite.config
  build: {
      rollupOptions: {
        input: {
          sidepanel: resolve(root, 'sidepanel.html'),
        },
      },
    },

Ref:

cwjjjjj commented 1 year ago

thanks