manifest.json in Gmail Custom Extension

Exploring the Power of manifest.json in Gmail Custom Extension

Welcome to the introduction of the Gmail Custom Extension! Today, we’re diving into the nuts and bolts of how your extension starts with a special file called manifest.json. This file is like the architect’s blueprint, laying down the rules for how your extension behaves and looks.

We’ll break down the technical jargon, focusing on things like icons that catch your eye, scripts that make things happen in the background, and permissions that keep everything secure. Think of it as getting a backstage pass to see how your extension transforms the way users experience Gmail in their browsers.

Get ready for a journey into the heart of extension development, made easy and exciting!

manifest.json

{
    "name": "Gmail Custom Extension",
    "version": "0.0.1",
    "manifest_version": 3,
    "description": ".....",
    "key":"",
    "icons": {
        "16": "images/obj-16x16.png",
        "128": "images/obj-128x128.png"
    },
    "action": {
      "default_popup": "popup.html",
      "default_icon": {
        "16": "/images/obj-16x16.png",
        "32": "/images/obj-32x32.png",
        "48": "/images/obj-48x48.png",
        "128": "/images/obj-128x128.png"
      }
    },
    "permissions": [
    "identity",
    "activeTab", 
    "scripting"
    ],
    "background": {
      "service_worker": "scripts/background.js"
    },
    "host_permissions": [
      "*://mail.google.com/*", "https://accounts.google.com/"
    ],
    "content_scripts": [
        {
          "matches": ["*://mail.google.com/*"],
          "js": [
            "scripts/persist.js"
          ]
        }
    ]
    ,
    "default_locale": "en",
     "oauth2": {
      "client_id": "72968375588-sj7tnt4ov09e3c277g5tmcj6pnjcfc7m.apps.googleusercontent.com",
      "scopes":["https://www.googleapis.com/auth/contacts.readonly"]
    }
    
  }

Let’s break down the important features in this manifest.json file for your blog:

Name and Version

These define the name and version of your extension. It’s essential for identifying and managing different versions of your extension.

"name": "Gmail Sentiments Extension"
"version": "0.0.1"

Manifest version

It indicates which version of the manifest file format your extension uses. In this case, it’s version 3.

"manifest_version": 3

Description

A brief description of what your extension does. It helps users understand the purpose of your extension.

"description": "This extension shows Sentiments, Sentiments scores and actions."

Key

This is a public key for your extension. It’s used for extension updates and ensuring the integrity of your extension.

"key": "-----BEGIN PUBLIC KEY-----...-----END PUBLIC KEY-----"v

Icons

Specifies the icons used for your extension at different sizes. Icons are important for visual identification of your extension.

"icons": {...}

Action

This section specifies the default behavior of your extension when it’s clicked on or interacts with the browser toolbar.

• "default_popup" specifies the HTML file that will be used as the default popup when the user clicks on your extension's icon in the toolbar. In this case, it's set to "popup.html."

"default_popup": "popup.html"

• The popup.html file likely contains the UI elements and content that will be displayed in a small popup window when the extension icon is clicked.
• "default_icon" defines the default icons displayed in the browser toolbar to visually represent your extension at different sizes. The different sizes specified (16x16, 32x32, 48x48, 128x128) cater to various toolbar icon display sizes in different browsers.

"default_icon": {…}

• Icon Images: The icon images are located in the “/images/” directory of your extension and include different sizes for a consistent appearance across browsers. For example, the 16x16 icon (/images/obj-16x16.png) is used for smaller toolbar displays, while the 128x128 icon (/images/obj-128x128.png) is used for larger displays.

Permissions

Lists the permissions your extension requires as mentioned follows

• “identity”: This permission allows your extension to access user identity information, such as authentication tokens. This can be crucial for extensions that require user-specific data or interactions.
• “activeTab”: The “activeTab” permission grants your extension access to the currently active tab in the browser. This is useful when your extension needs to interact with or manipulate the content of the currently open tab. It’s a powerful permission and should be used judiciously to respect user privacy and security.
• “scripting”: The “scripting” permission is introduced in manifest version 3. It enables your extension to inject scripts into web pages to interact with and modify the content of web pages dynamically. However, it’s important to note that this permission requires explicit user consent.

Background

The “background” section in your manifest.json file defines a background service worker named “background.js” in the “scripts” directory. This service worker operates independently in the background, allowing your extension to execute tasks without direct user interaction.

Example Use Cases:

• Listening for Events: The background script can listen for events triggered by the extension, browser, or web pages. For example, it can respond to extension lifecycle events, such as installation or updates.
• Handling Asynchronous Tasks: If your extension needs to perform tasks that take time, such as fetching data from a server, the background script can handle these asynchronously without affecting the user’s browsing experience.
• Maintaining State: The background script can maintain a persistent state or cache data, ensuring that your extension has access to relevant information even when the user is not actively using it.
• Communication Between Components: It serves as a communication hub between different components of your extension, allowing content scripts, popups, and other parts of the extension to exchange information.
• Service Worker Architecture: Service workers are a part of modern web technologies and provide a way to run scripts in the background independently of web pages. They have their own lifecycle and can continue running even if the extension’s popup or content scripts are not actively running.

"background": {...}

Host Permissions

Lists the URLs that your extension is allowed to access. In this case, it has access to Gmail and Google accounts

"host_permissions": [...]

• The “content_scripts” section in your manifest.json file allows you to inject scripts into web pages matching specified URL patterns, such as “://mail.google.com/”. This specific content script, located at “scripts/persist.js,” operates on any Gmail page, interacting with the DOM to dynamically enhance or modify webpage functionality.

Example Use Case:

• Content scripts interact with Gmail DOM elements, modifying appearance or displaying information based on conditions. They communicate with the background script, facilitating coordination and data exchange. The default locale specifies the language if the user’s preferred translation is unavailable.

"default_locale": "en"

OAuth2

OAuth2 in your extension is crucial for secure authentication, accessing user data from Google APIs. It involves configuration parameters, such as the “client_id,” a unique identifier assigned during registration on Google Cloud Console. The “scopes” specify permissions; for example, read-only access to Google Contacts.

• In your Gmail Custom Extension, OAuth2 likely authenticates and authorizes access to the user’s Google Contacts data. During installation, users undergo an authentication flow, signing in and granting permissions. The “client_id” aids Google in identifying your extension.
• Security-wise, OAuth2 ensures secure, standardized access to user data without exposing credentials. Best practice involves requesting minimum necessary permissions, respecting user privacy.

In summary, the manifest.json file is the backbone of your Google extension, defining its identity, behavior, and security features. From visual elements like icons to dynamic functionalities enabled by background and content scripts, every detail contributes to a seamless user experience. OAuth2 integration ensures secure access to user data. Together, these components showcase the thoughtful design and functionality of your extension.