DEV Community

Cover image for Guardium- Password Protector (Day-2)
DebmalyaDas-007
DebmalyaDas-007

Posted on

Guardium- Password Protector (Day-2)

#webdev #javascript #programming #tutorial

Manifest.json (chrome extension)

The manifest.json file is the backbone of a Chrome extension, acting as the primary metadata and configuration file that Chrome reads before loading or running the extension. It defines the extension’s identity—including its name, version, description, author, and icons—and clearly specifies how the extension behaves inside the browser. Through the manifest, developers declare permissions that control what browser APIs and websites the extension can access, ensuring security and user transparency. It also links all major components of the extension such as background service workers, content scripts, popups, options pages, and web-accessible resources, allowing Chrome to know when and where each part should execute. In Manifest Version 3 (MV3), manifest.json plays an even more critical role by enforcing modern security practices like non-persistent background execution, stricter permission handling, and improved performance, making it essential for building safe, efficient, and maintainable Chrome extensions.

Manifest.json (chrome extension) 

{
  "manifest_version": 3,
  "name": "Guardium",
  "short_name": "Guardium",
  "description": "A secure browser-based password manager with autofill support",
  "version": "1.0.0",

  "action": {
    "default_title": "Open Guardium",
    "default_popup": "index.html"
  },

  "icons": {
    "16": "assets/icons/icon16.png",
    "32": "assets/icons/icon32.png",
    "48": "assets/icons/icon48.png",
    "128": "assets/icons/icon128.png"
  },

  "background": {
    "service_worker": "background.js",
    "type": "module"
  },

  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["contentScript.js"],
      "run_at": "document_end",
      "all_frames": true
    }
  ],

  "permissions": [
    "activeTab",
    "tabs",
    "storage",
    "scripting",
    "alarms",
    "notifications"
  ],

  "host_permissions": [
    "<all_urls>"
  ],

  "web_accessible_resources": [
    {
      "resources": [
        "assets/icons/*",
        "injected/*.js"
      ],
      "matches": ["<all_urls>"]
    }
  ],

  "options_page": "options.html",

  "commands": {
    "open-guardium": {
      "suggested_key": {
        "default": "Ctrl+Shift+G",
        "mac": "Command+Shift+G"
      },
      "description": "Open Guardium popup"
    }
  },

  "minimum_chrome_version": "114"
}
Enter fullscreen mode Exit fullscreen mode

Explanation of every line(manifest.json):- 

 "manifest_version": 3,
Enter fullscreen mode Exit fullscreen mode

🔹 Manifest Version

Specifies Manifest V3, the latest Chrome extension standard.

Enforces:

Better security

Service workers instead of background pages

Stricter permission control

  "name": "Guardium",
Enter fullscreen mode Exit fullscreen mode

🔹 Extension Name

The full name displayed:

In Chrome Extensions page

In Chrome Web Store

Under the toolbar icon

"short_name": "Guardium",
Enter fullscreen mode Exit fullscreen mode

🔹 Short Name

Used where space is limited (e.g., toolbar labels).

Optional but recommended for UI consistency.

  "description": "A secure browser-based password manager with autofill support",
Enter fullscreen mode Exit fullscreen mode

🔹 Description

Brief summary of the extension’s purpose.

Visible in the Chrome Web Store and Extensions page.


  "version": "1.0.0",
Enter fullscreen mode Exit fullscreen mode

Version Number

Used by Chrome to manage updates.

