starkshang / vite-plugin-chrome-extension Goto Github PK
View Code? Open in Web Editor NEWA vite plugin to bundle chrome extensions for Manifest V3.
License: MIT License
A vite plugin to bundle chrome extensions for Manifest V3.
License: MIT License
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");
}
);
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__
.
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.
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 .
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/
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.
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>
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,
Popup pages have no style , demo : https://github.com/Cjw-259/chrome-extension-demo ,Try npm run build, then add to chrome extension
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
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
...
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.
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!
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. :)
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
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:
yarn start
(vite build --watch
) and check the /dist
directory. you'll notice that it's built correctly<div>Hello World</div>
in main.tsx
to <div>Hello</div>
/dist
dir again you will notice that only 2 files are generated manifest.js and manifest.jsonBuild 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 :)
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
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$
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
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?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.