Hacktoberfest — DPS909- 3rd PR

Survol

This week I continued to work on Survol project. I found an issue that requested to add a badge on the extension icon. The purpose of the badge is to make it more clear whether the extension is enabled or not. The badge should display ON/OFF depending on the state of the extension on the page. I thought that this is a nice feature that I could work on and replied to the issue.

First I forked and clone the project on my local machine. Then I added the unpacked extension to the Chrome extensions so I can test my changes. I created a new branch called issue-130 and started to learn how the code is designed. I also search for the file that responsible for enabling/disabling the extension on a page. Then I searched how to add a badge to google extensions. This can be done by adding the following line of code:

chrome.browserAction.setBadgeText({text: });

I created a function that changes the text of the badge depending on the status of the extension (ON/OFF). This function is called when the state of the extension is changed. The code was placed inside popup.js file.

After testing, I created a pull request. A few days later, the owner of the repository reviewed the changes and stated that the code should be placed in a different file.

Well, here it became a little more complicated. Since I moved my code to the different file, I needed to create an event listener to the chrome.storage. chrome.storage keeps the URL of the current tab if the extension is activated. Basically, when the URL does not exist than badge should be OFF and vice versa. Here I had another problem, chrome.browserAction.setBadgeText only works in the background file. To overcome it I had to send a message to the background file every time the state of the extension changes. When the background file receives the message with state request then it changes the badge accordingly.

Ok now everything works, but I got into another issue. When I opened multiple tabs and changed the state of the extension then the state was changed in all of the tabs. So I found the following solution: when the message is received in the background it also gets the sender info. Sender info includes information as sender tab id. Then I use this tab id for setting the badge. Now the badge is working independently in different tabs.

chrome.browserAction.setBadgeText({
            text: state,   
            tabId: sender.tab.id 
 });

I tested the code and now everything was working as needed. I pushed the changes and replied to the pull request explaining all the changes I have done. The owner merged my pull request a few days later. Hooray!:)