In this article we are going to looking at declaring permissions for chrome extensions. Permissions are declared in the manifest.json file to give the extensions access to variety of extension’s APIs and features. There are four types of permissions that can be declared in the manifest.json; “permissions”, “optional_permissions”, “host_permissions” and “optional_permissions”.

Here is an example of how that would look like in the manifest.json

{
  "name": "Permissions Extension",
  ...
  "permissions": [
    "activeTab",
    "contextMenus",
    "storage"
  ],
  "optional_permissions": [
    "topSites",
  ],
  "host_permissions": [
    "https://www.developer.chrome.com/*"
  ],
  "optional_host_permissions":[
    "https://*/*",
    "http://*/*"
  ],
  ...
  "manifest_version": 3
}

You’ll notices that in the permissions and optional_permission are array of names whereas in host_permissions and optional_permissions contains an array of URL patterns.

1 Permissions

“Permissions” allow the extension to use extra Chrome API features. You can see a comprehensive list of features that you can add to your extension here. In our previous article, on how chrome extensions communicate, we added a permission for tabs to use the chrome.tabs.query and chrome.tabs.sendMessage functions. If we did not declare the tabs permission chrome.tabs would return undefined, errored out and probably crashed our extension.

Permissions are a way of also informing the end-user the chrome features the extension needs to have access to. Some Chrome API have access to sensitive data for instance cookies, downloads or bookmarks.

When adding permissions to your chrome extension project be aware that NOT all Chrome API features listed in the reference guide are for chrome extension. Other Chrome API features are from Chrome OS, an entirely different platform.

Also keep in mind that some Chrome API features require a minimum chrome version.

To ensure that your chrome extension is only installed when on chrome browsers is on certain version or greater, you can add the following field minimum_chrome_version in your manifest.json file.

{
  ...
  "manifest_version": 3,
  "minimum_chrome_version": "79",
  ...
}

Note: Please keep in mind that a lot of the Chrome.API functions can not be used in the content scripts. Very few Chrome.API like chrome.storage and chrome.runtime can be used in content scripts. Background scripts is

2 Optional Permissions

Similar to normal permissions expect that the end user can select whether or not the extension can use that particular Chrome API.

{
  ...
  "optional_permissions": [
    "activeTab",
    "contextMenus",
    "storage"
  ],
  ...
}

3 Host Permissions

Host permissions enable the extensions to interact with the URL’s matching patterns. Some Chrome APIs require host permissions in addition to their own API permissions, which are documented on each reference page. For instance:

• Make fetch() requests from the extension service worker and extension pages.
• Read and query the sensitive tab properties (url, title, and favIconUrl) using the chrome.tabs API.
• Inject a content script programmatically.
• Monitor and control the network requests with the chrome.webRequest API.
• Access cookies with the chrome.cookies API.

Sample Extension using Permissions

As an exercise we are going to be creating a simple chrome extension that uses the tabs, action and notifications permissions. The user will click the extension icon on the toolbar which trigger it retrieve the current tab’s title and display a notification. For this extension we only need 3 files; a background script, background.js, logo.png the manifest.json.

manifest.json

You’ll notice that theaction permission is NOT in the permissions array but declared as its own object. It is not always the case but some permissions like the action are declared as their own objects in the manifest.json file. You’ll have to look at the Chrome.API reference to know which ones are declared in such a manner. Just keep that in mind.

{
    "name": "Tab Checker",
    "version": "1.0.0.0",
    "description": "Tab Checker",
    "manifest_version": 3,
    "permissions": [
        "tabs",
        "notifications"
    ],
    "action": {
        "default_title": "Tab Checker",
        "default_icon": {
            "16": "logo.png",
            "24": "logo.png",
            "32": "logo.png"
        }
    },
    "background": {
        "service_worker": "background.js"
    }
}

background.js

chrome.action.onClicked.addListener((tab) => {
    // Log Tag Info
    console.log(tab)

    // Get Tab Info
    // You'll need the tabs permission to get name, icon, url
    // If not it just return generic tab information.
    // const tabIcon = tab.favIconUrl;
    // const url = tab.url
    const title = tab.title;

    const anyId = new Date().getTime().toString();
    const notificationoptions = {
        title: title,
        iconUrl: "logo.png",
        message: "This is your active tab",
        type: "basic"
    }
    // show notification
    chrome.notifications.create(anyId, notificationoptions)

});

The source code for this project can be found on this repository

Chrome Extension

Permission