How to Build A Chrome Extension: Part 2

Understanding the Chrome API’s chrome.* functions.

Welcome to Part 2 of my “How to Build A Chrome Extension” multipart tutorial if you need an overview of Project Concepts, Structure, and Terminology check out my How to Build A Chrome Extension Part 1: A Birds Eye Overview of this Tutorial.

There are chrome.* actions (functions) that you have access to and I’m going to give a ELI5 definition for all of them and tell you what they all do.

Notice: If you followed the docs and example and your function is not working as expected then you likely have a permissions issue from not setting up your manifest.json correctly and may need to revisit Part 1 Be aware (as noted in Part 1) Now that that’s understood lets hope right onto each chrome.* methods.

chrome.extension

Use to communicate between compoents and resolve urls of extinsion files.

chrome.browserActions

Change’s the appearance of your Chrome Extensions Icon. This includes: * The badge that displays on your Extension Icon * Your Extensions Icon Image (yes you can change it dynamically) Read more about this in the below, Lessons Learned Section.

chrome.pageActions

Use to enable or disable pageActions

chrome.window

Requires tabs permission in manifest.json

This enables the ability to open, close, search for, or update your browser windows.

Side note: You would think this would require a window permission but they don’t have one, it’s tabs because of how close the window and tab functions are in functionality, so close in-fact the Chrome Team should depreciate the window function and attach it to the chrome.tabs functions.

chrome.tabs

Requires tabs permission in manifest.json This manages all instances of all windows and all tabs in all window.

chrome.bookmarks

Requires bookmarks permission in manifest.json This manages users bookmarks.

Helpful Functions

1. Get a full list of all chrome tabs you can run.

   chrome.tabs.query({}, function(tabs){
   console.warn("tabs",tabs);
   });
   

   This will spit out an array of all chrome tabs, include each tabs windowId and tabId.

2. Change the badges background color:

   chrome.browserAction.setBadgeBackgroundColor({
   color:[255,255,255,.5]
   })
   

. :

1. Send Message from background.html to popup.html: Add a listenter in your React App

   chrome.extension.onMessage.addListener(function(request, sender, sendResponse) {
   console.warn(" From Injected Page: ",request.msg);//outputs => "Here's my message!"
    sendResponse({ msg: 'got message successfully! Thax!' });
   });
   

   in your injected page

   chrome.extension.sendMessage({ "msg":"Here's my message!" }, function(resp) {
     console.warn("Sent MESSAGE callback mssg",store);
   //outputs -> 'got message successfully! Thax!'
   });
   

2. Send Logs from Extension Window (React Side) to Background.html: in react app

   function consoleLog(msg){
   chrome.extension.sendMessage({ "method":"log","data":msg });
   }
   consoleLog("my message")
   

   now add a listener in your background,js

   chrome.extension.onMessage.addListener(function(req, sender, sendResponse) {
   if(req.method==="log")console.warn("Message From React App: ",req.data);
   });
   

   for more on messaging checkout https://developer.chrome.com/extensions/messaging

Lessons Learned

I felt comfortable with javascript and always wanted to build a chrome extension so dedicated a 1.5 to building one and the one most annoying issue that held me up was with the browser_action object I declared in my manifest.json no enabling the chrome.browserAction.setBadgeText to trigger.

I was trying to change the extensions Icon based on Reddit API I made for each Tab, the Chrome Extension that checks if each page you visit has been posted on reddit before, if it has then is should display what they are with a badge that include the count, and update the Icon with a Reddit Aliens face that meets the emotion with the results, so for no results the alien has a “IDK shrug face”, and my manifest.json looked like

  "browser_action": {
        "default_title": "RedditLabs",
        "default_popup": "popup.html"
    },
    "icons": {
        "16": "img/reddit-icon-7-16X16.png",
        "48": "img/reddit-icon-7-48X48.png",
        "128": "img/icon-128.png"
    },

I gave permissions to my Icons but not in the correct place, I need it to look like:

  "browser_action": {
        "default_title": "RedditLabs",
        "default_popup": "popup.html",
        "default_icon": {
            "16": "img/icon-16.png",
            "48": "img/Icon-48.png",
            "128": "img/icon-128.png"
        }
    },
    "icons": {
        "16": "img/reddit-icon-7-16X16.png",
        "48": "img/reddit-icon-7-48X48.png",
        "128": "img/icon-128.png"
    },

I need to give the browser_action object a default_icon with a default Icon or it disable me from being able to update my Badge by running:

 chrome.browserAction.setBadgeText({ text: currentTabPosts.length.toString() });

Note: Badges text must be strings and not numbers, you can use [your number].toString() like I did above.

The icons at the root of the manifest.json object is used for the image shown in the chrome://extensions tab of your browser.

To continue this multipart series on “How to Build A Chrome Extension” then checkout Part 3 Building A Chrome Extension.