【教程向】从零开始创建浏览器插件（三）解决 Chrome 扩展中弹出页面、背景脚本、内容脚本之间通信的问题

第三步：解决 Chrome 扩展中弹出页面、背景脚本、内容脚本之间通信的问题

Chrome 扩展开发中，弹出页面（Popup）、背景脚本（Background Script）、内容脚本（Content Script）各自拥有独立的 JavaScript 执行环境。这种设计可以增强安全性，但同时也带来了数据共享和传递上的问题。

本文将详细探讨弹出页面、背景脚本、内容脚本之间的通信方式，并提供解决方案的代码示例。

在这里插入图片描述

问题概述

弹出页面、背景脚本、内容脚本的独立运行环境带来了以下问题：

数据共享难题：它们各自拥有不同的执行环境，无法直接访问彼此的 JavaScript 变量或对象。
事件监听问题：弹出页面关闭后，其事件监听器会被卸载，无法保持持久监听状态。
权限隔离：内容脚本与弹出页面的权限各自独立，内容脚本无法直接访问弹出页面的 DOM 元素，反之亦然。

解决方案：相互通信的方式

Chrome 扩展提供了多种通信方式来解决这些问题：

1. 使用 `chrome.runtime` 消息传递

chrome.runtime API 提供了弹出页面、背景脚本和内容脚本之间通信的机制。

弹出页面与背景脚本的通信

背景脚本 (background.js)：

// background.js
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
    if (message.type === "getData") {
        // 获取数据并通过 sendResponse 返回给弹出页面
        const data = {info: "background data"};
        sendResponse(data);
    }
    return true;
});

弹出页面 (popup.js)：

// popup.js
document.addEventListener("DOMContentLoaded", function () {
    // 向背景脚本请求数据
    chrome.runtime.sendMessage({type: "getData"}, (response) => {
        console.log("Received data from background:", response);
    });
});

内容脚本与背景脚本的通信

背景脚本 (background.js)：

// background.js
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
    if (message.type === "fetchContentData") {
        // 从后台处理数据并返回给内容脚本
        const data = {content: "Processed data from background"};
        sendResponse(data);
    }
    return true;
});

内容脚本 (content.js)：

// content.js
chrome.runtime.sendMessage({type: "fetchContentData"}, (response) => {
    console.log("Received data from background:", response);
});

弹出页面与内容脚本的通信

直接通信方式不可行，但可以通过背景脚本作为中介实现通信。

弹出页面 (popup.js)：

// popup.js
function sendMessageToContentScript(tabId, message) {
    chrome.tabs.sendMessage(tabId, message, (response) => {
        console.log("Response from content script:", response);
    });
}

document.addEventListener("DOMContentLoaded", function () {
    chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
        sendMessageToContentScript(tabs[0].id, {type: "greeting", text: "Hello from popup!"});
    });
});

内容脚本 (content.js)：

// content.js
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
    if (message.type === "greeting") {
        console.log("Received message from popup:", message.text);
        sendResponse({text: "Hello from content script!"});
    }
});

2. 使用 `chrome.storage` 共享数据

chrome.storage API 允许持久化并共享数据，以便在不同环境间传递。

背景脚本 (`background.js`)：

// background.js
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
    if (message.type === "saveData") {
        chrome.storage.local.set({sharedData: message.data}, () => {
            sendResponse({status: "Data saved"});
        });
    } else if (message.type === "loadData") {
        chrome.storage.local.get("sharedData", (result) => {
            sendResponse({data: result.sharedData});
        });
    }
    return true;
});

弹出页面 (`popup.js`)：

// popup.js
document.addEventListener("DOMContentLoaded", function () {
    // 向背景脚本请求数据
    chrome.runtime.sendMessage({type: "loadData"}, (response) => {
        console.log("Data loaded from storage:", response.data);
    });

    // 保存数据到 storage
    chrome.runtime.sendMessage({type: "saveData", data: "New shared data"}, (response) => {
        console.log(response.status);
    });
});

内容脚本 (`content.js`)：

// content.js
chrome.runtime.sendMessage({type: "loadData"}, (response) => {
    console.log("Data loaded from storage:", response.data);
});

3. 使用 `chrome.tabs` API 与当前活动标签通信

chrome.tabs API 可以帮助我们确定活动标签，并使用 chrome.scripting 在该标签中注入代码。

弹出页面 (`popup.js`)：

// popup.js
document.addEventListener("DOMContentLoaded", function () {
    chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
        chrome.scripting.executeScript({
            target: {tabId: tabs[0].id},
            func: () => {
                document.body.style.backgroundColor = "pink";
            }
        });
    });
});