3 Steps to build a Chrome Extension with Angular
You just implemented an Angular application and you really enjoy using it. There is still a long way before you’ll deploy it somewhere on a server so that we all can use it publicly though.
But what if I told you that you can deploy your app as a Chrome extension, with no servers or any other cloud services involved? Would you believe me?
In this post we will go through the following steps:
- Step 1 — We’ll briefly explain what a Chrome Extension is and why you would need one.
- Step 2— We’ll reuse the source code from the Opportunity-Cost Angular App we implemented in my previous post.
- Step 3— We’ll than add some configuration files that will allow us to build our Angular App as a Chrome Extension and fine-tune it slightly.
Et voila! You’ll be ready to use your Angular-based Chrome Extension in minutes!
Step 1 — What Chrome Extension is and why to implement one
A Chrome extension is a small software program that adds functionality to the Google Chrome web browser. These extensions can modify and enhance the browser’s behavior, add new features, and provide you as a user with a personalized browsing experience. Chrome extensions are essentially web apps that can interact with the browser and web content, allowing you to customize and optimize your online activities.
Here’s why you might consider converting an Angular app to a Chrome extension
There are many reasons you would want to convert an Angular app, enough to discuss in a full post, but here are a few of them.
Convenience: By converting an Angular app to an extension, you make your app easily accessible to users. They can access it directly from their browser, eliminating the need to open a separate web app. Even locally, once you add it to the browser once, you don’t need to re-build it, re-start the web server, re-open it in the browser. It just stays there, ready to be accessed.
Offline Access: Chrome extensions can store data locally, allowing users to access some features even when they’re offline. This can be a significant advantage for certain types of apps. You won’t make use of this in our specific example but it’s worth keeping in mind for future posts to come.
Shold I mention one more? Oh yes, it’s just fun, really! Let me show how fun it is!
Step 2 — Reuse the Opportunity-Cost Angular App
The Angular Web App we’ll use for this convertion to a Chrome Extension can be found found on Github medium-ng repo (see original post here, on Medium as well).
$ git clone git@github.com:vBarbaros/medium-ng.git
# go inside the newly cloned repo and
# make a copy of the Angular App we'll use
$ cd medium-ng
$ cp -r opportunity-cost opportunity-cost-chromex
# go inside the newly created dir and build the angular app
$ cd opportunity-cost-chromex
$ ng serve
# ... expected bahaviour
✔ Browser application bundle generation complete.
Initial Chunk Files | Names | Raw Size
vendor.js | vendor | 2.00 MB |
polyfills.js | polyfills | 314.84 kB |
styles.css, styles.js | styles | 210.11 kB |
main.js | main | 19.10 kB |
runtime.js | runtime | 6.53 kB |
| Initial Total | 2.54 MB
Build at: 2023-10-19T00:37:29.742Z - Hash: 75a07484fd76b248 - Time: 14006ms
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
✔ Compiled successfully., and the expected view in your browser will be like the one below:
Step 3 — Configure your Angular App
We’ll need to “full” the Chrome browser in accepting our Angular Web App so that it accepts it as a browser extension. It turns out it’s prety easy to do this.
Add the following to the src/styles.css to ensure we take only a small fraction of our screen and we get a scroll-bar if we need it (if we overflow our content).
/* You can add global styles to this file, and also import other style files */
html {
position: relative;
}
body {
width: 27rem;
overflow-y: auto;
overflow-x: auto;
}In ..src/app/ dir create a manifest.json file and add the following:
{
"name": "OppCost",
"version": "2.0",
"description": "You can quickly verify if something is worth it relative to your golden standard",
"manifest_version": 2,
"browser_action": {
"default_icon": {
"19": "assets/images/opp-cost-32x32.png",
"38": "assets/images/opp-cost-132x132.png"
},
"default_popup": "index.html"
}
}In angular.json file add the following in the styles and scripts arrays, under build key
...
"architect": {
"build": {
...
"styles": [
"src/styles.css",
"src/assets/vendor/semantic.min.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
"node_modules/bootstrap/dist/js/bootstrap.min.js"
]
..., and of course, ensure you actually have the bootstrap installed for your project, like this:
$ npm install bootstrapAnd that’s it! Your Angular Application is ready be converted and used as a Chrome Extension, now!
Build and Upload to Chrome
Project Build Step
Once all the steps above are compeleted successfully, just run the following command:
ng build --configuration=production
The expected out put would be something similar to this:
$ ng build --configuration=production
✔ Browser application bundle generation complete.
✔ Copying assets complete.
✔ Index html generation complete.
Initial Chunk Files | Names | Raw Size | Estimated Transfer Size
styles.bdedcf84620d0025.css | styles | 219.15 kB | 21.71 kB
main.db5c2881d3fae222.js | main | 138.29 kB | 38.53 kB
scripts.a343475696b9b1ab.js | scripts | 58.32 kB | 14.42 kB
polyfills.eb36268a67a0f051.js | polyfills | 33.10 kB | 10.69 kB
runtime.90725c5e2ef68a11.js | runtime | 910 bytes | 520 bytes
| Initial Total | 449.75 kB | 85.86 kB
Build at: 2023-10-19T02:13:18.216Z - Hash: 59aad7bc7310570c - Time: 9781msWhat’s more important, at the same level with the src/ folder you will see another new folder inside your project — the dist/ folder, sotring the files resulted from the built command. It will contain the following files:
$ tree dist
dist
└── opportunity-cost
├── 3rdpartylicenses.txt
├── assets
│ ├── images
│ │ ├── opp-cost-132x132.png
│ │ └── opp-cost-32x32.png
│ └── vendor
│ └── themes
│ └── default
│ └── assets
│ ├── fonts
│ │ ├── icons.eot
│ │ ├── icons.otf
│ │ ├── icons.svg
│ │ ├── icons.ttf
│ │ ├── icons.woff
│ │ └── icons.woff2
│ └── images
│ └── flags.png
├── favicon.ico
├── index.html
├── main.db5c2881d3fae222.js
├── manifest.json
├── polyfills.eb36268a67a0f051.js
├── runtime.90725c5e2ef68a11.js
├── scripts.a343475696b9b1ab.js
└── styles.bdedcf84620d0025.css
10 directories, 18 filesMake sure you have a manifest.json file located at dist/opportunity-cost/ and if it’s not present, just copy it from your previous step above and put it there manually.
Browser Upload Step
Go to your Chrome browser and type the following url chrome://extensions/ Once there, enable the developer mode by clicking on the slide button as shown below:
Once the developer mode is enabeled, you’ll be able to see a menu bar. The button of interest for us it the Load Unpacked.
Click on the Launch Unpacked button and use the navigation window to reach the dist/ folder in your file system (which we just discussed above). Select the dist/opportunity-cost folder and load it (check this one if want to read all about Opportunity Cost App).
Once the load is complete you’ll be able to see your Extension ready to be used (see below).
What’s more fun is that it’s now available in your browser without for you to do any other steps, witout starting any servers, nor opening any tabs.
If you want to use it, just open it from the browser! Take a look, here!
Now, what’s next? Next, my friends is to publish this Chrome Extension and make it available for everyone on the internet to be able to use it (one good way of sharing is GitHub, and if you don’t know what GitHub is, check my article). So stay tuned for the next post, by following me!
Thanks for reading!
Call for Action
Dear reader, I invite you to join me in this digital realm. If you find my words resonating with you, please consider giving a round of applause (aka Clapping), hitting that follow button, and sharing your thoughts in the comment. Let’s explore this world of ideas together.
