List of everything a Chrome Extension can do(and what it needs to do so)

Vidit Saxena
13 min readApr 22, 2016

Chrome Extensions are nothing but websites (HTML, CSS and Javascript files) uploaded to Chrome Store. The only difference is that there is a manifest file in Chrome Extensions, which explains what the Chrome Extension is supposed to do and how it is supposed to do it using Chrome APIs.

I found it pain-staking to find all the documentation around capabilities and requirements for Chrome Extensions so I went and consolidated all of it in one place below. Hope it helps!

First look at this Manifest file below, which is fully loaded . Below the file, there is explanation of all the underlined properties in the manifest file.

MANIFEST FILE

{
// Required
"manifest_version": 2,
"name": "My Extension",
"version": "versionString",
// Recommended
"default_locale": "en",
"description": "A plain text description",
"icons": {...},
// Pick one (or none)
"browser_action": {...},
"page_action": {...},
// Optional
"author": ...,
"automation": ...,
"background": {
// Recommended
"persistent": false
},
"background_page": ...,
"chrome_settings_overrides": {...},
"chrome_ui_overrides": {
"bookmarks_ui": {
"remove_bookmark_shortcut": true,
"remove_button": true
}
},
"chrome_url_overrides": {...},
"commands": {...},
"content_capabilities": ...,
"content_scripts": [{...}],
"content_security_policy": "policyString",
"converted_from_user_script": ...,
"copresence": ...,
"current_locale": ...,
"devtools_page": "devtools.html",
"event_rules": [{...}],
"externally_connectable": {
"matches": ["*://*.example.com/*"]
},
"file_browser_handlers": [...],
"file_system_provider_capabilities": {
"configurable": true,
"multiple_mounts": true,
"source": "network"
},
"homepage_url": "http://path/to/homepage",
"import": [{"id": "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"}],
"incognito": "spanning or split",
"input_components": ...,
"key": "publicKey",
"minimum_chrome_version": "versionString",
"nacl_modules": [...],
"oauth2": ...,
"offline_enabled": true,
"omnibox": {
"keyword": "aString"
},
"optional_permissions": ["tabs"],
"options_page": "options.html",
"options_ui": {
"chrome_style": true,
"page": "options.html"
},
"permissions": ["tabs"],
"platforms": ...,
"plugins": [...],
"requirements": {...},
"sandbox": [...],
"short_name": "Short Name",
"signature": ...,
"spellcheck": ...,
"storage": {
"managed_schema": "schema.json"
},
"system_indicator": ...,
"tts_engine": {...},
"update_url": "http://path/to/updateInfo.xml",
"version_name": "aString",
"web_accessible_resources": [...]
}

Version

One integer specifying the version of the manifest file format your package requires. As of Chrome 18, developers should specify 2 (without quotes) to use the format as described by this document:

“manifest_version”: 2

Name

The name (maximum of 45 characters) is the primary identifier of the extension and is a required field. It is displayed in the following locations:

Short Name

The short_name (maximum of 12 characters recommended) is a short version of the extension’s name. It is an optional field and if not specified, the name will be used, though it will likely be truncated. The short name is typically used where there is insufficient space to display the full name, such as:

  • App launcher
  • New Tab page

Extension Version

One to four dot-separated integers identifying the version of this extension. A couple of rules apply to the integers: they must be between 0 and 65535, inclusive, and non-zero integers can’t start with 0. For example, 99999 and 032 are both invalid.

Here are some examples of valid versions:

  • “version”: “1”
  • “version”: “1.0”
  • “version”: “2.10.2”
  • “version”: “3.1.2.4567”

Default Locale

Specifies the subdirectory of _locales that contains the default strings for this extension. This field is required in extensions that have a _locales directory; it must be absent in extensions that have no_locales directory.

Description

A plain text string (no HTML or other formatting; no more than 132 characters) that describes the extension. The description should be suitable for both the browser’s extension management UI and the Chrome Web Store. You can specify locale-specific strings for this field;

Icons

