Steps to Convert an Angular App into a Browser Extension

Nagesh BulbuleNagesh Bulbule
2 min read

Table of contents

✅ Convert Your Angular App into a Browser Extension (Chrome Extension)

This allows your local Angular project to:

  • Run like a New Tab Page

  • Work completely offline

  • Store data in LocalStorage

  • Open instantly without any hosting/server

✅ Steps to Create a Chrome Extension from Your Angular App

Tech Details
Angular 17 (dependent Node and NPM

Note:

make changes in angular.json where add

"outputHashing": "none"

🔧 1. Build Your Angular App

ng build --configuration=production

This creates static files in dist/.

🗂️ 2. Create manifest.json in the dist/ Folder

Create a manifest.json file in the dist/ directory:

{
  "manifest_version": 3,
  "name": "Lounch Dock",
  "version": "1.0",
  "description": "A local tab and shortcut manager",
  "chrome_url_overrides": {
    "newtab": "index.html"
  },
  "icons": {
    "128": "favicon.ico"
  },
  "permissions": ["storage"],
  "action": {
    "default_title": "Shortcut Manager"
  }
}

🔸 chrome_url_overrides sets your Angular app as the new tab page.

📂 3. Structure Your Extension Folder

Your dist/ folder (after build) should now contain:

dist/
├── index.html
├── main.js
├── styles.css
├── manifest.json ✅
├── assets/
└── favicon.ico

Note: Before add to chrome/Jiosphere/edge. Please add one line in index.html file <head> section

<link rel="stylesheet" href="./styles.css">

🧪 4. Load as Chrome Extension

  1. Open Chrome

  2. Go to: chrome://extensions

  3. Enable Developer Mode (top right)

  4. Click “Load unpacked”

  5. Select your dist/ folder

🎉 Now, every time you open a new tab, your Angular app will open.

🧠 Notes

  • This works offline and without a backend

  • You can store everything in localStorage, just like you're doing now

  • You can even enhance this later with sync storage or IndexedDB

  • You don’t need hosting or a web server anymore

🚀 Want to Automatically Open This Page on Startup?

If you're using it like a dashboard, also add it as your Startup page:

  • Go to chrome://settings/onStartup

  • Choose Open a specific page or set of pages

  • Add: chrome://newtab
    (which will now be your extension’s Angular app)

0
Subscribe to my newsletter

Read articles from Nagesh Bulbule directly inside your inbox. Subscribe to the newsletter, and don't miss out.

Angularextensioncoding

Written by

Nagesh Bulbule
Nagesh Bulbule

Hi, I'm developer who loves coding and learning new things.