Javascript 为什么某些网站的webNavigation Listener失败？

我正在尝试使用chrome扩展从科学网获取一些数据。在一个步骤中，我想创建一个新选项卡并等待它加载。因此，我在创建选项卡后添加了一个webNavigation侦听器。我发现听众工作得很好 仅适用于某些网站。如果我使用目标url（科学网）作为下面的代码，我将无法获得警报窗口。但如果我使用目标“”，它将成功发出警报。为什么会发生这种情况？谁能告诉我原因吗？真的很感谢

background.js

chrome.browserAction.onClicked.addListener(function(tab) {
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
      var activeTab = tabs[0];
      tabId = activeTab.id;
      chrome.tabs.sendMessage(tabId, {"message": "clicked_browser_action"});
    });
});

var link = 'https://apps.webofknowledge.com/OneClickSearch.do?product=UA&search_mode=OneClickSearch&excludeEventConfig=ExcludeIfFromFullRecPage&SID=7ENVgUT3nRKp41VVlhe&field=AU&value=Leroux,%20E.'; // failed in this url

//var link = 'https://stackoverflow.com/questions/ask'; //success in this url
function listener1(){
    chrome.webNavigation.onCompleted.removeListener(listener1);
    chrome.tabs.sendMessage(tabId, {"message": "to content"});
    alert('listener succeed');
}

chrome.runtime.onMessage.addListener(
    function(request, sender, sendResponse) {
        if (request.joke == 'content initial'){
            chrome.tabs.create({ url: link });
            chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
                var activeTab = tabs[0];
                tabId = activeTab.id;
            });
            //alert(link);
            chrome.webNavigation.onCompleted.addListener(listener1, {url: [{urlMatches : link}]});
        }
    }
)

content.js

chrome.runtime.onMessage.addListener(
    function(request, sender, sendResponse) {
        if( request.message === "clicked_browser_action" ) {
            console.log('content initial');
            chrome.runtime.sendMessage({joke: 'content initial'}, function(response) {
            });
        }   
    }
)

manifest.json

{
    "manifest_version": 2,
    "name": "citation",
    "version": "1",

    "background": {
        "scripts": ["background.js"],
        "persistent": false
    },
    "browser_action": {},

    "content_scripts": [{
        "matches": ["<all_urls>"],
        "run_at": "document_idle",
        "js": ["content.js"]
    }], 
    "permissions": [
        "downloads",
        "webNavigation",
        "tabs",
        "<all_urls>"
    ]
}

{
“清单版本”：2，
“名称”：“引文”，
“版本”：“1”，
“背景”：{
“脚本”：[“background.js”]，
“持续”：假
},
“浏览器操作”：{}，
“内容脚本”：[{
“匹配项”：[“”]，
“运行时间”：“文件空闲”，
“js”：[“content.js”]
}], 
“权限”：[
“下载”，
“网络导航”，
“标签”，
""
]
}

主要问题是

urlMatches

是RE2语法中的正则表达式，您可以从中看到，URL中的各种特殊符号，如

？

的解释不同。解决方案：使用

urlEquals

或其他文字字符串比较

还有其他问题：

• API是异步的，因此选项卡将在以后创建和查询，而不是以可预测的顺序进行。解决方案：使用create（）的回调
• 所有选项卡都在webNavigation listener中报告，而不仅仅是活动选项卡，因此理论上存在两个相同URL在不同选项卡中报告的问题。此外，API筛选参数无法使用

  #hash

  部分解决方案处理URL：记住要在变量中监视的选项卡id，并在侦听器中进行比较，然后在筛选器中显式删除#hash部分
• 该站点可能会重定向页面的最终URL，因此由于您的筛选，可能不会报告该页面。解决方案：仅在筛选器中指定主机名
• 向您发送消息或执行导航的选项卡可能处于非活动状态。解决方案：在侦听器的参数中使用选项卡id

---

注:

• 如果您只需要按需处理，请避免在manifest.json中为所有URL声明

  content\u脚本。在这种情况下使用

• 在devtool中使用适当的调试，例如断点或后台页（）的

  console.log（）

  ，而不是alert（）

---

非常感谢，但这对我来说有点复杂，我需要时间来学习。

chrome.browserAction.onClicked.addListener(tab => {
  chrome.tabs.sendMessage(tab.id, {message: 'clicked_browser_action'});
});

var link = '...............';

chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
  if (msg.joke === 'content initial') {
    chrome.tabs.create({url: link}, tab => {
      chrome.webNavigation.onCompleted.addListener(function onCompleted(info) {
        if (info.tabId === tab.id && info.frameId === 0) {
          chrome.webNavigation.onCompleted.removeListener(onCompleted);
          chrome.tabs.sendMessage(tab.id, {message: 'to content'});
          console.log('listener succeeded');
        }
      }, {
        url: [{urlPrefix: new URL(link).origin + '/'}],
      });
    });
  }
});