It would be nice if it was also able to find assets used when creating DevTools such as:

chrome.devtools.panels.create("Font Picker",
                              "FontPicker.png",
                              "Panel.html",
                              function(panel) { ... });

and

chrome.devtools.panels.elements.createSidebarPane("Font Properties",
  function(sidebar) {
    sidebar.setPage("Sidebar.html");
    sidebar.setHeight("8ex");
  }
);

See https://developer.chrome.com/docs/extensions/reference/devtools_panels/#method-ExtensionSidebarPane-setPage

content_security_policy needs string. It's different from doc.

[
{
keyword: 'type',
dataPath: '.content_security_policy',
schemaPath: '#/definitions/content_security_policy/type',
params: { type: 'string' },
message: 'should be string',
schema: 'string',
parentSchema: {
type: 'string',
description: 'This introduces some fairly strict policies that will make extensions more secure by default, and provides you with the ability to create and enforce rules governing the types of content that can be loaded and executed by your extensions and applications.',
default: "script-src 'self'; object-src 'self'"
},
data: { extension_pages: "script-src 'self'; object-src 'self'" }
}
]
[chrome-extension] There were problems with the extension manifest.
error during build:
ValidationError: There were problems with the extension manifest.
at validateManifest (/Users/huyu/project/tools/ks-dc-kwaibi-chrome-ext/node_modules/.pnpm/[email protected]/node_modules/vite-plugin-chrome-extension/lib/index-cjs.js:1578:11)
at ManifestProcessor.validateManifest (/Users/huyu/project/tools/ks-dc-kwaibi-chrome-ext/node_modules/.pnpm/[email protected]/node_modules/vite-plugin-chrome-extension/lib/index-cjs.js:2795:13)
at ManifestProcessor.generateBundle (/Users/huyu/project/tools/ks-dc-kwaibi-chrome-ext/node_modules/.pnpm/[email protected]/node_modules/vite-plugin-chrome-extension/lib/index-cjs.js:2740:14)
at async Object.generateBundle (/Users/huyu/project/tools/ks-dc-kwaibi-chrome-ext/node_modules/.pnpm/[email protected]/node_modules/vite-plugin-chrome-extension/lib/index-cjs.js:3284:13)
at async Bundle.generate (/Users/huyu/project/tools/ks-dc-kwaibi-chrome-ext/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/shared/rollup.js:13340:9)
at async handleGenerateWrite (/Users/huyu/project/tools/ks-dc-kwaibi-chrome-ext/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/shared/rollup.js:20719:23)
at async doBuild (/Users/huyu/project/tools/ks-dc-kwaibi-chrome-ext/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-06e8fbb4.js:51040:20)
at async build (/Users/huyu/project/tools/ks-dc-kwaibi-chrome-ext/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-06e8fbb4.js:50864:16)
at async CAC. (/Users/huyu/project/tools/ks-dc-kwaibi-chrome-ext/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/cli.js:13995:9)

https://developer.chrome.com/docs/extensions/mv3/mv3-migration-checklist/

i just switch to vite, i was on webpack arch before and livereload was working.
file where generated with UUID in the name, for content script it was still needed a reload of the extension and the page.
But now i need to remove the extension to make update .

Thanks to create this plugin.
I try to follow the tutorial Create a Chrome Extension with Vite + Vue by
Alvaro Dev Labs to build a Chrome extension with Vite+Vue+Tailwind.

But I have a problem, it seems that if I build a pupup page for Action (not the popup for content-script as the video tutorial), the tailwindcss don't work correctly, the css file can generate when build, but it can't link to the HTML correctly, maybe the difference between my situation and the video tutorial is the entry point, the content-script entry point is js file, and the popup page entry point is a html file in manifest.json.

the reproduce repo: https://github.com/Benbinbin/extension-vite-vue-demo

Hello! First of all, thank you for making such a useful tool!

