DEV Community

Advanced Config for CRXJS Vite Plugin

Jack Steam on April 12, 2022

The CRXJS Vite plugin has been in beta long enough to get a good sample of developer use cases. Thanks to everyone who has helped by creating issue...
Read full post
Collapse
 
ljcravero profile image
ljcravero •

I've a question... I can't generate correctly my extension using crxjs plugin... when I trying to submit my zip generated after running npm run build, later I can't view my extension running correctly.
I'm actually using React, Vite and CRXJS plugin.
Can you help me to publish my extension? I'm trying to publish it for my actually company...

Collapse
 
jacksteamdev profile image
Jack Steam • • Edited

The best way to get support is to start a discussion on GitHub:

github.com/crxjs/chrome-extension-...

See you there!

Collapse
 
moshontongit profile image
Muslimin Ontong •

Do you have an github example project for this?

Collapse
 
jacksteamdev profile image
Jack Steam •

Check out this devtools extension starter:
github.com/jacksteamdev/crx-react-...

Collapse
 
moshontongit profile image
Muslimin Ontong •

how to implement/create a background script?

Thread Thread
 
lichenglu profile image
Chenglu Li •

From my understanding, you will just need to specify your background script in your manifest file. Something like

{
  ...[this is your custom manifest, not the generated one in dist]
  "background": {
      "service_worker": "src/background/index.ts",
      "type": "module"
    }
}
Enter fullscreen mode Exit fullscreen mode

Then in the dist folder, if you check service-worker-loader.js, you will see your background script imported there. I have only tested it in the dev command, not sure if extra set up is needed for production build.

Thread Thread
 
jacksteamdev profile image
Jack Steam •

This is exactly correct! No extra setup needed for production.

Thread Thread
 
moinulmoin profile image
Moinul Moin •

this will work perfectly?

Collapse
 
dodobird profile image
Caven •

Very nice!

Collapse
 
derekzyl profile image
derekzyl • • Edited

i have a question

{
  "manifest_version": 3,
  "name": "CRXJS React Vite Example",
  "version": "1.0.0",
  "action": { "default_popup": "index.html" },
  "content_scripts": [
    {
      "js": ["src/content.jsx"],
      "matches": [

        "https://developer.chrome.com/docs/webstore/*"
      ]
    }
  ]
}
Enter fullscreen mode Exit fullscreen mode

how do I handle this in typescipt, the content has to be in tsx in typescript whats the hack i can use.
i.e content.tsx.

Collapse
 
cruelengine profile image
B Abhineeth Bhat •

I have an error with the dynamic import of a content script in background script.
I'm trying to do :
import myScript from './content?script' but i get a compilation error as well as "Cannot find module './content?script' or its corresponding type declarations.ts(2307)"

How do i solve it ?

Collapse
 
prakhartiwari0 profile image
Prakhar Tiwari •

How can we dynamically add and remove CSS files?

Collapse
 
lookrain profile image
Lu Yu •

import mainWorld from './main-world?script&module'

I don't think the script and module params are a Vite feature. I guess it's handled by the CRX plugin?