google-chrome-extension Getting started with google-chrome-extension Content Scripts

Example

A content script is extension code that runs alongside a normal page.

They have full access to the web page's DOM (and are, in fact, the only part of the extension that can access a page's DOM), but the JavaScript code is isolated, a concept called Isolated World. Each extension has its own content script JavaScript context invisible to others and the page, preventing code conflicts.

Example definition in manifest.json:

  "content_scripts": [
    {
      "matches": ["http://www.stackoverflow.com/*"],
      "css": ["style.css"],
      "js": ["jquery.js", "myscript.js"]
    }
  ]

The attributes have the following meaning:

Attribute	Description
matches	Specifies which pages this content script will be injected into. Follows the Match Pattern format.
css	List of CSS files to be injected into matching pages.
js	List of JS files to be injected into matching pages. Executed in order listed.

Content scripts can also be injected on demand using chrome.tabs.executeScript, which is called Programmatic Injection.

See also

• Official documentation: Content Scripts
• Stack Overflow documentation: Content Scripts