DEV Community

Real Vite-React HMR in Chrome Extension Content Scripts

Jack Steam on March 18, 2022

A content script is JavaScript from a Chrome Extension that the browser executes on a designated host page. It shares the DOM with the host page b...
Read full post
Collapse
 
moinulmoin profile image
Moinul Moin •

Great!

how to work with background.js for service worker? you should include it in the doc

Collapse
 
jacksteamdev profile image
Jack Steam •

Great idea! We're working on the docs, you can take peek here: crxjs.dev/vite-plugin

Check out this comment for instructions on the background service worker: dev.to/lichenglu/comment/1od4p

Collapse
 
moinulmoin profile image
Moinul Moin •

I checked, I did the same in maniest json. this code will work fine inside it?

Thread Thread
 
moinulmoin profile image
Moinul Moin • 
// path: src/background/index.js

console.log('I am background.js');

chrome.action.onClicked.addListener((tab) => {
    chrome.scripting.executeScript({
        target: { tabId: tab.id },
        files: ['src/main.jsx'],
    });
});
Enter fullscreen mode Exit fullscreen mode
Thread Thread
 
moinulmoin profile image
Moinul Moin •

I am actuallyy trying to inject the content script by clicking on the icon of extension. so, kindly tell me how it will work, I tried with this code. but It throw error at this line

files: ['src/main.jsx'],
Enter fullscreen mode Exit fullscreen mode
Thread Thread
 
jacksteamdev profile image
Jack Steam •

You can import the script with a script query:

// note how the import path ends with `?script`
import scriptPath from './content-script?script'

chrome.action.onClicked.addListener((tab) => {  
  chrome.scripting.executeScript({
    target: { tabId: tab.id },
    files: [scriptPath]
  });
});
Enter fullscreen mode Exit fullscreen mode

This will also provide HMR for the imported script. More info: Dynamic content scripts

Collapse
 
dodobird profile image
Caven •

Vite + vue, css is not applied.

github.com/keyding/vite-crx-vue-test

Collapse
 
jacksteamdev profile image
Jack Steam • • Edited

Thanks for creating an issue! I'm glad we were able to get things resolved.

Collapse
 
sanujbansal profile image
sanuj bansal •

I see this error

Image description
when I try to add:-
"content_scripts": [
{
"js": ["src/main.jsx"],
"matches": ["google.com/*"]
}
]
Any solutions for this?

Collapse
 
jacksteamdev profile image
Jack Steam •

This is a known issue with the new Vite 3.0, but you can install the latest versions of Vite 2 and plugins and things should work as expected:

npm i -D vite@^2 @vitejs/plugin-react@^1
Enter fullscreen mode Exit fullscreen mode

I'm updating the articles so this doesn't continue to trip people up.

Collapse
 
shivraj97 profile image
Shivraj97 • • Edited

Hi Jack, This resolved the issue for content script hot reloading but the pop up always shows Waiting for service worker..

Image description

and this is the Error shown in Brave extension page

Image description

Collapse
 
kobimantzur profile image
Kobi Mantzur •

I just spent 2 days of trying to develop a content script with Webpack and HMR with no luck. Thank you!! It works like a charm 🪄

Collapse
 
derekzyl profile image
derekzyl •

I need information on how to setup content script with Tsx. thank you