For a long time, I wanted to try to write my own browser extension, but somehow I couldn't get my hands on it. And finally, the other day I had an idea and free time. At the same time as creating the extension, I decided to write an article in which I will write about the problems I have encountered and the ways to solve them, in addition to the basics of development.
Introduction
I like to invest small amounts of money in all kinds of investment programs, company shares, etc. A couple of months ago I found a pretty good investment program with an average return of about 10% per month. So on the site of this investment program once a month in about 10 numbers is published information about the profitability of the previous month. What I don't like is that I have to go to the site every day at the beginning of the month and check the information about the profitability, I wanted to automate this process and just receive notifications about when the information I need will appear. Of course, you could just subscribe to the RSS feed, but I made it harder and decided to make an extension for Chrome, which I had long wanted to try to write. The extension is very simple, its task is to notify you about the profitability that was last month as soon as the information appears on the site, as well as to take the information from the investment program page and display the last month's profitability, the average monthly profitability, and the average annual profitability, including reinvestment.
Development
So, extensions are being developed for browsers, including Chrome, in HTML + JavaScript. That's why it's recommended to know the basics of these languages at least before you start, I just know the basics and maybe more about HTML. Before you start developing, you need to create a folder where all the extension files (images, manifest, HTML, CSS and JS-files) will be stored. The first thing to do is to create a manifest, which is a file with the mandatory name manifest.json and contains information about your extension.
Name is the name of the extension. Version is the version of your extension. Manifest_version - version of the manifesto, now supported only by value 2. Icons - here you can specify the names of images that will act as an icon of your extension, you can specify different sizes, in my case, I have specified only the icon size 128 to 128 pixels. browser_action - here we specify that our extension will have an icon next to the address bar. In default_title we specify the text that will be displayed when pointing to the icon, in default_icon we specify the name of the image that will be used as an icon, and in default_popup we specify the name of the HTML page that will be displayed when clicking on the icon of the extension. It looks like this in my case: QIP Shot - Screen 024If you want the icon to appear in the address bar next to the favorites button, you need to write page_action instead of browser_action.
After the manifesto is created, HTML, CSS, and JS-files are created. There is one nuance that I immediately encountered when creating the HTML page that is responsible for the pop-up window (in the picture above), I had to place a link to the investment program page, did it as usual, but the link did not work. This is due to the fact that all links available in the extension files are looking for a page in the extension folder and go to it if there is no such page, nothing happens. To open a link in a browser tab, you need to add a special event and function in JavaScript.
Data storage
I needed to work with the data warehouse so that when opening the extension window I would not wait for the data to be taken from the site. It was very easy to work with, first, you need to specify in the manifest that you need to work with the repository, this is done very simply by adding a line of "storage" to the permissions/permissions section.
Then it is necessary to write or read data in JS code. You need to use the chrome.storage.sync.get method to retrieve the data, and chrome.storage.sync.set method to record the data. Here are examples of usage:
Notices
It's very easy to work with notifications. They are created first, then called. I will use a simple example to show you how to do this and give you a link to a more detailed description of how to work with them. First, you need to specify that our extension will work with notifications.
Event page
I have written about notifications, but without background tasks, these same notifications will be useful to a few people. Therefore, during the development process I faced the next task, my extension should check the information on the site at a certain time and if there is such a notification. I started reading the background task information and found a link to the event page. The difference between an event page and a normal background task is that it saves the user's computer resources. Background tasks are constantly running and consuming certain resources, but the event page is launched only at the time you need, executed and destroyed, freeing up resources. I think it's pretty clear that at the end I'll give you a link to a more detailed description.
I would like to point out right away that the scripts section contains the names of two files, this is necessary to use the jquery library in the event Page.js file if you need it.
Testing
You should write a little bit about testing. To test extensions, you need to go to the Extensions page in your Chrome browser by clicking on the link or choosing Tools->Advantages from the menu. On the page, put a checkmark in the Developer Mode field, and then use the Download unpacked extension button to select a folder with your extension. After that, your extension will be loaded, if the icon next to the address bar is enabled, it will be displayed on a yellow background. After each change in the code, the files should be saved and click on the Refresh button in the browser on the Expansion page.
Publication
Chrome apps are distributed from a dedicated online store. To publish an application, the developer must pay $5. The amount is small and paid only once, not every year as in many app stores. I paid with a card, no problem with that.