Steps to Convert an Angular App into a Browser Extension
Hi, I'm developer who loves coding and learning new things.
✅ 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
Open Chrome
Go to:
chrome://extensionsEnable Developer Mode (top right)
Click “Load unpacked”
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 nowYou 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/onStartupChoose Open a specific page or set of pages
Add:
chrome://newtab
(which will now be your extension’s Angular app)
