content_scripts

Type Array
Mandatory No
Example
"content_scripts": [
  {
    "matches": ["*://*.mozilla.org/*"],
    "js": ["borderify.js"]
  }
]

Instructs the browser to load content scripts into web pages whose URL matches a given pattern.

This key is an array. Each item is an object which:

  • must contain a key named matches, that specifies the URL patterns to be matched in order for the scripts to be loaded
  • may contain keys named js and css, which list scripts to be loaded into matching pages
  • may contain a number of other properties that control finer aspects of how and when content scripts are loaded

Details of all the keys you can include are given in the table below.

Name Type Description
all_frames Boolean

true: inject the scripts specified in js and css into all frames in the page.

false: inject into only the topmost frame.

Defaults to false.

css Array

An array of paths, relative to manifest.json, referencing CSS files that will be injected into matching pages.

Files are injected in the order given, and before the DOM is loaded.

exclude_globs Array
Firefox supports globs from version 48.
An array of strings containing wildcards. See Matching URL patterns below.
exclude_matches Array An array of match patterns. See Matching URL patterns below.
include_globs Array
Firefox supports globs from version 48.
An array of strings containing wildcards. See Matching URL patterns below.
js Array

An array of paths, relative to the manifest.json file, referencing JavaScript files that will be injected into matching pages.

Files are injected in the order given. This means that, for example, if you include jQuery here followed by another content script, like this:

"js": ["jquery.js", "my-content-script.js"]

then "my-content-script.js" can use jQuery.

Files are injected at the time specified by run_at.

matches Array

An array of match patterns. See Matching URL patterns below.

This is the only mandatory key.

run_at String

This option determines when the scripts specified in js are injected. You can supply one of three strings here, each of which identifies a state in the process of loading a document. The states directly correspond to Document.readyState:

  • "document_start": corresponds to loading. The DOM is still loading.
  • "document_end": corresponds to interactive. The DOM has finished loading, but resources such as scripts and images may still be loading.
  • "document_idle": corresponds to complete. The document and all its resources have finished loading.

The default value is "document_idle".

In all cases, files in js are injected after files in css.

Matching URL patterns

The "content_scripts" key attaches content scripts to documents based on URL matching: if the document's URL matches the specification in the key, then the script will be attached. There are four properties inside "content_scripts" that you can use for this specification:

To match one of these properties, a URL must match at least one of the items in its array. For example, given a property like:

"matches": ["*://*.example.org/*", "*://*.example.com/*"]

Both "http://example.org/" and "http://example.com/" will match.

Since matches is the only mandatory key, the other three keys are use to limit further the URLs that match. To match the key as a whole, a URL must:

  1. match the matches property
  2. AND match the include_globs property, if present
  3. AND NOT match the exclude_matches property, if present
  4. AND NOT match the exclude_globs property, if present

globs

Firefox supports globs from version 48.

A glob is just a string that may contain wildcards. There are two types of wildcard, and you can combine them in the same glob:

  • "*" matches zero or more characters
  • "?" matches exactly one character.

For example: "*na?i" would match "illuminati" and "annunaki", but not "sagnarelli".

Chrome incompatibilities

content_scripts

Firefox does not support:

  • match_about_blank

Example

"content_scripts": [
  {
    "matches": ["*://*.mozilla.org/*"],
    "js": ["borderify.js"]
  }
]

This injects a single content script "borderify.js" into all pages under "mozilla.org" or any of its subdomains, whether served over HTTP or HTTPS.

  "content_scripts": [
    {
      "exclude_matches": ["*://developer.mozilla.org/*"],
      "matches": ["*://*.mozilla.org/*"],
      "js": ["jquery.js", "borderify.js"]
    }
  ]

This injects two content scripts into all pages under "mozilla.org" or any of its subdomains except "developer.mozilla.org", whether served over HTTP or HTTPS.

The content scripts see the same view of the DOM and are injected in the order they appear in the array, so "borderify.js" can see global variables added by "jquery.js".

Document Tags and Contributors

 Contributors to this page: Makyen, wbamberg
 Last updated by: Makyen,