I was previously using a create-react-app boilerplate modified to create an extension and everything worked find but took to much time to compile and worked with MV2, not 3.

I decided to change to Vite (and use this plugin) to increase the compile speed and to allow for the use of the --watch flag in the future. Configuring everything went well, and I was able to render empty options and popup pages successfully. The problem arose when I started to bring all the components back from my previous repo to the vite one.

Everything was displaying correctly until one of the components caused this error on the popup screen:

This made the screen not render anything JS related, effectively leaving the popup empty.

Manifest V3 doesn't allow for the content policy to be set to allow 'unsafe-eval' of popup scripts, so I am looking for an alternative solution. The create-react-app project didn't require the content policy to be changed from the default though, so I believe that is not the only solution.

I look forward to any insight that you may provide and will gladly provide any relevant information I missed. :)

Cannot read property 'reduce' of undefined
error during build:
TypeError: Cannot read property 'reduce' of undefined
at /home/vite/chrome-extend-fastautobuy/node_modules/vite-plugin-chrome-extension/lib/index-cjs.js:1989:43
at Array.reduce ()
at deriveFiles (/home/vite/chrome-extend-fastautobuy/node_modules/vite-plugin-chrome-extension/lib/index-cjs.js:1988:7)
at ManifestProcessor.resolveInput (/home/vite/chrome-extend-fastautobuy/node_modules/vite-plugin-chrome-extension/lib/index-cjs.js:2659:48)
at Object.options (/home/vite/chrome-extend-fastautobuy/node_modules/vite-plugin-chrome-extension/lib/index-cjs.js:3237:51)
at /home/yongjie/vite/chrome-extend-fastautobuy/node_modules/rollup/dist/shared/rollup.js:23473:43
at processTicksAndRejections (internal/process/task_queues.js:95:5)
at async getInputOptions (/home/vite/chrome-extend-fastautobuy/node_modules/rollup/dist/shared/rollup.js:23466:61)
at async rollupInternal (/home/vite/chrome-extend-fastautobuy/node_modules/rollup/dist/shared/rollup.js:23413:72)
at async doBuild (/home/vite/chrome-extend-fastautobuy/node_modules/vite/dist/node/chunks/dep-e0fe87f8.js:43134:24)
vite@ubuntu:~/vite/chrome-extend-fastautobuy$

In the Svelte example, App.svelte contains some styling, for example, button styles and so on. Unfortunately, after running build and loading extension, it works fine but it doesn't load styles.

As far as I can see styles are not included in the /dist/popup/index.html:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <link rel="icon" href="../assets/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Svelte + TS + Vite App</title>
</head>

<body style="min-width:200px;">
    <div id="app"></div>
    <script type="module" src="./main.ts"></script>
</body>

</html>

I've tried vue-embedded-options-page and vue-full-options-page, but neither seems to load the style.

The built css is in dist/options, but it doesn't seem to be loaded.

Popup pages have no style , demo : https://github.com/Cjw-259/chrome-extension-demo ,Try npm run build, then add to chrome extension

Wondering if there's a way to configure it to minify all the files in the manifest?

Currently the popup.js file gets minified, but the background and content scripts do not. Example content script:

(function () {
	'use strict';

	console.log("CONTENT");

}());

Is there a way to pass terser configs to the plugin?

here is my code in popup:

chrome.management.getSelf(() => {
// my code
})

plugin detect management permission but it doesn't need it as writed there management.uninstallSelf, and management.getSelf do not require the management permission.

the plugin expect string, but in v.3 is object:

https://developer.chrome.com/docs/extensions/reference/manifest/content-security-policy?hl=pt-br

Is this the specific characteristic of the repo, or i just shouldn't use in production

Hi,

I wanted to build and run the project locally and noticed that both package-lock.json and pnpm-lock.yaml are present in the project. Which one is correct? I guessed it was the package-lock.json file as it was more recent.

If I enable sourcemaps in vite then there are no sourcemaps for certain files like background.js and there are a bunch of warnings:

