WXT + React

This template should help get you started developing with React in WXT.

Installation and Running Guide

1. Install Dependencies:

   First, ensure you have pnpm installed. If not, you can install it using npm:

   npm install -g pnpm

   Then, install the project dependencies:

   pnpm install

2. Run the Extension in Development Mode:

   Use the following command to start the extension in development mode:

   pnpm dev

   This command should start the development server and prepare the extension to be loaded in the browser.

3. Load the Extension in the Browser:

   When launching from terminal WXT makes it automatically but in case of failure do the following manual steps:

   • Open your browser (e.g., Google Chrome).
   • Go to chrome://extensions/.
   • Enable "Developer mode" in the top right corner.
   • Click "Load unpacked" and select the output folder generated by the pnpm dev command.

4. Open the Extension Debug Console:

   • After loading the extension, click the extension icon in the browser toolbar.
   • Right-click on the extension popup and select "Inspect" to open the popup's debug console.
   • For the background script, go to chrome://extensions/, find your extension, and click "Inspect view" in the background section.

5. Test Messaging Between Popup and Background:

   • In the popup's debug console, you can add code to send messages to the background script using webext-bridge.
   • In background.ts, ensure you are listening for messages correctly.

   Example of Sending a Message from the Popup:

   import { sendMessage } from 'webext-bridge/popup'
   
   
    const response = await sendMessage(
      "ACTION",
      {
        data: url,
      },
      "background"
    )
   
   // Call this function in response to an event, such as a button click

   Example of Receiving a Message in the Background:

   import { onMessage } from 'webext-bridge/background';
   
   export default defineBackground(() => {
     console.log('Hello background!', { id: browser.runtime.id });
   
    onMessage("ACTION", runAction);
   
    async function runAction({ data }) {
        console.log("Received message from popup:", data);
        return {
        message: `Received message: ${data}`,
        };
    }
   });

6. Check the Logs:

   • In the popup's debug console, verify that the message is being sent and the response is being received.
   • In the background's debug console, verify that the message is being received and the response is being sent back.

By following these steps, you should be able to see the logs of communication between the popup and the background script using webext-bridge.