Blog Post
Angular performance extension development guide
Angular performance is a chrome extension I developed while working for Linkurious to get concrete performance metrics about any angular application. As of now, I try to maintain it on my free time, which I don't have that much since I am also working on another open source project called GitRank and is enrolled in a master engineering degree at Cornell Tech. As a consequence, I am trying to make it easier for anyone to make pull requests and try to fix or improve stuff in the extension by providing this guide.
Please give me any feedback you feel necessary in the comments below, I will try to improve this according to them.
Folder structure
- + .scss Stylesheets to be compiled with compass
- + extension + Extension folder, this is the folder that
| represents the extension. If you want to install
| the extension manually, you should add this folder
| as the extension.
|
+ _locales containing translating files.
+ css compiled and vendor css.
+ fonts
+ images
+ src + Containing the source files of the
| extension (html/js)
|
+ devtools This is the devtools page.
+ injected Contains the content-script
| the script injected in the
| page
+ panel Contain the html and js of the
| devtools panel
+ vendors js dependencies
- + panelApp + Contains the panel code before built. The result
| of the build is output in the panel folder (above)
|
+ models Panel app models
+ panels js behind each panel.
The Build process & dependencies
The extension uses npm as the dependency manager. It is used to manage these depenencies:
We use npm scripts as build tasks. Node is completely able to handle build without having to require a build tool like grunt. However, by using npm, we cannot specify the directory in which the dependencies will be imported. As a result the first tasks of the build process consist in copying the right files into the right directories. Then we aggregate and minify all the css files and finally, we browserify all the panel files, aggregate them and put the result into panel.js.
We use browserify as a way to structure the browser code in the extension. Thanks to that we are able to write node js like code and access functionalities like require. At compile time, browserify gets all the required dependencies from the node_modules folder and creates a js file that can be understood by the browser by mocking some of node functions.
The extension architecture
First one important thing to understand about extensions is that they have a background script that is instantiated once and serves as a the vertebral column of the extension. Each tab connects to the same background.js instance.
The devtools are just the same as tabs. They can be seen as tab that connect to the background script. For each tab you have a unique tuple of (tab, background, devtool) and you have to keep track of them to be able to communicate between the tab and the devtools.
In all tabs the extension injects the content-script located in the injected folder. This content-script initiate connection with the background page. It only injects the inspector in the tab if the devtools are opened.
Once injected, the inspector determines if angular is used in the webpage. If it is not, it doesn't do anything. Else, it instruments the application and starts sending measurements to the content-script, that follows it to the background page that finally relays it to the panel.
The devtools page is only used to instantiate a panel in which the UI of the extension lives. Once that done, the devtools page is not useful anymore.
The setting up of the content-script, the background page and the devtools page are done in the manifest.json file at the root of the extension folder. This file describes all the metadata of the chrome extension.
The registry
The registry is the object that stores all the data used in the extension. It stores time series and maps in buffers that are kept bounded.
To be displayed on the screen, the data is requested from the registry. It should provide the data in a format convenient for usage with the different graph libraries.
UI
Tab Handler
The tab handler is the component that takes care of switching the view between the tabs in the panel. The panel.html holds all the panels html and the tab handler contains all the javascript to switch between tabs.
This is pure JQuery.
Panels
Panels are the UI of the extension. The html and structure of the panels is contained in the panel.html file. Each panel has its own controller and all the controllers are located in the panels folder.