Develop Browser Extensions Angular 5/6; Tutorial; Guide

Question

I would like to ask you a simple but very important question. I have been working recently on a project, where I would like to develop a chrome or browser extension. I would like to use here the Angular Framework, as it's just fantastic and I have been working with it frequently. I would like to develop the extension in Angular and found only 2 interesting tutorials on how to perform this. However, they are mostly outdated. I know that I need only the following files at least:

• manifest.json
• index.html (or popup.html)

However, there is still more like the content-script.js or the event page in the background. Angular is in typescript and I have found a gulp taks, that bundles and builds me a single content-script. Anyway I would like to ask you if you have any projects/experience or tutorials and help for developing a browser or chrome extension with Angular 5/6 and the latest CLI and tools?

Answer 1

After project setup these steps you have to follow here.

• Run command “ng build” (lets create you Build for your project in order to publish, this creates dist folder in your project)

• Create manifest.json file in the dist folder. (Basic format given below)

   { “manifest_version”: 2, “name”: “ng2 Extension”, “description”: “Todo app as chrome extension using angular4”, “version”: “1.0”, “browser_action”: { “default_icon”: “icon.png”, “default_popup”: “index.html” }, “permissions”: [], “content_security_policy”: “script-src 'self' 'unsafe-eval'; object-src 'self'”, “web_accessible_resources”: [ “assets/css/*”, “assets/js/*”, “assets/fonts/*” ] }

For more information read out here -

• Build Your Own Chrome Extension Using Angular 4