background script

/extension/background.js

The background.js file is an essential component in the extension’s architecture, managing communication between the content script and the DevTools panel. It sets up listeners for various events, injects the content script into active tabs, and forwards messages from the content script to the DevTools panel.

Overview

The background script sets up listeners for the following events:

1. Connection from the DevTools panel
2. Tab activation
3. Messages from the content script
4. Context menu item clicks

Upon establishing a connection with the DevTools panel, the script injects the content script into the currently active tab.

Functions

devToolsListener(message)

This function is a listener for messages from the DevTools panel. It injects the content script into the tab specified by the message object.

chrome.runtime.onConnect.addListener(callback)

This listener waits for connections from the DevTools panel. Once a connection is established, the devToolsListener function is added as a message listener and the content script is injected into the active tab. The devToolsListener function is then removed when the DevTools disconnects.

chrome.tabs.onActivated.addListener(callback)

This event listener listens for tab activation events. When a tab is activated, the content script is injected into the tab.

chrome.runtime.onMessage.addListener(callback)

This event listener listens for messages from the content script. It handles the events and sends messages to the DevTools panel through the established connection.

chrome.contextMenus.onClicked.addListener(callback)

This event listener listens for context menu item clicks. When the context menu item is clicked, the Trydent window is opened.

Code Snippets

devToolsListener

/**
 * Connection to the devtools page
 * @type {chrome.runtime.Port}
 */
let devToolsConnection;