Solid Content Scripts

CRXJS brings an authentic Vite HMR experience to content scripts. Let's add a Solid content script to your Chrome Extension.

Did you know?

A content script is JavaScript from a Chrome Extension that the browser executes on a designated web page. The page where the script runs is called the host page. The content script shares the DOM with the host page but has a separate JavaScript environment.

Add a content script

We declare content scripts with a list of JavaScript files and match patterns for the pages where Chrome should execute our content script. In manifest.json, create the field content_scripts with an array of objects:

manifest.json

{
  // other fields...
  "content_scripts": [
    {
      "js": ["src/content.jsx"],
      "matches": ["https://www.google.com/*"]
    }
  ]
}

Here we're telling Chrome to execute src/content.jsx on all pages that start with https://www.google.com.

Create the root element

Content scripts don't use an HTML file, so we need to create our root element and append it to the DOM before mounting our Solid app.

src/index.jsx

import { render } from 'solid-js/web';

import './index.css';
import App from './App';

render(
  () => <App />,
  // this element doesn't exist
  document.getElementById('root')
);

Let's add that root element. Make a copy of src/index.jsx and name it src/content.jsx. Add the highlighted code.

src/content.jsx

import { render } from 'solid-js/web';

import './index.css';
import App from './App';

const root = document.createElement('div')
root.id = 'crx-root'
document.body.append(root)

render(
  () => <App />,
  root
);

Get the right URL

info

Content scripts share the origin of the page where they run.

The browser treats the imported value logo as a URL from the host page. If the content script is running on https://google.com, the img tag will try to load from https://google.com/logo.svg.

Images first must be specified in the web_accessible_resources field in your manifest.json file:

manifest.json

"web_accessible_resources": [
  {
    "resources": [ "icons/*.png"],
    "matches": []
  }
]

Then you reference the image in your content script using the chrome.runtime.getURL method:

App.jsx

<img
  src={chrome.runtime.getURL('icons/logo.png')}
  className='App-logo'
  alt='logo'
/>