Remarks#

TODO: Short description of Chrome Extensions

Official documentation

• What are extensions? (documentation hub)
• Getting Started tutorial (basic tutorial)
• Overview
• JavaScript APIs (comprehensive list of chrome.* APIs)

Further reading

TODO: Populate with links to important overview topics

Absolute minimum example

Any Chrome extension starts as an unpacked extension: a folder containing the extension’s files.

One file it must contain is manifest.json, which describes the basic properties of the extension. Many of the properties in that file are optional, but here is an absolute minimum manifest.json file:

{
  "manifest_version": 2,
  "name": "My Extension",
  "version": "1.0"
}

Create a folder (for example, myExtension) somewhere, add manifest.json as listed above to it.

Then, you need to load the extension in Chrome.

1. Open the chrome://extensions/ page, accessible though Menu > More tools > Extensions.
2. Enable Developer Mode with a checkbox in the top right, if it’s not enabled already.
3. Click on Load unpacked extension… button and select the created myExtension folder.

That’s it! Your first extension is loaded by Chrome:

Of course, it doesn’t do anything yet, so it’s a good moment to read an overview of extension architecture to start adding parts you need.

Important: When you do any changes to your extension, do not forget to return to chrome://extensions/ and press the Reload link for your extension after you make changes. In case of content scripts, reload the target page as well.

Background Page

Content Scripts

Options Page

Create a new tab

In the extension code you can use any chrome.* API if you decalared the required permissions. In addition, some API’s works only from background pages, and some API’s works only from content scripts.

You can use most of chrome.tabs methods declaring any permissions. Now we focus on chrome.tabs.create

_{Note: The new tab will be opened without any popup warning.}

chrome.tabs.create({
       url:"https://stackoverflow.com",
       selected:false  // We open the tab in the background
})

You can learn more about tab object, in the official chrome developer