Guardium- Password Protector (Day-2)

Source: Dev.to

Overview

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.

Example manifest.json

{
  "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": [""],
      "js": ["contentScript.js"],
      "run_at": "document_end",
      "all_frames": true
    }
  ],

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

  "host_permissions": [
    ""
  ],

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

  "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"
}

Explanation of Every Line

Cleaned‑up Manifest Overview

Below is a tidy, ready‑to‑copy version of the manifest.json fragments you provided. All headings, code blocks, and explanatory notes are kept, while the repetitive placeholders have been removed.

1️⃣ Content Scripts

{
  "js": ["contentScript.js"],
  "run_at": "document_end",
  "all_frames": true
}

• js – JavaScript file injected into matching pages.
• run_at – Script runs after the DOM is loaded, ensuring forms and inputs exist.
• all_frames – Runs in the main page and all iframes (important for embedded login forms).

2️⃣ Permissions

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

3️⃣ Host Permissions

[
  ""
]

• Specifies which websites the extension can access.
• "" gives the extension permission to interact with any site – required for autofill extensions.

4️⃣ Web‑Accessible Resources

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

• Allows web pages or content scripts to load files packaged with the extension.
• resources – Files that can be accessed externally.
• matches – Websites that are allowed to request those resources.

5️⃣ Options Page

"options_page": "options.html"

• Settings page for the extension.
• Used for preferences, security settings, and sync options.

6️⃣ Keyboard Commands

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

• Defines a shortcut that opens the Guardium popup.
• Platform‑specific keys (default for Windows/Linux, mac for macOS).

7️⃣ Chrome Version Requirement

"minimum_chrome_version": "114"

• Guarantees compatibility with the MV3 APIs used by the extension.

✅ Final Summary

• Fully MV3‑compliant manifest.json.
• Supports password management + autofill.
• Ready for Chrome Web Store submission.
• Covers UI, background, content scripts, permissions, and security.

📦 Chrome Extension Working – Overview

A Chrome extension is split into isolated components that communicate via message passing:

All of these pieces are declared in the manifest.json, which Chrome reads at startup to know what permissions are required, which UI elements to show, and which scripts to inject.

📊 Architecture Diagram

The diagram illustrates how the UI components, content scripts, and background service worker interact both inside Chrome (extension sandbox) and outside (the web pages).

Feel free to copy the JSON snippets directly into your manifest.json file, adjust any paths or keys to match your project structure, and you’ll have a clean, production‑ready manifest for your Guardium password‑manager extension.

**Chrome Extension Architecture Overview**

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.