documentation<\/a>)<\/li>\n<\/ul>\nThe benefit of using Angular CLI is that it allows us to generate new modules, components and services using the command line. We can also generate new Angular application that way:<\/p>\n
ng new [project-name] \u2013routing<\/pre>\nA routing flag will ensure that the routing-definition file will get generated to our app. As a result, we get ready-to-use applications with the local GIT repository that can be built (ng build)<\/em> or served (ng serve<\/em>). However, before we can use use it, we also need to install the required packages:<\/p>\ncd [project-name]\r\n npm install<\/pre>\nAfter building the project, the resulting files can be found in the dist<\/em> folder. That\u2019s the place where the extension manifest file should also be located. However, it is not a good idea to keep manifest file there, because the dist<\/em> folder gets removed each time Angular CLI builds the project.<\/p>\nIt is better to store the manifest.json<\/strong> file in the src<\/strong> folder and declare it in .<\/em>angular-cli.json<\/strong> configuration file in the assets<\/strong> node:<\/p>\n\u2026\r\n\"assets\": [\r\n \"assets\",\r\n \"favicon.ico\",\r\n \"manifest.json\"\r\n],\r\n----------------------\r\n.angular-cli.json\r\n<\/pre>\nThanks to this, the manifest file will be always be present in the build output folder.<\/p>\n
Manifest your Angular stuff!<\/h2>\n
As Angular CLI is focused on building single-page applications, it produces a single HTML file (index.html<\/em>). However, as our application has a routing module, it can contain different content depending on the route. Firstly, let\u2019s set up some components that will be typical for a Chrome Extension:<\/p>\nng g component homepage\r\nng g component event-page\r\nng g component popup<\/pre>\nAs the result of the component generation command, Angular is automatically creating some files that define a new Component – the most basic building block of an UI in an Angular application. Here\u2019s the example component structure:<\/p>\n
\n- app\/homepage\/homepage.component.ts<\/strong> \u2013 component class definition (back-end part)<\/li>\n
- app\/homepage\/homepage.component.spec.ts<\/strong> \u2013 component tests class<\/li>\n
- app\/homepage\/homepage.component.html<\/strong> \u2013 an html template of the component (front-end part)<\/li>\n
- app\/homepage\/homepage.component.CSS<\/strong> \u2013 a stylesheet for component layout<\/li>\n<\/ul>\n
As you can see, Angular CLI takes care of placing the new files in their appropriate folder. It also generates the basic code in component files, so you don\u2019t need to copy-paste it from previously implemented components.<\/p>\n
Having our components initialized, we can use them to provide routing rules in a routing module:<\/p>\n
import { PopupComponent } from '.\/popup\/popup.component';\r\n import { EventPageComponent } from '.\/event-page\/event-page.component';\r\n import { HomepageComponent } from '.\/homepage\/homepage.component';\r\n import { NgModule } from '@angular\/core';\r\n import { Routes, RouterModule } from '@angular\/router';\r\n const routes: Routes = [\r\n { path: 'homepage', component: HomepageComponent },\r\n { path: 'event-page', component: EventPageComponent },\r\n { path: 'popup', component: PopupComponent },\r\n { path: '', redirectTo: 'homepage', pathMatch: 'full' }\r\n ];\r\n @NgModule({\r\n imports: [RouterModule.forRoot(routes, { useHash: true })],\r\n exports: [RouterModule]\r\n })\r\n export class AppRoutingModule { }\r\n-----------------------------\r\napp-routing.module.ts\r\n<\/pre>\nThe useHash<\/em> setting for router module enables routing in old-fashioned way, using the #<\/em> sign. For example, to open our app routed to the Popup component, we need to use the following URL address:<\/p>\nchrome-extension:\/\/[extension-id]\/index.html#\/popup<\/em><\/p>\nFinally, we need to update the extension manifest file. It must point to the appropriate pages:<\/p>\n
{\r\n \"manifest_version\": 2,\r\n \"name\": \"Test Extension\",\r\n \"version\": \"1.0.0\",\r\n \"permissions\": [ \"tabs\", \"activeTab\" ],\r\n \"background\": {\r\n \"page\": \"index.html#\/event-page\",\r\n \"persistent\": false\r\n },\r\n \"browser_action\": {\r\n \"default_title\": \"Open Popup!\",\r\n \"default_popup\": \"index.html#\/popup\"\r\n },\r\n \"icons\": {\r\n \"19\": \"assets\/Icon-19.png\",\r\n \"38\": \"assets\/Icon-38.png\"\r\n },\r\n \"content_security_policy\": \"script-src 'self' 'unsafe-eval'; object-src 'self'\"\r\n------------------\r\nmanifest.json\r\n<\/pre>\nMessaging<\/h2>\n
We\u2019ve successfully prepared our Angular-based app so that it can be registered as a Chrome extension. Now it\u2019s time to implement some functionality, so that the extension can do something useful.<\/p>\n
The Chrome browser delivers the API for extensions. It would be nice to take an advantage of it in our app. We can achieve that by installing Chrome types to our project:<\/p>\n
npm install @types\/Chrome \u2013save-dev<\/pre>\nTo ensure that the project will get correctly compiled once we start using Chrome typings, we need to include them in the tsconfig.app.json<\/strong> file in the compilerOptions\/types<\/strong> node:<\/p>\n\u2026
\n<\/em> “types”: [“Chrome”]
\n———————-
\ntsconfig.app.json<\/em><\/p>\nAt some point, you might discover that you require some way of connecting between extension elements, allowing particular pieces of the extension to communicate with each other. To make it possible,the Chrome extensions API provides three messaging methods. Here\u2019s a brief description of those methods:<\/p>\n
\n- Chrome.tabs.connect<\/strong> – This opens a communication port to the selected browser tab, such as the currently active one; and allows it to send the message. This can\u2026\n
\n- communicate within single extension elements<\/li>\n
- define a method to handle an incoming response event<\/li>\n<\/ul>\n<\/li>\n
- Chrome.tabs.sendMessage<\/strong> – This sends the message to the selected browser tab, such as the currently active one. This allows us to \u2026\n
\n- send message within currently executed extension by default.<\/li>\n
- define an ID of the extension, especially to a different one<\/li>\n
- define a method to handle an incoming response event<\/li>\n<\/ul>\n<\/li>\n
- Chrome.runtime.sendMessage<\/strong> \u2013 This sends the message that can be received by any part of the extension such as an event page or content script. This has similar characteristics to the Chrome.tabs.sendMessage<\/strong><\/li>\n<\/ul>\n
Once the message is sent, it can be received by other part of the extension. The Google Chrome Extension API provides the following message-receiving methods:<\/p>\n
\n- \n
\n- Chrome.runtime.onConnect <\/strong>\u2013 This allows us to define a listener that receives messages sent through Chrome.tabs.connect<\/strong> communication port. This is typically implemented in a content script that is being executed in a defined set of tabs. The listener receives the message and communication port that allows it to send the response<\/li>\n
- Chrome.runtime.onMessage<\/strong> \u2013 This allows us to define a listener that receives messages sent through Chrome.tabs.sendMessage<\/strong> and Chrome.runtime.sendMessage<\/strong> methods. It can be implemented in any part of the extension: The listener receives the message, the sender information and the function allowing it to send the response<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
Missing the content script<\/h2>\n
As you may have noticed, we\u2019re missing the content script in our project. The problem is that it must be developed as a JavaScript file, whereas the Angular app assets need to be bootstrapped by an HTML tag. Unfortunately, Angular CLI doesn\u2019t provide us a way to easily build selected TypeScript files to separate out the JavaScript asset as long as we are using the standard building definition. Let\u2019s figure out what other options that we have instead:<\/p>\n
\n- We can develop a content script as a JavaScript source file and add it to assets<\/em> node in .angular-cli.json<\/strong><\/li>\n
- We can develop it as single TypeScript source file without internal modules dependencies and add it to scripts<\/em> node in .angular-cli.json<\/strong>. Angular CLI builds files defined in that node to scripts.bundle.js<\/strong> file with the dependencies to the code included in inline.bundle.js <\/strong>file<\/li>\n
- Develop it as TypeScript application and use 3rd<\/sup> party build tool (eg. Gulp) to compile it.<\/li>\n<\/ol>\n
The decision you take will depend on the project needs. If your content script doesn\u2019t need to have complex logic, the first or second approach might be sufficient. Otherwise, it may be a good decision to define a Gulp building rule.<\/p>\n
Building content script with Gulp<\/h2>\n
At first we will need to install Gulp:<\/p>\n
npm install gulp \u2013save-dev<\/pre>\nWe will also need to install the following npm packages:<\/p>\n
\n- gulp-typescript<\/li>\n
- gulp-sourcemaps<\/li>\n
- gulp-uglify<\/li>\n
- browserify<\/li>\n
- vinyl-source-stream<\/li>\n
- vinyl-buffer tsify<\/li>\n<\/ul>\n
Now we can develop the TypeScript modules that we would like to compile as the content script. Let\u2019s develop some logic that will implement the Chrome.runtime.onConnect<\/strong> and Chrome.runtime.onMessage<\/strong> listeners.<\/p>\nexport class ConnectListener {\r\n constructor() {\r\n this.initializeMessagesListener();\r\n }\r\n initializeMessagesListener() {\r\n Chrome.runtime.onConnect.addListener(this.onConnectHandler.bind(this));\r\n }\r\n onConnectHandler(port: Chrome.runtime.Port) {\r\n port.onMessage.addListener(this.onConnectMessageHandler.bind(this));\r\n }\r\n onConnectMessageHandler(msg, port) {\r\n console.log('Received connection message: ' + msg);\r\n const response = 'Greetings!';\r\n port.postMessage(response);\r\n }\r\n }\r\n------------------------------------------------------\r\ncontent-script\/connect-listener.ts\r\n<\/pre>\nexport class RuntimeListener {\r\n constructor() {\r\n this.initializeMessagesListener();\r\n }\r\n initializeMessagesListener() {\r\n Chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {\r\n const command = message['command'];\r\n console.log('Received runtime command: ' + command);\r\n const response = { message: 'Aye!' };\r\n sendResponse(response);\r\n });\r\n }\r\n-------------------------------------------\r\ncontent-script\/runtime-listener.ts\r\n<\/pre>\nimport { ConnectListener } from '.\/connect-listener';\r\nimport { RuntimeListener } from '.\/runtime-listener';\r\nconst runtimeListener = new RuntimeListener();\r\n--------------------------------------\r\ncontent-script\/boot.ts\r\n<\/pre>\nFinally, we will need to define a Gulp build that will compile our content script to JavaScript file:<\/p>\n
var gulp = require('gulp');\r\n var ts = require('gulp-typescript');\r\n var exec = require('child_process').exec;\r\n var browserify = require(\"browserify\");\r\n var source = require('vinyl-source-stream');\r\n var buffer = require('vinyl-buffer');\r\n var uglify = require('gulp-uglify');\r\n var sourcemaps = require('gulp-sourcemaps');\r\n var tsify = require(\"tsify\");\r\n gulp.task('ng-build', function(cb) {\r\n console.log('running ng build...');\r\n exec('ng build', function (err, stdout, stderr) {\r\n console.log(stdout);\r\n console.log(stderr);\r\n cb(err);\r\n return true;\r\n });\r\n });\r\n gulp.task('content-script', function() {\r\n return browserify({\r\n basedir: '.',\r\n debug: true,\r\n entries: 'content-script\/boot.ts'\r\n })\r\n .plugin(tsify)\r\n .bundle()\r\n .pipe(source('content-script.js'))\r\n .pipe(buffer())\r\n .pipe(sourcemaps.init({loadMaps: true}))\r\n .pipe(uglify())\r\n .pipe(sourcemaps.write('.\/'))\r\n .pipe(gulp.dest('.\/dist\/'));\r\n });\r\ngulp.task('default', ['ng-build', 'content-script']);\r\n------------\r\ngulpfile.js\r\n<\/pre>\nThe default tasks consist of 2 sub tasks: the first of them simply performs the ng build<\/strong> command; the second task builds the minified content script to dist\/content-script.js<\/strong> file. Now we can bring back the content script to our manifest file:<\/p>\n\u2026\r\n\"content_scripts\": [\r\n {\r\n \"matches\": [\"*:\/\/*\/*\"],\r\n \"js\": [\"content-script.js\"]\r\n }\r\n ],\r\n\u2026\u2026\u2026\u2026\u2026...\r\nmanifest.json\r\n<\/pre>\nTo build the whole application (including the content script) we can simply use the short command:<\/p>\n
gulp<\/pre>\nSending messages to the content script<\/h2>\n
Now that we have implemented the content script that handles messages, it\u2019s time to implement the sending part. Let\u2019s do this in Popup component backend:<\/p>\n
import { Component, OnInit } from '@angular\/core';\r\n @Component({\r\n selector: 'app-popup',\r\n templateUrl: '.\/popup.component.html',\r\n styleUrls: ['.\/popup.component.CSS']\r\n })\r\n export class PopupComponent implements OnInit {\r\n ngOnInit() {\r\n this.connectWithContentScript();\r\n this.sendContentScriptCommand();\r\n }\r\n connectWithContentScript = () => {\r\n const tabQueryData = { active: true, currentWindow: true };\r\n Chrome.tabs.query(tabQueryData, (tabs) => {\r\n const port = Chrome.tabs.connect(tabs[0].id);\r\n port.postMessage('Hello!');\r\n port.onMessage.addListener((response) => {\r\n alert('Content script responded: ' + response);\r\n });\r\n });\r\n }\r\n sendContentScriptCommand() {\r\n const tabQueryData = { active: true, currentWindow: true };\r\n Chrome.tabs.query(tabQueryData, (tabs) => {\r\n const commandMessage = { command: 'salute' };\r\n Chrome.tabs.sendMessage(tabs[0].id, commandMessage, (response) => {\r\n const responseMessage = response['message'];\r\n alert('Content script responded: ' + responseMessage);\r\n });\r\n });\r\n }\r\n }\r\n------------------------------------------\r\napp\/popup\/popup.component.ts\r\n<\/pre>\nThe messages are getting sent to the content script each time we open the popup. Unless the page browser that is currently displaying matches the pattern that is provided in the manifest file for the content script, nothing will happen. Otherwise the popup will show some alerts:<\/p>\n
![](\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2017\/10\/word-image-26.png\")
<\/p>\n
Summary<\/h2>\n
Although the task of implementing Chrome extensions using Angular CLI might cause some initial problems, these are easily dealt with. We can then benefit from a nicely modularized app that can easily be enhanced and developed using TypeScript. By combining this with the Chrome API we can develop powerful and fast-working extensions.<\/p>\n","protected":false},"excerpt":{"rendered":"
It may seem a tricky task to create a Chrome extension with TypeScript and Angular 4 but it turns out to be relatively simple. The advantage is that you gain the modularity of Angular and the object-oriented programming experience with strong typing of Typescript. Jacub explains how it is done.…<\/p>\n","protected":false},"author":316282,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[146992,146044],"tags":[],"coauthors":[50410],"class_list":["post-74765","post","type-post","status-publish","format-standard","hentry","category-angular","category-javascript"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/posts\/74765","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/users\/316282"}],"replies":[{"embeddable":true,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/comments?post=74765"}],"version-history":[{"count":9,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/posts\/74765\/revisions"}],"predecessor-version":[{"id":94476,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/posts\/74765\/revisions\/94476"}],"wp:attachment":[{"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/media?parent=74765"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/categories?post=74765"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/tags?post=74765"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.red-gate.com\/simple-talk\/wp-json\/wp\/v2\/coauthors?post=74765"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![](\"https:\/\/www.red-gate.com\/simple-talk\/wp-content\/uploads\/2017\/10\/word-image-25.png\")
<\/p>\n