• Skip to main content
  • Select language
  • Skip to search
MDN Web Docs
  • Technologies
    • HTML
    • CSS
    • JavaScript
    • Graphics
    • HTTP
    • APIs / DOM
    • WebExtensions
    • MathML
  • References & Guides
    • Learn web development
    • Tutorials
    • References
    • Developer Guides
    • Accessibility
    • Game development
    • ...more docs
Add-ons
  1. MDN
  2. Mozilla
  3. Add-ons
  4. Browser extensions
  5. manifest.json
  6. content_scripts

content_scripts

In This Article
  1. Matching URL patterns
    1. globs
  2. Example
  3. Browser compatibility
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 matching the specified URL requirements, even if the frame is not the topmost frame in a tab. This does not inject into child frames where only their parent matches the URL requirements and the child frame does not match the URL requirements. The URL requirements are checked for each frame independently.

false: inject only into frames matching the URL requirements which are the topmost frame in a tab.

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 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 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.

match_about_blank Boolean

Insert the content scripts into pages whose URL is "about:blank" or "about:srcdoc", if the URL of the page that opened or created this page matches the patterns specified in the rest of the content_scripts key.

This is especially useful to run scripts in empty iframes , whose URL is "about:blank". To do this you should also set the all_frames key.

For example, suppose you have a content_scripts key like this:

  "content_scripts": [
    {
      "js": ["my-script.js"],
      "matches": ["https://example.org/"],
      "match_about_blank": true,
      "all_frames": true
    }
  ]

If the user loads https://example.org/, and this page embeds an empty iframe, then "my-script.js" will be loaded into the iframe.

match_about_blank is supported in Firefox from version 52. Note that in Firefox, content scripts won't be injected into empty iframes at "document_start" even if you specify that value in 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:

  • matches: an array of match patterns.
  • exclude_matches: an array of match patterns.
  • include_globs: an array of globs.
  • exclude_globs: an array of globs.

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

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".

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".

Browser compatibility

The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

ChromeEdgeFirefoxFirefox for AndroidOpera
Basic supportYes 1Yes48 248 2Yes 1
match_about_blankYesYes5252Yes
1. Content scripts are not applied to tabs already open when the extension is loaded.
2. Content scripts won't be injected into empty iframes at 'document_start' even if you specify that value in 'run_at'.

Document Tags and Contributors

Tags: 
  • Add-ons
  • Extensions
  • WebExtensions
 Contributors to this page: wbamberg, Makyen
 Last updated by: wbamberg, May 24, 2017, 8:14:08 PM
See also
  1. Browser extensions
  2. Getting started
    1. What are extensions?
    2. Your first extension
    3. Your second extension
    4. Anatomy of an extension
    5. Example extensions
  3. How to
    1. Intercept HTTP requests
    2. Modify a web page
    3. Add a button to the toolbar
    4. Implement a settings page
  4. User interface
    1. Introduction
    2. Toolbar button
    3. Address bar button
    4. Sidebar
    5. Context menu items
    6. Options page
    7. Bundled web pages
    8. Notifications
    9. Address bar suggestions
    10. Developer tools panels
  5. Concepts
    1. Using the JavaScript APIs
    2. Content scripts
    3. Match patterns
    4. Internationalization
    5. Content Security Policy
    6. Native messaging
  6. Porting
    1. Porting a Google Chrome extension
    2. Porting a legacy Firefox extension
    3. Embedded WebExtensions
    4. Comparison with the Add-on SDK
    5. Comparison with XUL/XPCOM extensions
    6. Chrome incompatibilities
    7. Differences between desktop and Android
  7. Firefox workflow
    1. Temporary Installation in Firefox
    2. Debugging
    3. Developing for Firefox for Android
    4. Getting started with web-ext
    5. web-ext command reference
    6. Extensions and the Add-on ID
    7. Publishing your extension
  8. JavaScript APIs
    1. Browser support for JavaScript APIs
    2. alarms
    3. bookmarks
    4. browserAction
    5. browsingData
    6. commands
    7. contextMenus
    8. contextualIdentities
    9. cookies
    10. devtools.inspectedWindow
    11. devtools.network
    12. devtools.panels
    13. downloads
    14. events
    15. extension
    16. extensionTypes
    17. history
    18. i18n
    19. identity
    20. idle
    21. management
    22. notifications
    23. omnibox
    24. pageAction
    25. permissions
    26. privacy
    27. proxy
    28. runtime
    29. sessions
    30. sidebarAction
    31. storage
    32. tabs
    33. topSites
    34. types
    35. webNavigation
    36. webRequest
    37. windows
  9. Manifest keys
    1. applications
    2. author
    3. background
    4. browser_action
    5. chrome_settings_overrides
    6. chrome_url_overrides
    7. commands
    8. content_scripts
    9. content_security_policy
    10. default_locale
    11. description
    12. developer
    13. devtools_page
    14. homepage_url
    15. icons
    16. incognito
    17. manifest_version
    18. name
    19. omnibox
    20. optional_permissions
    21. options_ui
    22. page_action
    23. permissions
    24. protocol_handlers
    25. short_name
    26. sidebar_action
    27. version
    28. web_accessible_resources
  10. Themes
  11. Publishing add-ons
  12. Guides
    1. Signing and distribution overview
    2. Submit an add-on
    3. Creating an appealing listing
    4. Review policies
    5. Developer agreement
    6. Featured add-ons
    7. Contact addons.mozilla.org
  13. Community and support
  14. Channels
    1. Add-ons blog
    2. Add-on forums
    3. Stack Overflow
    4. Development newsgroup
    5. IRC Channel
  15. Legacy add-ons
  16. Legacy technologies
    1. Add-on SDK
    2. Legacy Firefox for Android
    3. Bootstrapped extensions
    4. Overlay extensions