javascript - 选项卡 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);
});

问题是，当我尝试使用第一条消息中的端口时，出现以下错误:响应 tabs.query 时出错:错误:尝试使用已断开连接的端口对象

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

Answer 1

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

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

您说您的脚本“更改选项卡网址以加载新页面”，然后应该执行其他操作，但它没有执行。一旦新页面开始加载，您注入(inject)的内容脚本的上下文就会与旧网页的上下文一起被销毁。新页面加载后，您的内容脚本无法向后台脚本发送消息，因为您的内容脚本不再存在。