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:

AttributeDescription
matchesSpecifies which pages this content script will be injected into. Follows the Match Pattern format.
cssList of CSS files to be injected into matching pages.
jsList 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