🌱 Hi!
guocaoyi / create-chrome-ext Goto Github PK
View Code? Open in Web Editor NEW🍺 Scaffolding your Chrome extension! Boilerplates: react \ vue \ svelte \ solid \ preact \ alpine \ lit \ stencil \ inferno \ vanilla
License: MIT License
🍺 Scaffolding your Chrome extension! Boilerplates: react \ vue \ svelte \ solid \ preact \ alpine \ lit \ stencil \ inferno \ vanilla
License: MIT License
import 'material-icons/iconfont/material-icons.scss';
Error:
Failed to decode downloaded font: http://***/node_modules/material-icons/iconfont/material-icons.woff2
How to fix it?
I can't seem to find a link to documentation for this library anywhere. This is my very first time checking out this library but cannot seem to find more information than what is currently in the Readme. Any pointers to proper documentation. I wouuld really liike to experiment with this as I have both new and existing extensions I am looking to build/migrate with a tool like this.
I am building chrome extension as an Iframe with React template and when I tried to build the extension, it is not working because popup.html is not rendered correctly.
Popup.html is not defined in manifest.js and it is only imported from content script as iframe code.
So vite doesn't render it.
Hi, I've done setup step by step, but I'm unable to start up the extension.
After running up npm run dev
I'm trying to enable the extension but it's refreshing dozen of times and then returns the:
This extension reloaded itself too frequently.
error, and in trace I can see:
Any idea how I can fix that issue?
Everything is fine during the dev mode, but after run yarn build
and reload the extension, the dev console shows the error:
I can find jquery.js in the Sources tab, and $
can be successfully called in the dev console
manifest.ts
content like below
content_scripts: [
{
matches: omit,
js: [
'src/contentScript/jquery.js',
'src/contentScript/index.ts',
],
css: omit,
run_at: 'document_start',
},
],
How I can force the build process to include popup.html or newtab.html page or any other html page my extension need?
When I comment the default_action
the popup page will be not included into the dist folder after build.
I ran "npm create chrome-ext@latest my-crx-app -- --template react-ts" successfully
Then ran the next 3 steps without error:
cd my-crx-app
npm install
npm run dev
Vite started and when I go to "http://localhost:3000/" it 404's
I expected "Popup Page" to show
I know this is not an issue but was someone able to add tailwindcss for react? if yes how?
Thanks!!
So I faced this problem running npm run zip
.
I added build/**
to fix this, not sure how it worked earlier.
gulp
.src('build/**')
.pipe(zip(`${manifest.name.replaceAll(' ', '-')}-${manifest.version}.zip`))
.pipe(gulp.dest('package'))
I haven't dealt with npm dependency resolution earlier, but seems like some dependecy is stopping vite from being updated to recent version anywhere near 4.x
, currently it is 2.9.15
My package.json dependencies are:
"dependencies": {
"preact": "^10.8.2"
},
"devDependencies": {
"@crxjs/vite-plugin": "^1.0.12",
"@preact/preset-vite": "^2.3.0",
"autoprefixer": "^10.4.14",
"postcss": "^8.4.23",
"prettier": "^2.7.1",
"tailwindcss": "^3.3.1",
"vite": "^2.9.13"
}
On running npm i
following logs are printed:
PS C:\dir1\dir2\dir3\dir4\dir5\extension> npm i
npm WARN ERESOLVE overriding peer dependency
npm WARN While resolving: @vitejs/[email protected]
npm WARN Found: [email protected]
npm WARN node_modules/vite
npm WARN dev vite@"^2.9.13" from the root project
npm WARN 3 more (@crxjs/vite-plugin, @preact/preset-vite, @prefresh/vite)
npm WARN
npm WARN Could not resolve dependency:
npm WARN peer vite@"^4.2.0" from @vitejs/[email protected]
npm WARN node_modules/@vitejs/plugin-react
npm WARN optional @vitejs/plugin-react@">=1.2.0" from @crxjs/[email protected]
npm WARN node_modules/@crxjs/vite-plugin
npm WARN
npm WARN Conflicting peer dependency: [email protected]
npm WARN node_modules/vite
npm WARN peer vite@"^4.2.0" from @vitejs/[email protected]
npm WARN node_modules/@vitejs/plugin-react
npm WARN optional @vitejs/plugin-react@">=1.2.0" from @crxjs/[email protected]
npm WARN node_modules/@crxjs/vite-plugin
up to date, audited 191 packages in 3s
Release: v0.8.10
Framework: » vue
Language: » vue-ts
How to Reproduce:
$ yarn install
$ yarn dev
Error:
failed to load config from C:\gits\test_ext\vue-ts\vite.config.ts
error when starting dev server:
file:///C:/gits/test_ext/vue-ts/node_modules/@vitejs/plugin-vue/dist/index.mjs:2
import { isCSSRequest, normalizePath as normalizePath$1, transformWithEsbuild, formatPostcssSourceMap, createFilter } from 'vite';
^^^^^^^^^^^^
SyntaxError: The requested module 'vite' does not provide an export named 'isCSSRequest'
at ModuleJob._instantiate (node:internal/modules/esm/module_job:124:21)
at async ModuleJob.run (node:internal/modules/esm/module_job:190:5)
As I noticed, the issue appeared after pull request #50 when the '@vitejs/plugin-vue' package was updated
- "@vitejs/plugin-vue": "^2.3.3", + "@vitejs/plugin-vue": "^4.4.0",
Hi,
I want to apply tailwind css in this temporary can you describe How can I use it?
I want to create two side panels: one global and another specific to a tabId. However, when I build the project, the new side panel HTML isn't generated.
我在 manifest 里面按照以下方式配置,发现无效。
content_scripts: [ { "matches": ["https://juejin.cn/*"], js: ['src/content/index.ts'], css: ['src/content/index.css'], }, ],
Title:
boilerplate of qwik can not run
Env:
node: v14.19.0
npm: 6.14.16
os: darwin (macOS Version:12.4)
Error:
popup page can't be rendered, (crx mode)
options page can't be rendered, (crx mode)
Hi there, great work you're doing here!
I'm trying to use the react-ts
starter for this project and am running into an issue with trying to get vite to load the default React page.
The problem, after bootstrapping the project I am met with the following Browser error
Reproduction
npm create chrome-ext@latest chrome -- --template react-ts
cd chrome
npm i
npm run dev
Vite compiles successfully but only serves the 404 page
As title, after init project via react-ts-template, i got err in vite.config.ts:
'xxx/src/manifest.ts' is not listed within the file list of project 'xxx/tsconfig.node.json'. Projects must list all files or use an 'include' pattern.ts(6307)
Why set references field to tsconfig.node.json in tsconfig.json?
Forgive my ignorance if I'm barking up the wrong tree I'm brand new to chrome extension development. When I try npm run dev
then visit http://localhost:5173/sidepanel.html
I get the error;
react-dom_client.js?v=b833d8d0:16657 Uncaught TypeError: Cannot read properties of undefined (reading 'sync') at SidePanel.tsx:10:20
In other words the chrome.storage
property is undefined. Is there any way around this or does it need to be in a chrome extension environment i.e. load unpacked into the chrome://extensions/
?
I'm trying to have a plugin, that will add some additional information it fetches from an API to DOM elements on the site.
In addition I'd like to have a "summary" (like the count of elements it found on the page, etc.) available in the popup, as well as an option to dissable the plugin for a certain domain.
This means I need to pass data between the content script that is doing the DOM manipulation as well as the popup. After some banging my head against the desk and finding a lot of v2 solutions, I finally found this tutorial: https://plainenglish.io/blog/how-to-send-data-between-chrome-extension-scripts-1182ce67b659 and https://www.freecodecamp.org/news/chrome-extension-message-passing-essentials/
It would be wonderful to have something like this included in the default state after running create-chrome-ext
to get started. If you want to keep the basic version it creates clean, maybe a link to those two articles in the read me would be nice. The first one basically tells you how to send messages with manifest v3, the second one explains the concept a bit more and has more examples, however they're for manifest v2.
Greetings! My extension has modal windows that are added by script to the page.
There is a conflict of styles - either the page styles affect the display of elements in the modal window, or vice versa.
What are the solutions?
I can write very specific classes or even inline styles in a modal window, but I don't like that option.
Title:
boilerplate of alpine can not run
Env:
node: v14.19.0
npm: 6.14.16
os: darwin (macOS Version:12.4)
Error:
popup page can't be rendered, (crx mode)
options page can't be rendered, (crx mode)
When starting a project, in the list of suggest next steps we've got:
- Click the Load unpacked extension button.
- Select the build/ directory that was created.
putting a step in the middle telling to run npm run build
would make things clearer for devs who are less into JS processes!
I can open a PR for this If you want
The content under public
was not copied to the build
directory. When I was developing, there was a wasm file that needed to be loaded asynchronously (using fetch in background.js), but when I started dev, it did not seem to be copied to In the build directory, I need to assign values manually. Did I miss something to configure?
how come it's bolier template when manifest is missing?
[crx:content-script-resources] Error: vite manifest is missing
at renderCrxManifest (C:\Users\Administrator\Documents\bunsveltes\node_modules\@crxjs\vite-plugin\dist\index.mjs:3240:25)
at <anonymous> (C:\Users\Administrator\Documents\bunsveltes\node_modules\@crxjs\vite-plugin\dist\index.mjs:2922:60)
at processTicksAndRejections (:12:39)
x Build failed in 407ms
error during build:
[crx:manifest-post] Error in crx:content-script-resources.renderCrxManifest
at <anonymous> (C:\Users\Administrator\Documents\bunsveltes\node_modules\@crxjs\vite-plugin\dist\index.mjs:2933:23)
at processTicksAndRejections (:12:39)
I need to extract the Chrome extension files for an electron app. is there a way to extract/unpack the crx3 files?
export const sendToContentScript = <T extends object>(
message: ToastMessage,
) => {
chrome.tabs.query({ active: true, currentWindow: true }, tabs => {
if (tabs.length > 0 && tabs[0].id !== undefined) {
const activeTabId = tabs[0].id;
chrome.tabs.sendMessage(activeTabId, message, (response: string) => {
console.log(response);
});
}
});
};
if this function is defined in background/index.ts
it works just fine if i export it to another file background/utils.ts
and then import it `import {sendToContentScript} from './utils'. the service worker fails to register and extension keeps flickering.
edit this is not limited to this function
i've created a extension with vanilla js, and after installing a npm package and .env file in background/index.js script the popup starts to flickering infinitely, is there any way to fix this issue? should we need to change vite.config.js?
Thanks.
The project doesn't build with the following error in vanilla js mode
$ npm run dev
> [email protected] dev
> vite
vite v2.9.15 dev server running at:
> Local: http://localhost:3000/
> Network: use `--host` to expose
ready in 372ms.
Failed to resolve force included dependency: react/jsx-dev-runtime
19:01:26 [crx] files start build
Uncaught (in promise) SyntaxError: Failed to construct 'WebSocket': The URL 'ws://localhost:undefined/' is invalid.
Title:
boilerplate of lit can not run
Env:
node: v14.19.0
npm: 6.14.16
os: darwin (macOS Version:12.4)
Error:
popup page can't be rendered, (crx mode)
options page can't be rendered, (crx mode)
Cannot choose Alpine and it will go to inferno.
Hey everyone :)
Why does the build process create a manifest with web_accessible_resources? I don't want to make any files accessible, and my extension should work fine without it.
However I haven't found a way to make the content script run otherwise and I get the error: Uncaught SyntaxError: Cannot use import statement outside a module (at chunk-0d13d13f.js:1:1) chunk-1b138347.js:1.
Any help greatly appreciated
Thanks!!
I've created some Chrome extensions using this tool and I always include a jsconfig.json
file to enable automatic completion of the Chrome APIs. I suggest including a jsconfig.json
in the basic templates.
Here's a sample of a jsconfig.json
file:
{"typeAcquisition": {"include": ["chrome"]}}
References:
Basically When you create a new svelte Ts project, add a App.svelte inside of the contentScript folder and append it via the content script to the body hte HTML Will work fine with hot reloads but the CSS inside of the .svelte file will lag behind one "css Reload". Basically it will lag behind one css update. Did test it extensivly and had someone else test it as well. The issue seems not vite related since a new vite svelte project works fine.
To see the latest css state you need to restart the dev server
Bug got introduced at Version v0.8.7
Update 2, probably narrowed it down to "@crxjs/vite-plugin": "^2.0.0-beta.19", update, version 2 seems to be really unstable and cause the issue for svelte and other frameworks. What's the solution here?
Sidepanel is available now in Chrome extension
https://developer.chrome.com/docs/extensions/reference/api/sidePanel?hl=fr
It would be great to add it in in generated templates.
Chrome supports a side panel feature. Will it be supported by create-chrome-ext?
P.S.: thanks for the great project!
I can already use tailwindcss
in addition to contentScript.tsx
, but the same configuration doesn't work for me in contentScript, how do I configure it?
similar to #80
btw, I've also already spent a lot of time on stackoverflow and google with no luck.
Third-party cookie will be blocked. Learn more in the Issues tab.
The server gets terminated when tries to access C: drive windows protected files such as "C:\DumpStack.log.tmp" and hibernate file.
> vite
vite v2.9.15 dev server running at:
> Local: http://localhost:3000/
> Network: use `--host` to expose
ready in 649ms.
9:48:30 AM [crx] files start ../../../../../../../build/v0.9.0
The emitted file "icons/icon_gradient_inactive_x16.png" overwrites a previously emitted file of the same name.
The emitted file "icons/icon_gradient_inactive_x48.png" overwrites a previously emitted file of the same name.
The emitted file "icons/icon_gradient_inactive_x32.png" overwrites a previously emitted file of the same name.
The emitted file "icons/icon_gradient_inactive_x128.png" overwrites a previously emitted file of the same name.
9:48:30 AM [crx] files ready in 282ms
node:events:491
throw er; // Unhandled 'error' event
^
Error: EBUSY: resource busy or locked, lstat 'C:\DumpStack.log.tmp'
Emitted 'error' event on FSWatcher instance at:
at FSWatcher._handleError (file:///C:/dir1/dir2/dir3/dir4/dir5/extension/node_modules/rollup/dist/es/shared/watch.js:4397:10)
at NodeFsHandler$1._boundHandleError (file:///C:/dir1/dir2/dir3/dir4/dir5/extension/node_modules/rollup/dist/es/shared/watch.js:2873:43)
at ReaddirpStream.emit (node:events:513:28)
at emitErrorNT (node:internal/streams/destroy:151:8)
at emitErrorCloseNT (node:internal/streams/destroy:116:3)
at process.processTicksAndRejections (node:internal/process/task_queues:82:21) {
errno: -4082,
code: 'EBUSY',
syscall: 'lstat',
path: 'C:\\DumpStack.log.tmp'
}
Node.js v18.16.0
Would there be any benefit in migrating this project to a Cookiecutter? Would love to open a PR
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.