Updated date:

Chrome Extensions Messaging Api - Easily Explained

Tania has a MSc in Computer Science. Is a recent graduate but very interested in all topics from web accessibility to cloud computing.

Introduction

Chrome extensions can be simple or more complicated depending on their purpose. Extensions are made of different but cohesive components such as background scripts, content scripts, options page, UI elements, and logic files. Depending on the functionality there will be different components with different options.

What are Event Objects?

An event is an object that allows notification when something interesting happens. Similar to the DOM APIs, the events in the Extensions framework also require a listener function, registered using the addListener method. This should not be confused with addEventListener method of the DOM API. To note that every API in the Extensions framework (for example, browserAction, tabs, and so on) passes different kinds of arguments to the listener functions.


Description of the Extension Runtime

This section describes the lifecycle of the extension, from the moment the extension is executed and ends when it is closed.

The input components fire events and these respond to them accordingly. Every input component in the extensions framework has some associated events, for example, the Browser-Action input component has the chrome.browserAction.onClicked event.

The life cycle begins when the extension is loaded in the browser, then the manifest is first to read. This provides permissions to access certain APIs, such as tabs API. Then the views and scripts are loaded. Finally, the listener functions are assigned to input components, to listen for events.

Not to forget that the extension itself has some events associated, for example, onMessage, on Installed, etc. These events are properties of the chrome.runtime (API) object.

The scripts that can listen for events fired from the input components, or other things that happen, represent the extension runtime. These include popup script and background script. Since the popup script is only executed when a popup is opened, the background script, which is a long-running script in the background, has a major role since it listens for every event.


Messaging API

There are various ways in which scripting components communicate with each other using the messaging APIs, provided by the Google Chrome Extensions framework. The figure 1 represents the possible communications between the components but take into consideration that the extension architectures will vary based on functionality.


Figure1. Messagin API between scripts.

Figure1. Messagin API between scripts.

Communication between components is done by sending messages and adding listeners.

The messaging APIs used for communication between the different scripts are from the standard Javascript APIs and the Extensions framework. The messaging APIs provided by the standard Javascript APIs include the window.postMessage method. Comparably, the messaging APIs provided by the Extensions framework include the following methods:

  • chrome.runtime.sendMessage
  • chrome.runtime.connect
  • chrome.tabs.sendMessage
  • chrome.tabs.connect

The corresponding event for the messaging API includes the message event. Comparably, the corresponding events for the messaging APIs in the Extensions framework include the following events:

  • chrome.runtime.onMessage
  • chrome.runtime.onMessageExternal
  • chrome.runtime.onConnect
  • chrome.runtime.onConnectExternal


The following figure 2 demonstrates the different messages and listeners depending on which script is sending and which one is receiving.


Detailed Chrome Extension framework communication.

Detailed Chrome Extension framework communication.

This content is accurate and true to the best of the author’s knowledge and is not meant to substitute for formal and individualized advice from a qualified professional.

© 2021 DVM MSc Tania Frazao

Related Articles