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

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?

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

template-vue-ts/package.json

- "@vitejs/plugin-vue": "^2.3.3",
+ "@vitejs/plugin-vue": "^4.4.0",

Chrome supports a side panel feature. Will it be supported by create-chrome-ext?

P.S.: thanks for the great project!

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 know this is not an issue but was someone able to add tailwindcss for react? if yes how?
Thanks!!

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?

I need to extract the Chrome extension files for an electron app. is there a way to extract/unpack the crx3 files?

我在 manifest 里面按照以下方式配置，发现无效。

content_scripts: [ { "matches": ["https://juejin.cn/*"], js: ['src/content/index.ts'], css: ['src/content/index.css'], }, ],

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.

Third-party cookie will be blocked. Learn more in the Issues tab.

Uncaught (in promise) SyntaxError: Failed to construct 'WebSocket': The URL 'ws://localhost:undefined/' is invalid.

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',
    },
  ],

when i use create-chrome-ext with react + ts + vite, after install dependencies and run npm run dev, it comes with websockets connect failed:

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.

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)

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.

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'))

Some docs

When I try to create a new app from either the vue-ts or react-ts template using yarn v1.22 on MacOS, I get the following error:

As specified in the README docs: yarn create chrome-ext test-app --template react-ts

It works well in the interactive mode otherwise: yarn create chrome-ext

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.

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:

• https://stackoverflow.com/a/73080274/8010366
• https://github.com/rational-kunal/List-to-Checklist/blob/main/jsconfig.json

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?

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?

hello, thanks for this great tool. after scaffolding in readme file the command suggests npm build. the command should be npm run build.
screen shot added.
my version: vanilla js.

When starting a project, in the list of suggest next steps we've got:

5. Click the Load unpacked extension button.
6. 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

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.

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

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?

Hi,
I want to apply tailwind css in this temporary can you describe How can I use it?

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

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)

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)

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

Would there be any benefit in migrating this project to a Cookiecutter? Would love to open a PR

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.

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