Must follow semantic versioning format (major.minor.patch).
Toolbar Action (Popup UI)
"action": {

🔹 Defines behavior of the extension icon in the toolbar.

"default_title": "Open Guardium",
Enter fullscreen mode Exit fullscreen mode

🔹 Tooltip text shown when the user hovers over the extension icon.


    "default_popup": "index.html"
Enter fullscreen mode Exit fullscreen mode

🔹 HTML file opened when the extension icon is clicked.
👉 This is your password manager UI (often a React build output).

🎨 Icons

"icons": {
Enter fullscreen mode Exit fullscreen mode

🔹 Declares extension icons in different sizes.

  "16": "assets/icons/icon16.png",
Enter fullscreen mode Exit fullscreen mode

🔹 Used in:

Toolbar

Context menus


    "32": "assets/icons/icon32.png",
Enter fullscreen mode Exit fullscreen mode

🔹 Used on high-DPI displays and system UI.

"48": "assets/icons/icon48.png",
Enter fullscreen mode Exit fullscreen mode

🔹 Used on the Chrome Extensions page.


    "128": "assets/icons/icon128.png"
Enter fullscreen mode Exit fullscreen mode

🔹 Used in the Chrome Web Store listing.

⚙ Background Service Worker

"background": {
Enter fullscreen mode Exit fullscreen mode

🔹 Defines background logic of the extension.


    "service_worker": "background.js",
Enter fullscreen mode Exit fullscreen mode

🔹 JavaScript file that:

Handles events

Listens for messages

Manages alarms, auth, encryption, etc.

⚠️ Runs only when needed (not persistent).

 "type": "module"
Enter fullscreen mode Exit fullscreen mode

🔹 Enables ES modules:

Allows import / export

Cleaner and scalable architecture

🌐 Content Scripts

 "content_scripts": [
Enter fullscreen mode Exit fullscreen mode

🔹 Declares scripts injected into web pages.


      "matches": ["<all_urls>"],
Enter fullscreen mode Exit fullscreen mode

🔹 Injects script on all websites.

Required for password managers (login form detection).

  "js": ["contentScript.js"],
Enter fullscreen mode Exit fullscreen mode

🔹 JavaScript file injected into matching pages.

 "run_at": "document_end",
Enter fullscreen mode Exit fullscreen mode

🔹 Script runs after DOM is loaded.

Ensures forms and inputs exist.

  "all_frames": true
Enter fullscreen mode Exit fullscreen mode

🔹 Script runs inside:

Main page

All iframes (important for embedded login forms)

🔐 Permissions

 "permissions": [
Enter fullscreen mode Exit fullscreen mode

🔹 Declares Chrome APIs the extension can use.

  "activeTab",
Enter fullscreen mode Exit fullscreen mode

🔹 Temporary access to the currently active tab.

   "tabs",
Enter fullscreen mode Exit fullscreen mode

🔹 Allows reading tab metadata (URL, ID, title).

 "storage",
Enter fullscreen mode Exit fullscreen mode

🔹 Enables chrome.storage for saving encrypted passwords.

 "scripting",
Enter fullscreen mode Exit fullscreen mode

🔹 Allows dynamic script injection (MV3 requirement).

 "alarms",
Enter fullscreen mode Exit fullscreen mode

🔹 Enables scheduled background tasks.

  "notifications"
Enter fullscreen mode Exit fullscreen mode

🔹 Allows user notifications (e.g., password saved).

🌍 Host Permissions

"host_permissions": [
Enter fullscreen mode Exit fullscreen mode

🔹 Specifies which websites the extension can access.

"<all_urls>"
Enter fullscreen mode Exit fullscreen mode

🔹 Allows interaction with all websites.

Required for autofill extensions.

📦 Web Accessible Resources

"web_accessible_resources": [
Enter fullscreen mode Exit fullscreen mode

🔹 Allows web pages or content scripts to access extension files.

  "resources": [
        "assets/icons/*",
        "injected/*.js"
      ],
Enter fullscreen mode Exit fullscreen mode

🔹 Files that can be accessed externally.

    "matches": ["<all_urls>"]
Enter fullscreen mode Exit fullscreen mode

🔹 Websites allowed to access these resources.

⚙ Options Page


  "options_page": "options.html",
Enter fullscreen mode Exit fullscreen mode

🔹 Settings page for the extension.

Used for:

Preferences

Security settings

Sync options

⌨ Keyboard Commands

"commands": {
Enter fullscreen mode Exit fullscreen mode

🔹 Defines keyboard shortcuts.

 "open-guardium": {
Enter fullscreen mode Exit fullscreen mode

🔹 Unique command identifier.

"suggested_key": {
Enter fullscreen mode Exit fullscreen mode

🔹 Platform-specific shortcuts.

 "default": "Ctrl+Shift+G",
        "mac": "Command+Shift+G"
Enter fullscreen mode Exit fullscreen mode

🔹 Shortcut keys for Windows/Linux and macOS.

"description": "Open Guardium popup"
Enter fullscreen mode Exit fullscreen mode

🔹 Description shown in Chrome shortcut settings.

🔎 Chrome Version Requirement

 "minimum_chrome_version": "114"
Enter fullscreen mode Exit fullscreen mode

🔹 Ensures compatibility with required MV3 APIs.

✅ Final Summary

This manifest.json:

Fully complies with Manifest V3

Supports password management + autofill

Is Chrome Web Store ready

Covers UI, background, content scripts, permissions, security

Chrome Extension working

A Chrome extension works by dividing responsibilities across multiple isolated components, all coordinated through the manifest.json file. When Chrome starts, it reads the manifest to understand the extension’s permissions, UI, background logic, and content scripts. The popup UI runs when the user clicks the extension icon and handles only user interaction and display. The background service worker acts as the brain of the extension, responding to events, managing logic, storage, and secure operations, but it runs only when needed. Content scripts are injected into web pages to interact with the page’s DOM, such as detecting forms or autofilling data, while remaining isolated from the page for security. These components communicate through message passing, ensuring a secure, event-driven flow where the extension can interact with web pages without directly exposing sensitive logic or data.


This diagram shows how different parts of a Chrome extension interact inside and outside the browser. Inside Chrome, the extension is split into UI components (toolbar popup, options page, notifications), content scripts, and a background service worker. The popup and options pages handle user interaction using HTML, CSS, and JavaScript, but they cannot directly access web pages. Content scripts run inside web pages and interact with the page’s DOM, while remaining isolated for security. The background service worker acts as the central controller: it handles logic, storage, alarms, notifications, and communication. All these parts communicate using message passing (runtime.message). The background can also access Chrome data and APIs (storage, cookies, history, bookmarks) and can communicate with external APIs outside Chrome. Overall, the diagram highlights the separation of concerns, security isolation, and message-based communication that make Chrome extensions safe and efficient.

Chrome Developer guide

This screen is the Chrome Extensions page in Developer Mode. It allows developers to load unpacked extensions directly from a local folder, package extensions for distribution, and manually update or reload extensions during development. The search bar helps find installed extensions quickly, while the Developer mode toggle enables debugging and testing features needed when building and experimenting with Chrome extensions.

Windows.Etherium

chrome.ethereum (commonly accessed as window.ethereum) is a JavaScript object injected into the browser by Ethereum wallet extensions like MetaMask. It acts as a bridge between web applications (DApps) and the Ethereum blockchain. Through this object, a website can request access to the user’s wallet, read the connected account, get the current network, and ask the user to sign messages or approve transactions—all without exposing private keys. The actual signing and transaction handling are emphasized to be done securely inside the wallet extension, while window.ethereum only enables communication. In short, it allows Chrome-based DApps to safely interact with Ethereum via the user’s wallet.

Top comments (0)