选项卡 URL 更改后从后台回调到内容脚本

Question

我是 chrome 扩展的新手，我遇到了一个问题。 单击我的扩展程序图标时，我会运行一个脚本：

chrome.browserAction.onClicked.addListener(function(tab) { 
    chrome.tabs.executeScript({
        "file": "enterIonis.js"
    });
});

此脚本从打开的选项卡中获取一些信息，然后更改选项卡 url 以加载新页面。然后，此脚本需要等待新页面完全加载才能与之交互。为此，它打开一个端口并向使用chrome.tabs.onUpdated 侦听器的后台页面发送消息。背景页面应该向内容脚本发送消息/回调，告诉它现在可以与选项卡交互。

background.js：

var _port;
var goodUrl;


chrome.runtime.onConnect.addListener(function(port) {
  console.assert(port.name == "enterIonis");
  port.onMessage.addListener(function(msg) {
        goodUrl = msg.url;
        _port = port; 
    });
});

chrome.tabs.onUpdated.addListener(function ( tabId, changeInfo, tab ){ 
  if ( changeInfo.status === "complete" ){

    chrome.tabs.query({'active': true, 'lastFocusedWindow': true}, function (tabs) {
        var currentUrl = tab.url;
        if(currentUrl == goodUrl){
            //should send a callback to content script here
            _port.postMessage({result: "ok"});
        }
    }); 

  }
});

content_script.js

//interacting with DOM elements
...

// sending a message to background.js
var port = chrome.runtime.connect({name: "enterIonis"});
port.postMessage({url:href});
port.onMessage.addListener(function(msg){
    // here is where the message from the background telling the tab is ready should arrive
    alert(msg.result);
});

问题是当我尝试使用第一条消息中的端口时，我收到以下错误：Error in response to tabs.query: Error: Attempting to use a disconnected port object

如何重新连接端口？或者有没有其他方法可以实现我的目标？

Answer 1

tabs.executeScript() 注入到页面，而不是持久地注入到选项卡中

您必须单独将内容脚本注入新页面。使用tabs.executeScript() 注入脚本不会将脚本注入到选项卡中，该选项卡会在加载新网页时为选项卡保留。它将脚本注入到当前显示在指定选项卡中的 page 中。一旦该页面不再显示在该选项卡中，内容脚本就不再存在。

您说您的脚本“更改标签网址以加载新页面”，然后应该做其他事情，而它没有做。一旦新页面开始加载，您注入的内容脚本的上下文就会与旧网页的上下文一起被销毁。新页面加载后，您的内容脚本无法向后台脚本发送消息，因为您的内容脚本不再存在。