Skip to main content

React and Content Scripts

Make sure that your extension is loaded in the browser and that you've started Vite. Navigate to https://www.google.com and scroll to the bottom of the page.

There's our familiar Vite-React Hello World!

Leaking CSS styles​

Notice how the counter button doesn't look like a button. That's because Google's styles affect our content script elements. The same goes the other way: our styles change Google's styles.

tip

The CSS of the host page will affect your content script, and the CSS of the content script will affect the host page.

Let's fix that button. Replace everything in src/index.css with this:

src/index.css
#crx-root {
  position: fixed;
  top: 3rem;
  left: 50%;
  transform: translate(-50%, 0);
}

#crx-root button {
  background-color: rgb(239, 239, 239);
  border-color: rgb(118, 118, 118);
  border-image: initial;
  border-style: outset;
  border-width: 2px;
  margin: 0;
  padding: 1px 6px;
}

CRXJS will quickly rebuild the content script, and our CSS changes will take effect.

Now our div position is fixed, and the button looks more like a button!

React Refresh in action​

CRXJS does some magic behind the scenes to get React Refresh working in content scripts.