Skip to main content

Solid and Content Scripts

Make sure that your extension is loaded in the browser and that you've started Vite. Navigate to and scroll to the bottom of the page.

There's our familiar Vite-Solid Hello World!

Leaking CSS styles

Let's try to change the Learn Solid <a> link to a button.

rel="noopener noreferrer"
Learn Solid

Notice how our 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.


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:

#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!

Solid Refresh in action

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