No history yet

Manifest File

The Extension's Blueprint

Every Chrome extension needs an instruction manual for the browser. This manual is a single file named manifest.json. Think of it as the extension's ID card and rulebook combined. It tells Chrome the extension's name, what it's allowed to do, and which files contain its logic.

Every Chrome extension starts with a crucial file called manifest.json.

The .json extension means the file is written in JavaScript Object Notation, a simple format for organizing data. At its core, a manifest file needs just a few key pieces of information to be valid.

{
  "manifest_version": 3,
  "name": "My Awesome Extension",
  "version": "1.0",
  "description": "A brief summary of what this extension does."
}

Let's break that down:

  • manifest_version: This tells Chrome which version of the manifest standard you're using. As of now, you should always use 3.
  • name: The name of your extension, which will appear in the Chrome Web Store and the browser's extension list.
  • version: The version of your extension. You'll increase this number (e.g., to 1.1 or 2.0) when you release updates.
  • description: A short, plain text summary of your extension’s purpose.

Permissions and Powers

By default, an extension can't do much. To interact with the browser or web pages, it needs to ask for specific permissions. This is a crucial security feature. It's just like how a mobile app asks for permission to access your camera or contacts. You should only request the permissions your extension absolutely needs to function.

The principle of least privilege is key: don't ask for access to everything, just what's necessary for your extension to do its job.

Permissions are declared in the manifest file using a permissions key. Its value is an array of strings, with each string representing a specific permission.

{
  ...
  "permissions": [
    "storage",
    "activeTab",
    "notifications"
  ]
  ...
}

For example, the storage permission lets an extension save data, while activeTab gives it temporary access to the currently active tab when the user interacts with the extension.

Adding the Brains

The manifest file doesn't contain the logic of your extension, but it points to the files that do. There are two main types of scripts you'll reference.

Background Scripts are the central hub of your extension. They run in the background, listening for browser events like a new tab opening or a bookmark being created. This script is loaded when the extension is installed and stays running (or is loaded when needed).

Content Scripts are JavaScript files that run in the context of a web page. They can read and manipulate the page's content, like changing its appearance or interacting with its elements. They are the extension's hands and eyes on the page itself.

You declare these scripts in the manifest. For a background script, you point to a service worker file. For content scripts, you specify which web pages they should be injected into.

{
  "manifest_version": 3,
  "name": "My Awesome Extension",
  "version": "1.0",
  "description": "A brief summary of what this extension does.",
  "permissions": [
    "storage",
    "activeTab"
  ],
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [
    {
      "matches": ["https://*.example.com/*"],
      "js": ["content.js"]
    }
  ]
}

In this example:

  • background: Tells Chrome that background.js is the service worker file for handling background tasks.
  • content_scripts: An array that tells Chrome to inject content.js into any page whose URL matches the pattern https://*.example.com/*.

With a well-structured manifest, you've laid the foundation for your entire extension. It's the central configuration that ties everything together.

Quiz Questions 1/5

What is the primary purpose of the manifest.json file in a Chrome extension?

Quiz Questions 2/5

A script that runs in the background to listen for browser events, like a new tab being created, is called a...

Now you understand the role and structure of the manifest file, the core of any Chrome extension.