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

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

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

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

问题概述

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

1. 数据共享难题：它们各自拥有不同的执行环境，无法直接访问彼此的 JavaScript 变量或对象。
2. 事件监听问题：弹出页面关闭后，其事件监听器会被卸载，无法保持持久监听状态。
3. 权限隔离：内容脚本与弹出页面的权限各自独立，内容脚本无法直接访问弹出页面的 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;
});
1
2
3
4
5
6
7
8
9

弹出页面 (popup.js)：

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

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

背景脚本 (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;
});
1
2
3
4
5
6
7
8
9

内容脚本 (content.js)：

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

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

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

弹出页面 (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!"});
    });
});
1
2
3
4
5
6
7
8
9
10
11
12

内容脚本 (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!"});
    }
});
1
2
3
4
5
6
7

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;
});
1
2
3
4
5
6
7
8
9
10
11
12
13

弹出页面 (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);
    });
});
1
2
3
4
5
6
7
8
9
10
11
12

内容脚本 (content.js)：

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

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";
            }
        });
    });
});
1
2
3
4
5
6
7
8
9
10
11

总结

由于 Chrome 扩展的不同脚本运行环境是相互独立的，所以开发者在设计扩展时需要使用不同的通信机制来确保数据共享和功能协同。本文提供了多种解决方案，开发者可以根据需求选择最合适的方式：

1. chrome.runtime 消息传递
2. chrome.storage 数据持久化
3. chrome.tabs 标签控制与代码注入

希望本文能够帮助你在 Chrome 扩展开发中更好地处理弹出页面、背景脚本和内容脚本之间的通信问题！