rendering chunks (1)...Sourcemap is likely to be incorrect: a plugin (chrome-extension) was used to transform files, but didn't generate a sourcemap for the transformation. Consult the plugin documentation for help
rendering chunks (3)...Sourcemap is likely to be incorrect: a plugin (chrome-extension) was used to transform files, but didn't generate a sourcemap for the transformation. Consult the plugin documentation for help
Sourcemap is likely to be incorrect: a plugin (chrome-extension) was used to transform files, but didn't generate a sourcemap for the transformation. Consult the plugin documentation for help
...

How do I run all the tests?

pnpm run test doesn't seem to run any of the E2E tests in ./__tests__ or in other places like src/html-inputs/__tests__.

The author @StarkShang said in a recent issue comment that he is no longer actively maintaining this repo.

In addition, the repo that this was forked from @extend-chrome/rollup-plugin-chrome-extension now has Vite support in beta and also supports MV3 and is actively being maintained.

rollup-plugin-chrome-extension also has support for --watch mode, in case you are still waiting for #6 to be fixed.

Hope this helps anyone else landing here going forward, or any other stuck waiting for issues to be addressed in this repo.

Many thanks @StarkShang for your work here!

Explanation:

when running vite build --watch, it initially builds correctly. However, after the first change to generates an empty build

Codesandbox reproduction: https://codesandbox.io/s/vite-plugin-chrome-extension-watch-build-bug-py0nd?file=/src/main.tsx

Reproduction steps:

1. open the code sandbox link
2. run yarn start (vite build --watch) and check the /dist directory. you'll notice that it's built correctly
   09
3. change <div>Hello World</div> in main.tsx to <div>Hello</div>
4. check the /dist dir again you will notice that only 2 files are generated manifest.js and manifest.json

Build log:

build started...

Find entry files
main: src/main.tsx

✓ 22 modules transformed.
dist/manifest.json        0.13kb
dist/index.html           0.28kb
dist/main.js              0.12kb / brotli: 0.09kb
dist/vendor.6ad9ec51.js   127.61kb / brotli: 36.10kb
built in 6251ms.

build started...

Find entry files
src/manifest.json

✓ 23 modules transformed.
Generated an empty chunk: "manifest"
dist/manifest.json   0.13kb
dist/manifest.js     0.00kb / brotli: 0.00kb
built in 64ms.

Thank you for this great plugin, please let me know if there's anything I can do to help :)

Currently if, for example, one fuses the official vite template for svelte:

https://github.com/vitejs/vite/tree/main/packages/create-app/template-svelte-ts

When then applying this extension and running dev mode, it throws:

[plugin:chrome-extension] context method emitFile() is not supported in serve mode. This plugin is likely not vite-compatible. (x4)

Otherwise it compiles properly. Another thing to review should be merging the tsconfig.json from that same template.

Thank you a lot for such amazing project!

Cheers,

I'm using the Svelte template and I wish to use it with Svelte Materialify
How do I tell the HTML to load the CSS before it exists, i.e. it will exist upon compiling Svelte?
So far, I've tried adding

<link rel="stylesheet" href="/bulid/popup/popup.css">

but the Vite plugin isn't happy and seeks for popup.css, which doesn't exist yet

So far I've been using rollup-plugin-css-only

Some browser vendors like Google, Mozilla, and Microsoft are supporting/will support manifest v3.
Others, like Opera, don't seem to plan to support manifest v3 anytime soon.
Since most of my distributed browser extensions are cross-browser, I need to support manifest v2 and v3.

A content script containing:

function setSelectedElement(el) {
    // do something with the selected element
}

Should be able to be executed by:

chrome.devtools.inspectedWindow.eval("setSelectedElement($0)",
    { useContentScriptContext: true });

But it can't because that function is being removed and converted to a IIFE.

See https://developer.chrome.com/docs/extensions/mv3/devtools/#selected-element