Question

我是chrome-extension开发的新手。我按照了一些教程，后来我正在玩extension。有一些事情困扰我这个扩展。

重现的步骤：

并排打开devtools两页
按照github页面中提到的步骤操作。
当您点击（页面中的任何一个）＆＃39; 插入按钮以从页面向devtools发送消息＆＃39;按钮在面板中，您可以看到Html页面发生了变化。
然后单击页面中显示的按钮。您可以在两个面板中看到按钮/文本已更改。

是否有任何过滤器可以限制此项并且仅更改所点击页面上的按钮/文字？我知道这是因为background.js页面中的port.postMessage(message);而发生的。

我找到了this，但我无法让它发挥作用。

任何帮助将不胜感激：）

Answer 1

通讯方案很简单：

您的devtools面板打开一个到后台页面的端口
后台页面侦听该端口并存储tabId-to-port映射的查找表
后台页面还会侦听来自内容脚本的消息，并使用上面的查找表将消息路由到相应的端口通道

<强> devtools-panel.js

var port = chrome.runtime.connect();

port.onMessage.addListener(message => {
    $id('insertmessagebutton').innerHTML = message.content;
});

$id('executescript').onclick = () =>
    runContentScript({code: "console.log('Content script executed')"});

$id('insertscript').onclick = () =>
    runContentScript({file: "inserted-script.js"});

$id('insertmessagebutton').onclick = () => {
    runContentScript({code: "document.body.innerHTML='<button>Send to panel</button>'"});
    runContentScript({file: "messageback-script.js"});
};

function runContentScript(params) {
    port.postMessage(
        Object.assign({
            tabId: chrome.devtools.inspectedWindow.tabId,
        }, params)
    );
}

function $id(id) {
    return document.getElementById(id);
}

<强> background.js

var tabPorts = {};

chrome.runtime.onConnect.addListener(port => {
    let tabId;
    port.onMessage.addListener(message => {
        if (!tabId) {
            // this is a first message from devtools so let's set the tabId-port mapping
            tabId = message.tabId;
            tabPorts[tabId] = port;
        }
        if (message.code || message.file) {
            delete message.tabId;
            chrome.tabs.executeScript(tabId, message);
        }
    });
    port.onDisconnect.addListener(() => {
        delete tabPorts[tabId];
    });
});

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
    const port = sender.tab && tabPorts[sender.tab.id];
    if (port) {
        port.postMessage(message);
    }
});

chrome.tabs.onRemoved.addListener(tabId => {
    delete tabPorts[tabId];
});

chrome.tabs.onReplaced.addListener((newTabId, oldTabId) => {
    delete tabPorts[oldTabId];
});

在chrome-extension开发中限制与选定tabId的通信

1 个答案: