> ## Documentation Index
> Fetch the complete documentation index at: https://trydent.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# 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

<CodeGroup>
  ```javascript devToolsListener theme={null}
  /**
   * Connection to the devtools page
   * @type {chrome.runtime.Port}
   */
  let devToolsConnection;

  ```

  ```javascript chrome.runtime.onConnect.addListener theme={null}
  /**
   * Listener for connection from devtools page
   * Executes the content script upon connection and sets up message listeners
   * @see https://developer.chrome.com/docs/extensions/reference/runtime/#event-onConnect
   * @listens chrome.runtime.onConnect
   * @param {chrome.runtime.Port} connection - connection to devtools page
   */
  chrome.runtime.onConnect.addListener((connection) => {
    devToolsConnection = connection;

    /**
     * Listener function for messages fromt the devtools script
     * Injects a content script into the tab specified by the message
     *
     * @param {Object} message - The message object
     */
    const devToolsListener = function (message) {
      // console.log('we are in background.js');

      chrome.scripting.executeScript({
        target: { tabId: message.tabId },
        files: [message.scriptToInject],
      });
    };

    /**
     * Listener for tab activation events
     * Injects the content script into the activated tab
     *
     * @listens chrome.tab.onActivated
     */
    chrome.tabs.onActivated.addListener(() => {
      // console.log('changed to tab: ', tabId);
      chrome.scripting.executeScript({
        target: { tabId: message.tabId },
        files: [message.scriptToInject],
      });
    });

    // Add devToolsListener function as a listener for messages from the DevTools script
    devToolsConnection.onMessage.addListener(devToolsListener);

    // Remove devToolsListener function from listeners when the DevTools disconnects
    devToolsConnection.onDisconnect.addListener(() => {
      devToolsConnection.onMessage.removeListener(devToolsListener);
    });
  });
  ```

  ```javascript chrome.runtime.onMessage.addListener theme={null}
  /**
   * Listener for messages from the content scripts
   * Handles events and sends messages to the devtools connection
   *
   * @listens chrome.runtime.onMessage
   * @param {Object} message - The message object
   */
  chrome.runtime.onMessage.addListener((message) => {
    // Check event and proceed message accordingly
    switch (message.action) {
      case 'click':
        // console.log('Clicked, message: ', message);
        break;
      case 'focus':
        // console.log('Focused, message: ', message);
        break;
      case 'blur':
        // console.log('Blurred, message: ', message);
        break;
      case 'change':
        // console.log('Changed, message: ', message);
        break;
      case 'keydown':
        // console.log('keydown, message: ', message);
        break;
      default:
        // console.log('Unknown event, message: ', message);
    }
    if (devToolsConnection) {
      devToolsConnection.postMessage(message);
    } else {
      // console.error('devToolsConnection is not established yet');
    }
  });
  ```

  ```javascript chrome.contextMenus.onClicked.addListener theme={null}
  /**
   * Listener for context menu item clicks
   * Opens the Trydent window when the context menu item is clicked
   *
   * @listens chrome.contextMenus.onClicked
   * @param {Object} info - Information about the context menu item that was clicked
   */
  chrome.contextMenus.onClicked.addListener(({ menuItemId }) => {
    const options = {
      type: 'panel',
      left: 0,
      top: 0,
      width: 1000,
      height: 1000,
      url: chrome.runtime.getURL('panel.html'),
    };
    if (menuItemId === 'trydent-window') chrome.windows.create(options);
  });

  ```

  ```javascript chrome.contextMenus.create theme={null}
  // Create a context menu item for Trydent
  chrome.contextMenus.create({
    id: 'trydent-window',
    title: 'Trydent',
    contexts: ['all'],
  });
  ```
</CodeGroup>