DEV Community: DebmalyaDas-007

Guardium- Password Protector (Day-2)

DebmalyaDas-007 — Fri, 19 Dec 2025 16:41:38 +0000

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

Explanation of every line(manifest.json):-

 "manifest_version": 3,

🔹 Manifest Version

Specifies Manifest V3, the latest Chrome extension standard.

Enforces:

Better security

Service workers instead of background pages

Stricter permission control

  "name": "Guardium",

🔹 Extension Name

The full name displayed:

In Chrome Extensions page

In Chrome Web Store

Under the toolbar icon

"short_name": "Guardium",

🔹 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",

🔹 Description

Brief summary of the extension’s purpose.

Visible in the Chrome Web Store and Extensions page.


  "version": "1.0.0",

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

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


    "default_popup": "index.html"

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

🎨 Icons

"icons": {

🔹 Declares extension icons in different sizes.

  "16": "assets/icons/icon16.png",

🔹 Used in:

Toolbar

Context menus


    "32": "assets/icons/icon32.png",

🔹 Used on high-DPI displays and system UI.

"48": "assets/icons/icon48.png",

🔹 Used on the Chrome Extensions page.


    "128": "assets/icons/icon128.png"

🔹 Used in the Chrome Web Store listing.

⚙ Background Service Worker

"background": {

🔹 Defines background logic of the extension.


    "service_worker": "background.js",

🔹 JavaScript file that:

Handles events

Listens for messages

Manages alarms, auth, encryption, etc.

⚠️ Runs only when needed (not persistent).

 "type": "module"

🔹 Enables ES modules:

Allows import / export

Cleaner and scalable architecture

🌐 Content Scripts

 "content_scripts": [

🔹 Declares scripts injected into web pages.


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

🔹 Injects script on all websites.

Required for password managers (login form detection).

  "js": ["contentScript.js"],

🔹 JavaScript file injected into matching pages.

 "run_at": "document_end",

🔹 Script runs after DOM is loaded.

Ensures forms and inputs exist.

  "all_frames": true

🔹 Script runs inside:

Main page

All iframes (important for embedded login forms)

🔐 Permissions

 "permissions": [

🔹 Declares Chrome APIs the extension can use.

  "activeTab",

🔹 Temporary access to the currently active tab.

   "tabs",

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

 "storage",

🔹 Enables chrome.storage for saving encrypted passwords.

 "scripting",

🔹 Allows dynamic script injection (MV3 requirement).

 "alarms",

🔹 Enables scheduled background tasks.

  "notifications"

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

🌍 Host Permissions

"host_permissions": [

🔹 Specifies which websites the extension can access.

"<all_urls>"

🔹 Allows interaction with all websites.

Required for autofill extensions.

📦 Web Accessible Resources

"web_accessible_resources": [

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

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

🔹 Files that can be accessed externally.

    "matches": ["<all_urls>"]

🔹 Websites allowed to access these resources.

⚙ Options Page


  "options_page": "options.html",

🔹 Settings page for the extension.

Used for:

Preferences

Security settings

Sync options

⌨ Keyboard Commands

"commands": {

🔹 Defines keyboard shortcuts.

 "open-guardium": {

🔹 Unique command identifier.

"suggested_key": {

🔹 Platform-specific shortcuts.

 "default": "Ctrl+Shift+G",
        "mac": "Command+Shift+G"

🔹 Shortcut keys for Windows/Linux and macOS.

"description": "Open Guardium popup"

🔹 Description shown in Chrome shortcut settings.

🔎 Chrome Version Requirement

 "minimum_chrome_version": "114"

🔹 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.

Guardium - Password Protector (Day -1)

DebmalyaDas-007 — Thu, 18 Dec 2025 19:39:38 +0000

Blockchain

Blockchain is a digital record book, also called a ledger, that is shared across many computers instead of being stored in one central place. Because everyone in the network holds a copy of the same data, no single authority like a bank or company controls it. Once information is written to the blockchain, it cannot be easily changed, which makes the system reliable and transparent. This shared ownership of data is what makes blockchain fundamentally different from traditional databases.

Why is it Called a “Block-Chain”?

The name blockchain comes from the way data is structured. Information is stored inside blocks, and these blocks are linked together in a sequential order, forming a chain. Each block contains some data, a unique cryptographic hash that identifies the block, and the hash of the previous block. Because every block depends on the previous one, altering a single block would break the entire chain. This linking mechanism is what makes blockchain tamper-resistant.

Where is Blockchain Used?

Blockchain technology is widely used in cryptocurrencies like Bitcoin and Ethereum, but its applications go far beyond digital money. It is used in digital payments, smart contracts, supply chain tracking, voting systems, and digital identity solutions. Any system that requires trust, transparency, and data integrity can benefit from blockchain.

What is a Smart Contract?

A smart contract is a computer program that lives on a blockchain and executes automatically when predefined conditions are met. Unlike traditional contracts that require intermediaries such as lawyers or banks, smart contracts enforce rules directly through code. Once deployed, the contract runs exactly as programmed and cannot be altered. In simple terms, if the conditions written in the code are satisfied, the contract executes itself without human intervention.

How Smart Contracts Work

The process begins with writing the contract rules in code. This code is then deployed to a blockchain such as Ethereum. When someone interacts with the contract, for example by sending a transaction, the contract checks whether the required conditions are met. If they are, the contract automatically executes the specified actions. Because the contract runs on the blockchain, its execution is transparent, deterministic, and irreversible.

Where Smart Contracts Are Used

Smart contracts are used in decentralized finance applications, NFT marketplaces, voting systems, insurance claim automation, and supply chain management. In this project, smart contracts are written using the Solidity programming language.

Introduction to Solidity

Solidity is a statically typed programming language designed specifically for writing smart contracts on Ethereum. It has a syntax similar to JavaScript and C++, making it easier for developers from traditional programming backgrounds to learn.

Basic Solidity Structure

Every Solidity contract starts with a license identifier and a compiler version declaration. The license provides legal clarity, while the version ensures the contract is compiled using a compatible Solidity compiler. The contract keyword is then used to define the smart contract, which is conceptually similar to a class in object-oriented programming.

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.20;


contract ProfileRegistry {


   struct Profile {
       bytes32 nameHash;
       int32 luckyNumber;
   }


   mapping(address => Profile) private profiles;


   event ProfileUpdated(
       address indexed user,
       bytes32 nameHash,
       int32 luckyNumber,
       uint256 timestamp
   );


   function updateProfile(
       bytes32 _nameHash,
       int32 _luckyNumber
   ) external {
       require(_nameHash != bytes32(0), "Invalid name hash");


       profiles[msg.sender] = Profile(
           _nameHash,
           _luckyNumber
       );


       emit ProfileUpdated(
           msg.sender,
           _nameHash,
           _luckyNumber,
           block.timestamp
       );
   }


   function getProfile(address user)
       external
       view
       returns (bytes32, int32)
   {
       Profile memory p = profiles[user];
       return (p.nameHash, p.luckyNumber);
   }


   function verifyName(
       address user,
       string calldata name
   ) external view returns (bool) {
       return profiles[user].nameHash == keccak256(abi.encodePacked(name));
   }


   function add(int256 a, int256 b)
       external
       pure
       returns (int256)
   {
       return a + b;
   }
}

ProfileRegistry Smart Contract Walkthrough

// SPDX-License-Identifier: MIT

SPDX License Identifier

Declares the license of the contract
Required by Solidity compilers to avoid warnings
MIT means open-source and permissive

Solidity Compiler Version

pragma solidity ^0.8.20;

Tells the compiler:
Use Solidity version 0.8.20 or higher
But not 0.9.0 or above
Solidity 0.8+ has:
Built-in overflow checks
Safer arithmetic

Contract Declaration


contract ProfileRegistry {

Starts a smart contract
Think of it as a class in OOP
Everything inside belongs to this contract

Struct Definition

struct Profile {
    bytes32 nameHash;
    int32 luckyNumber;
}

What is a struct?
A custom data type
Groups related data together
Fields explained:
bytes32 nameHash
Fixed-size 32-byte value
Stores keccak256(name)
Privacy-friendly: actual name is not stored
int32 luckyNumber
Signed 32-bit integer
Range: -2^31 to 2^31 - 1
👉 One Profile = one user's data

Mapping Declaration

mapping(address => Profile) private profiles;

Meaning:
Maps a wallet address to a Profile struct
Breakdown:
address → user’s wallet address
Profile → their stored profile
private:
Cannot be accessed directly outside the contract
Still visible on blockchain, but not via Solidity getter
Think of it like:
profiles[0xABC...] = { nameHash, luckyNumber }

Event Declaration


event ProfileUpdated(
    address indexed user,
    bytes32 nameHash,
    int32 luckyNumber,
    uint256 timestamp
);

What is an event?
Used for logging
Stored in transaction logs, not contract storage
Cheap to read from frontend
Parameters:
address indexed user
indexed allows fast filtering (very important for UIs)
bytes32 nameHash
int32 luckyNumber
uint256 timestamp
Block timestamp when update occurred
👉 Frontend apps listen to this event

updateProfile Function (State-changing)

function updateProfile(
    bytes32 _nameHash,
    int32 _luckyNumber
) external {

Function type:
external
Can be called from outside the contract
Cheaper than public for calldata inputs
Parameters:
_nameHash → keccak256 hash of name
_luckyNumber → user's chosen number

7.1 Input Validation

require(_nameHash != bytes32(0), "Invalid name hash");

Prevents empty hash
bytes32(0) = all zeros
If condition fails:
Transaction reverts
Gas is refunded (except base cost)
Error message shown

7.2 Storing Profile Data

profiles[msg.sender] = Profile(
    _nameHash,
    _luckyNumber
);

Key concepts:
msg.sender = wallet calling the function
Creates a new Profile struct
Stores it in the mapping
Equivalent to:


profiles[msg.sender].nameHash = _nameHash;
profiles[msg.sender].luckyNumber = _luckyNumber;

7.3 Emitting Event

emit ProfileUpdated(
    msg.sender,
    _nameHash,
    _luckyNumber,
    block.timestamp
);

Emits the event to blockchain logs
block.timestamp
Current block time (in seconds since Unix epoch)
👉 Used by frontends / indexers (like The Graph)

getProfile Function (Read-only)

emit ProfileUpdated(
    msg.sender,
    _nameHash,
    _luckyNumber,
    block.timestamp
);

Modifiers:
view
Reads blockchain state
Does not cost gas when called locally

Function Body
Profile memory p = profiles[user];
Fetches the profile from storage
Copies it into memory (temporary)
return (p.nameHash, p.luckyNumber);
Returns both values as a tuple

verifyName Function (Hash Verification)

function verifyName(
    address user,
    string calldata name
) external view returns (bool) {

Why calldata?
Read-only input
Cheaper gas
Best for function parameters

Hash Comparison

return profiles[user].nameHash == keccak256(abi.encodePacked(name));

Step-by-step:
abi.encodePacked(name)
Converts string into bytes
keccak256(...)
Produces a bytes32 hash
Compare with stored hash
✅ Returns true if names match
❌ false otherwise

add Function (Pure Function)

Modifiers:
pure
Uses no blockchain data
No state access
No gas when called locally

Logic
return a + b;

Simple integer addition
Solidity 0.8+ automatically checks overflow

🔑 Summary of Concepts Used

Concept
Where
Struct
Profile
Mapping
address => Profile
Event
ProfileUpdated
State change
updateProfile
Read-only
getProfile, verifyName
Hashing
keccak256
Privacy
Store hash instead of name
Pure function
add()

Solidity Function Types Explained

In Solidity, functions can be categorized based on how they interact with blockchain data. Pure functions do not read or modify any blockchain state and behave like calculators. View functions can read blockchain data but cannot modify it, making them ideal for data retrieval. Normal functions can modify the blockchain state, emit events, and write to storage, which means they always cost gas when executed in a transaction.
A simple way to remember this is: pure functions calculate, view functions read, and normal functions write.

What is Ganache?

Ganache is a local Ethereum blockchain simulator used for development and testing. It allows developers to deploy contracts, send transactions, test gas usage, and debug applications without spending real Ether. Ganache provides instant block mining, free test Ether, and complete control over the blockchain environment, making it ideal for learning and experimentation.
Ganache Installation:-

npm install -g ganache

Check Version:-

ganache --version

Run:-

ganache

Default:-

RPC: http://127.0.0.1:8545
Chain ID: 1337

What is Truffle?

Truffle is a development framework that simplifies the process of building Ethereum smart contracts. It provides a structured project setup, Solidity compilation, deployment scripts called migrations, testing utilities, and network management. Truffle removes the need to manually handle low-level details like ABI generation and contract deployment.
Installation:-

npm install -g truffle

Check version:-

truffle --version

Initiate Truffle:-

truffle init

This generates your first project Directory.
Deploy Contract:-

truffle migrate

Verify Deployment:-

truffle console

Truffle config.js:-

module.exports = {
  networks: {
    development: {
      host: "127.0.0.1",
      port: 7545, // or 8545
      network_id: "*"
    }
  },
  compilers: {
    solc: {
      version: "0.8.20"
    }
  }
};

Truffle Nomenclature for migration/ folder:-

What is MetaMask?

MetaMask is a browser-based crypto wallet that acts as a bridge between users and decentralized applications. It allows users to manage private keys, store Ether and tokens, and sign blockchain transactions securely. MetaMask injects a Web3 provider into the browser, enabling frontend applications to communicate directly with the blockchain and identify users.

Prerequisites:-

JavaScript Basics
https://www.w3schools.com/js/

Chrome Extension Development (Intro)
https://developer.chrome.com/docs/extensions/

Basic Cryptography Concepts
https://www.cloudflare.com/learning/ssl/what-is-encryption/

Blockchain Basics
https://ethereum.org/en/developers/docs/intro-to-ethereum/

GitHub Repo:-
https://github.com/yuvraj1235/TDOC_Guardium_tutorial