One or more icons that represent the extension, app, or theme. You should always provide a 128x128 icon; it’s used during installation and by the Chrome Web Store. Extensions should also provide a 48x48 icon, which is used in the extensions management page (chrome://extensions). You can also specify a 16x16 icon to be used as the favicon for an extension’s pages.

Icons should generally be in PNG format, because PNG has the best support for transparency. They can, however, be in any format supported by WebKit, including BMP, GIF, ICO, and JPEG. Here’s an example of specifying the icons:

"icons": { "16": "icon16.png",
"48": "icon48.png",
"128": "icon128.png" },

BrowserAction

Use browser actions to put icons in the main Google Chrome toolbar, to the right of the address bar. In addition to its icon, a browser action can also have a tooltip, a badge, and a popup.

PageAction

Description:Use the chrome.pageAction API to put icons inside the address bar. Page actions represent actions that can be taken on the current page, but that aren’t applicable to all pages.

Background Pages

Caution: Consider using event pages instead. Learn more.

A common need for extensions is to have a single long-running script to manage some task or state. Background pages to the rescue.

As the architecture overview explains, the background page is an HTML page that runs in the extension process. It exists for the lifetime of your extension, and only one instance of it at a time is active. (Exception: if your extension uses incognito “split” mode, a second instance is created for incognito windows.)

Learn More

Persistence(Event Pages)

A common need for apps and extensions is to have a single long-running script to manage some task or state. Event pages to the rescue. Event pages are loaded only when they are needed. When the event page is not actively doing something, it is unloaded, freeing memory and other system resources.

Event pages are available in the stable channel as of Chrome 22, and the performance advantages are significant, especially on low-power devices. Please prefer them to persistent background pages whenever possible for new development and begin migrating existing background pages to this new model.

Register your event page in the manifest like below.

{
"name": "My extension",
...
"background": {
"scripts": ["eventPage.js"],
"persistent": false
},
...
}

Notice that without the “persistent” key, you have a regular background page. Persistence is what differentiates an event page from a background page.

Settings Overrides

Settings overrides are a way for extensions to override selected Chrome settings. The API is available only on Windows.

Homepage, Search Provider, and Startup Pages

Here is an example how homepage, search provider and startup pages can be modified in theextension manifest. Web sites used in the settings API must be verified (via Webmaster Tools) as being associated with that item in the Chrome Web Store. Note that if you verify ownership for a domain (for example, http://example.com) you can use any subdomain or page (for example, http://app.example.com or http://example.com/page.html) within your extension.

User Interface Overrides

User interface overrides are a way for extensions to override selected Chrome user interface properties.

Override Pages

Override pages are a way to substitute an HTML file from your extension for a page that Google Chrome normally provides. In addition to HTML, an override page usually has CSS and JavaScript code.

An extension can replace any one of the following pages:

  • Bookmark Manager: The page that appears when the user chooses the Bookmark Manager menu item from the Chrome menu or, on Mac, the Bookmark Manager item from the Bookmarks menu. You can also get to this page by entering the URLchrome://bookmarks.
  • History: The page that appears when the user chooses the History menu item from the Chrome menu or, on Mac, the Show Full History item from the History menu. You can also get to this page by entering the URLchrome://history.
  • New Tab: The page that appears when the user creates a new tab or window. You can also get to this page by entering the URL chrome://newtab.

Commands

Description:Use the commands API to add keyboard shortcuts that trigger actions in your extension, for example, an action to open the browser action or send a command to the extension.

Content Scripts

Content scripts are JavaScript files that run in the context of web pages. By using the standardDocument Object Model (DOM), they can read details of the web pages the browser visits, or make changes to them.

Here are some examples of what content scripts can do:

  • Find unlinked URLs in web pages and convert them into hyperlinks
  • Increase the font size to make text more legible
  • Find and process microformat data in the DOM

However, content scripts have some limitations. They cannot:

These limitations aren’t as bad as they sound. Content scripts can indirectly use the chrome.* APIs, get access to extension data, and request extension actions by exchangingmessages with their parent extension. Content scripts can also make cross-site XMLHttpRequests to the same sites as their parent extensions, and they cancommunicate with web pages using the shared DOM. For more insight into what content scripts can and can’t do, learn about the execution environment.

Learn More

Example of Content Script in Manifest file

If your content script’s code should always be injected, register it in the extension manifest using thecontent_scripts field, as in the following example.

{
"name": "My extension",
...
"content_scripts": [
{
"matches": ["http://www.google.com/*"],
"css": ["mystyles.css"],
"js": ["jquery.js", "myscript.js"]
}
],
...
}

If you want to inject the code only sometimes, use the permissions field instead, as described in Programmatic injection.

{
"name": "My extension",
...
"permissions": [
"tabs", "http://www.google.com/*"
],
...
}

Content Security Policy (CSP)

In order to mitigate a large class of potential cross-site scripting issues, Chrome’s extension system has incorporated the general concept of Content Security Policy (CSP) . This introduces some fairly strict policies that will make extensions more secure by default, and provides you with the ability to create and enforce rules governing the types of content that can be loaded and executed by your extensions and applications.

In general, CSP works as a black/whitelisting mechanism for resources loaded or executed by your extensions. Defining a reasonable policy for your extension enables you to carefully consider the resources that your extension requires, and to ask the browser to ensure that those are the only resources your extension has access to. These policies provide security over and above the host permissions your extension requests; they’re an additional layer of protection, not a replacement.

On the web, such a policy is defined via an HTTP header or meta element. Inside Chrome’s extension system, neither is an appropriate mechanism. Instead, an extension’s policy is defined via the extension’smanifest.json file as follows:

{
...,
"content_security_policy": "[POLICY STRING GOES HERE]"
...
}

Extending DevTools

A DevTools extension adds functionality to the Chrome DevTools. It can add new UI panels and sidebars, interact with the inspected page, get information about network requests, and more. View featured DevTools extensions. DevTools extensions have access to an additional set of DevTools-specific extension APIs:

Event_rules

The event_rules manifest property provides a mechanism to add rules that intercept, block, or modify web requests in-flight usingdeclarativeWebRequest or take actions depending on the content of a page, without requiring permission to read the page’s content usingdeclarativeContent.

Externally_connectable

The externally_connectable manifest property declares which extensions, apps, and web pages can connect to your extension via runtime.connect andruntime.sendMessage.

For a tutorial on message passing see cross-extension and app messagingand sending messages from web pages.

Chrome.fileBrowserHandler

Description:Use the chrome.fileBrowserHandler API to extend the Chrome OS file browser. For example, you can use this API to enable users to upload files to your website.

Chrome.fileSystemProvider

Description:Use the chrome.fileSystemProvider API to create file systems, that can be accessible from the file manager on Chrome OS.

Homepage Url

The URL of the homepage for this extension. The extensions management page (chrome://extensions) will contain a link to this URL. This field is particularly useful if you host the extension on your own site. If you distribute your extension using the Chrome Web Store, the homepage URL defaults to the extension’s own page.

Shared Modules(imports and exports)

Shared Modules are permissionless collections of resources that can be shared between other extensions and apps. Common uses of Shared Modules are:

  • As an API. You can distribute a Shared Module that can provide HTML, JS, and other source to provide an API which can be updated independently of the extensions that depend on it. This can be useful for runtimes and game engines, where apps are often smaller payloads of data that run on the Shared Module’s code.
  • As a download optimization. The Shared Module contains common resources used by many extensions. It’s downloaded once, the first time a dependent extension is installed.

Incognito

Use the “incognito” manifest key with either “spanning” or “split” to specify how this extension will behave if allowed to run in incognito mode. Using “not_allowed” to prevent this extension from being enabled in incognito mode.

Key

This value can be used to control the unique ID of an extension, app, or theme when it is loaded during development.

Note: You don’t usually need to use this value. Instead, write your code so that the key value doesn’t matter by using relative paths and extension.getURL.

To get a suitable key value, first install your extension from a .crx file (you may need to upload your extension or package it manually). Then, in your user data directory, look in the fileDefault/Extensions/<extensionId>/<versionString>/manifest.json. You will see the key value filled in there.

Minimum Chrome Version

The version of Chrome that your extension, app, or theme requires, if any. The format for this string is the same as for the version field.

Nacl Modules

One or more mappings from MIME types to the Native Client module that handles each type. For example, the bold code in the following snippet registers a Native Client module as the content handler for the OpenOffice spreadsheet MIME type.

{
"name": "Native Client OpenOffice Spreadsheet Viewer",
"version": "0.1",
"description": "Open OpenOffice spreadsheets, right in your browser.",
"nacl_modules": [{
"path": "OpenOfficeViewer.nmf",
"mime_type": "application/vnd.oasis.opendocument.spreadsheet"
}]
}

The value of “path” is the location of a Native Client manifest (a .nmf file) within the extension directory. For more information on Native Client and .nmf files, see the Native Client Technical Overview.

Offline Enabled

Whether the app or extension is expected to work offline. When Chrome detects that it is offline, apps with this field set to true will be highlighted on the New Tab page.

As of Chrome 35, apps are assumed to be offline enabled and the default value of “offline_enabled” istrue unless “webview” permission is requested. In this case, network connectivity is assumed to be required and “offline_enabled” defaults to false.

Chrome.omnibox

Description:The omnibox API allows you to register a keyword with Google Chrome’s address bar, which is also known as the omnibox.

Chrome Optional Permissions

Description:Use the chrome.permissions API to request declared optional permissions at run time rather than install time, so users understand why the permissions are needed and grant only those that are necessary.

Options

To allow users to customize the behavior of your extension, you may wish to provide an options page. If you do, a link to it will be provided from the extensions management page at chrome://extensions. Clicking the Options link opens a new tab pointing at your options page.

Use the storage.sync API to persist these preferences. These values will then become accessible in any script within your extension, on all your user’s devices.

Declare Permissions

To use most chrome.* APIs, your extension or app must declare its intent in the “permissions” field of themanifest. Each permission can be either one of a list of known strings (such as “geolocation”) or a match pattern that gives access to one or more hosts. Permissions help to limit damage if your extension or app is compromised by malware. Some permissions are also displayed to users before installation, as detailed inPermission Warnings.

If an API requires you to declare a permission in the manifest, then its documentation tells you how to do so. For example, the Storage page shows you how to declare the “storage” permission.

Here’s an example of the permissions part of a manifest file:

"permissions": [
"tabs",
"bookmarks",
"http://www.blogger.com/",
"http://*.google.com/",
"unlimitedStorage"
],

NPAPI Plugins

Leveraging HTML and JavaScript makes developing new extensions really easy, but what if you have existing legacy or proprietary code that you want to reuse in your extension? You can bundle an NPAPI plugin with your extension, allowing you to call into native binary code from JavaScript.

Warning

NPAPI is being phased out. Consider using alternatives.

NPAPI is a really big hammer that should only be used when no other approach will work.

Requirements

Technologies required by the app or extension. Hosting sites such as the Chrome Web Store may use this list to dissuade users from installing apps or extensions that will not work on their computer. Supported requirements currently include “3D” and “plugins”; additional requirements checks may be added in the future.

Sandbox

Defines an collection of app or extension pages that are to be served in a sandboxed unique origin, and optionally a Content Security Policy to use with them.

Storage areas

Unlike the local and sync storage areas, the managed storage area requires its structure to be declared as JSON Schema and is strictly validated by Chrome. This schema must be stored in a file indicated by the “managed_schema”property of the “storage” manifest key and declares the enterprise policies supported by the extension.

Policies are analogous to options but are configured by a system administrator instead of the user, allowing the extension to be preconfigured for all users of an organization. See how Chrome handles policies for examples from Chrome itself.

After declaring the policies they can be read from the storage.managed API. It’s up to the extension to enforce the policies configured by the administrator

Chrome.ttsEngine

Description:Use the chrome.ttsEngine API to implement a text-to-speech(TTS) engine using an extension. If your extension registers using this API, it will receive events containing an utterance to be spoken and other parameters when any extension or Chrome App uses thetts API to generate speech. Your extension can then use any available web technology to synthesize and output the speech, and send events back to the calling function to report the status.

Autoupdating

We want extensions and apps to be autoupdated for some of the same reasons as Google Chrome itself: to incorporate bug and security fixes, add new features or performance enhancements, and improve user interfaces.

If you publish using the Chrome Developer Dashboard, you can ignore this page. You can use the dashboard to release updated versions to users, as well as to the Chrome Web Store.

If you want to host somewhere other than the store, keep reading. You should also readHosting and Packaging.

Manifest — Web Accessible Resources

An array of strings specifying the paths of packaged resources that are expected to be usable in the context of a web page. These paths are relative to the package root, and may contain wildcards. For example, an extension that injects a content script with the intention of building up some custom interface for example.com would whitelist any resources that interface requires (images, icons, stylesheets, scripts, etc.) as follows:

{
...
"web_accessible_resources": [
"images/*.png",
"style/double-rainbow.css",
"script/double-rainbow.js",
"script/main.js",
"templates/*"
],
...
}

These resources would then be available in a webpage via the URL chrome-extension://[PACKAGE ID]/[PATH], which can be generated with the extension.getURL method. Whitelisted resources are served with appropriate CORS headers, so they’re available via mechanisms like XHR.

--

--

Vidit Saxena

Always figuring things out at the intersection of Product Management, UX, Web Development and Startups. I write about it here and on viditsaxena.com