Skip to content
A sample Chrome Extension that can access the DOM and JavaScript context of the user's page
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
img
README.md
background.js
content.js
index.html
index.js
injected.js
manifest.json
panel.html
panel.js

README.md

sample-extension

This sample Chrome Extension shows how to use the different scripts available to Chrome extensions to access the JavaScript environment and DOM of a user's page.

What it can do?

  • know when it is being used and set the icon in the Chrome toolbar
  • add a global variable to the JavaScript environment of the user's page
  • read the DOM of the user's page
  • display the Element tree in a Panel in devtools

What scripts are used?

background script

A background script is used to listen for messages from other scripts. As the name indicates, this runs in the background and is always available — even if no devtools windows are open.

This is executed by setting the following properties in the extension's manifest:

"background": {
    "scripts": [ "background.js" ]
}

All this simple background script does is change the icon displayed in the Chrome toolbar when the extension is in use.

content script

A content script is also set up through the manifest using this configuration:

"content_scripts": [{
    "all_frames": true,
    "js": [ "content.js" ],
    "matches": [ "*://*/*" ]
}]

This script is injected by the extension into each frame of the page. It can access the DOM of the user's page, but runs in an isolated JavaScript environment.

The content script can also use chrome.* APIs as explained in the extensions docs.

Note: although not shown in this example, the content script could pass messages to the background script or other parts of the extension through the chrome.runtime.connect API.

injected script

The content script also injects a <script> tag into the users page. This injected script has access to the DOM and also the JavaScript environment of the user's page.

This script sets up a global variable (window.__SAMPLE_EXTENSION_NAMESPACE__) that contains functions that can be used by devtools page (explained below).

Note: although not shown in this example, the injected script could pass messages to the content script through window.postMessage.

devtools_page

Not technically a script, but this html page loads a JavaScript file that extends Chrome's devtools with a new panel.

This panel uses the chrome.devtools.inspectedWindow.eval to call functions on the __SAMPLE_EXTENSION_NAMESPACE__ object to retrieve data from the user's page and display it in the devtools panel.

How do I run it?

  1. clone the repo
  2. navigate Chrome to chrome://extensions/
  3. click "Load Unpacked"
  4. select the directory where the repo is cloned
  5. open Chrome devtools and click on the "Sample Extension" panel
You can’t perform that action at this time.