NetShield

A classy, modern, and minimal productivity firewall Chrome extension that intercepts distracting web domains at the network layer and enforces focus.

NetShield exists because standard website blockers are too easy to bypass with a single click and often slow down your browser by injecting heavy scripts. By using Chrome's native Declarative Net Request engine, NetShield intercepts distractions at the network layer before the page even loads, while protecting your access credentials locally with SHA-256 passkey encryption.

---

✨ Features

• Network-Level Blockers — Instantly drops connections to distracting domains using high-performance native browser routing, saving memory and data.
• Brute-Force Protected Passkeys — Secure your bypass rules with a locally-hashed (SHA-256) master passkey that locks down for 60 seconds after 5 failed attempts.
• Self-Enforced Focus Alarms — Lock yourself out of distracting sites for fixed periods (up to 24 hours) with absolutely zero bypass options during the countdown.
• Biometric Auth Integration — Verify your identity instantly using physical WebAuthn/FIDO2 keys or system biometric locks.
• Tamper Detection — Monitored extension reloads trigger a tamper flag in the case log, keeping you accountable to your goals.
• Case Files Auditing — A secure event log tracking all system blocks, bypass approvals, and security alerts.

---

📸 Demo

Tip

Drop a screenshot or demonstration GIF here (e.g. public/demo.gif) to showcase the popup control panel and blocked screen overlay.

---

📦 Installation

Choose one of the methods below to get NetShield running in your browser:

Option A: Install from Browser Web Stores (Recommended)

NetShield is currently undergoing review and is not yet published on the Chrome Web Store or Firefox Add-ons. Use Option B or Option C to load the extension manually from source.

Option B: Build and Install from Source (For Developers)

To compile the extension locally, make sure you have Node.js installed:

1. Clone this repository to your local system:

   git clone https://github.com/Sandeep6135/NetShield-Extention.git
   cd NetShield-Extention

2. Install the project dependencies (accepting peer dependencies if prompted):

   npm install --legacy-peer-deps

3. Compile the production bundle:

   npm run build

4. Load the compiled bundle into your browser:
   • Chrome / Brave / Edge:
     1. Open a new tab and navigate to chrome://extensions/.
     2. Turn on Developer mode using the toggle switch in the top-right corner.
     3. Click Load unpacked in the top-left corner.
     4. Select the dist folder generated in the root of the project.
   • Firefox:
     1. Navigate to about:debugging#/runtime/this-firefox.
     2. Click Load Temporary Add-on....
     3. Select the manifest.json file inside the compiled dist folder.

Option C: Install Pre-Built Release

1. Go to the Releases tab on the right side of this GitHub repository page.
2. Download the netshield-extension.zip from the latest release.
3. Unzip the file to a folder on your computer.
4. Open chrome://extensions/, enable Developer mode, click Load unpacked, and select the unzipped folder.

---

⚡ Quick Start

1. Set Your Passkey: When you open the extension popup for the first time, you will be prompted to create an 8-character master passkey.
2. Lock a Site:
   • Navigate to a site you want to block, open the extension popup, and click Capture & Lock Active Domain.
   • Alternatively, type a host domain (e.g. twitter.com) in the Directives tab, choose your lock mode, and click Deploy Rule.
3. Bypass Focus: When you visit a blocked domain, you will be intercepted by the Slate-Dark focus screen. Enter your passkey, select a bypass duration (e.g. 15 minutes), and authorize access. A floating countdown widget will appear on the top corner of the tab.
4. Relock Early: Click Lock Now on the floating tab widget to instantly revoke the bypass and close access.

---

🛠️ Technical Stack

• Frontend Framework: React 18 & TypeScript (compiled via Vite)
• Extension Bundler: @crxjs/vite-plugin for hot-reloading Manifest V3 components
• State Management: Zustand
• Styling: Tailwind CSS
• Cross-Browser Support: webextension-polyfill (browser namespace wrappers)
• Testing Suites: Vitest (unit tests) & Playwright (e2e integration checks)

---

🤝 Contributing

Contributions of all sizes are welcome! Please review our Contributing Guidelines and Code of Conduct before submitting pull requests.

---

🛡️ Security

If you discover a security vulnerability, please refer to our Security Policy for instructions on how to contact the maintainers privately.

---

📄 License

Distributed under the MIT License. See LICENSE for more details.