Add a content script

CRXJS brings an authentic Vite HMR experience to content scripts. Let's add a plain JavaScript 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.

Declare a content script

We declare content scripts in the manifest with a list of JavaScript files and match patterns. Match patterns represent 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.js"],
      "matches": ["https://www.google.com/*"]
    }
  ]
}

Here we're telling Chrome to execute src/content.js on all pages that start with https://www.google.com. In this case, the Google homepage is the content script's host page.

Add an visual element

We're not using a framework, but we can use plain JavaScript to add the CRXJS logo to a host page. Notice how Vite still allows you to import CSS files and static assets even though you're not using a framework!

src/content.js

import src from './image.png'
import './content.css'

const html = `
<div class="crx">
  <img src=${src}>
</div>
`

const doc = new DOMParser().parseFromString(html, 'text/html')
document.body.append(doc.body.firstElementChild)

src/content.css

.crx img {
  width: 3rem;
  height: 3rem;
}

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'
/>

Now our content script is ready for action!