pravchuk / sample-extension Goto Github PK

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.

• 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

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.

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.

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.

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.

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