Create a new Angular Project.
Go to Angular.json file and set "aot" and "assets area" to look like this.
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/ngChromeExtension",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"aot": true, <= // Make sure this is set to true
"assets": [
"src/assets/favicon.ico",
"src/assets",
"src/manifest.json" <= // Chrome manifest goes in root directory
],
- Create a new manifest.json file in root
{
"name": "Great Extension",
"version": "1.0",
"description": "Build an Extension with Angular",
"manifest_version": 2,
"browser_action": {
"default_popup": "index.html"
}
}
- Type in ng build
- Type in chrome://extensions in Chrome
- Click Load Unpacked
Find your compiled dist folder and point there. Chrome will not allow the files to be displayed. No problem just let it use your dist folder.
Next, look for a small square green G icon next to Chrome's address bar on left. Click it...
✔️ That's pretty cool in my opinion! It's definitely a way to get interested in learning Chrome Extension internals!
JWP 2020 Angular Chrome Extension
Top comments (1)
Now Manifest V2 is depricated. Use V3