Chrome Extension Snippets

Find out the active tab

This must be run from a background script. If you want to read the url, title or favicon of a tab, you must have the "tabs" permission in your manifest.json.

// background.js
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
  var tab = tabs[0];
  if (tab) {
    // this is the active tab. You can use other chrome extension apis
    // here, such as:
    //  * showing the pageAction for this tab,
    //  * updating the state (active, muted, highlighted, pinned) of this tab
    //  * move this tab to a different place in the window
    //  * insert CSS or JavaScript into the tab
    //  See https://developer.chrome.com/extensions/tabs for more
  }
});

Display text (badge) in the Browser Action Icon

Browser Actions are icons that show up to the right of the location bar in Chrome, and are enabled by default. This must be run from a background script.

// background.js
chrome.browserAction.setBadgeText({text: "Hello!"});

Show a Page Action for every new tab

Page Actions are icons that show up inside the location bar in Chrome, and they are disabled by default. In order to show the page action, you must use the chrome.pageAction.show API. This snippet adds listeners for every time a tab is updated or activated, like so:

// background.js

// Add listener for when a tab is activated (clicked on by the user):
chrome.tabs.onActivated.addListener(function(details) {
  var tabId = details.tabId;
  chrome.pageAction.show(tabId);
});

// Add listener for when a tab is updated
chrome.tabs.onUpdated.addListener(function(tabId) {
  chrome.pageAction.show(tabId);
});

Add a click listener for the browser action

Note that if your manifest.json already specifies a "default_popup" for the browser action, this click listener will not work.

// background.js
chrome.browserAction.onClicked.addListener(function(tab) {
  console.log('Browser action clicked while on URL: ' + tab.url);
  // To see other properties of the `tab` see: https://developer.chrome.com/extensions/tabs#type-Tab
});

Inject a JS or CSS file into the current tab when clicking browser action

Note that your manifest.json must include the activeTab permission. Note also that your manifest.json must also specify options for "browser_action", even if they are empty. Here's an example manifest.json:

{
  "name": "the name",
  "manifest_version": 2,
  "version": "0.1",

  "browser_action": {},
  "permissions": ["activeTab"],
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  }
}

And here's the background.js:

chrome.browserAction.onClicked.addListener(function(tab) {
  // to inject a JS file (see https://developer.chrome.com/extensions/tabs#method-executeScript):
  chrome.tabs.executeScript(tab.id, {file: "filename-goes-here"});

  // to inject a CSS file (see https://developer.chrome.com/extensions/tabs#method-insertCSS):
  chrome.tabs.insertCSS(tab.id, {file: "filename-goes-here"});
});

Load image from your extension

If you have an image in your extension's folder that you want to display on page, you use the chrome.extension.getURL API:

// content_script.js
// assume you have a file named "rose.jpg" in your extension directory
var imageSrc = chrome.extension.getURL("rose.jpg");
var image = document.createElement('img');
image.src = imageSrc;

document.body.appendChild(image);

You must also specify that the resource is allowed to be loaded from the extension into a web page using the "web_accessible_resources" property in your manifest.json.

See the replace-image example.