Why webNavigation Listener failed for some websites?

问题

I am trying to use chrome extension to get some data from web of science. In one step, I want to create a new tab and wait until it loaded. So I add a webNavigation Listener after creating the tab. I found the listener works well only for some websites. If I use the target url (web of science) as the code below, I won't get the alert window. But if I use the target "https://stackoverflow.com/questions/ask", it gives the alert successfully. Why this happens? Could anyone advice the reason to me? Really thankful to it.

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>"
    ]
}

回答1:

The main problem is that urlMatches is a regular expression in RE2 syntax as you can see in the documentation so various special symbols in the URL like ? are interpreted differently. Solution: use urlEquals or other literal string comparisons.

There are other problems:

• The API is asynchronous so the tabs are created and queried later in the future in no predictable sequence. Solution: use the callback of create().
• All tabs are reported in webNavigation listener, not just the active one, so theoretically there's a problem of two identical URLs being reported in different tabs. Also the API filtering parameter cannot handle URLs with #hash part Solution: remember the tab id you want to monitor in a variable and compare it in the listener, and explicitly strip #hash part in the filter.
• The site may redirect the final URL of the page so it may not get reported due to your filter. Solution: specify only the host name in the filter.
• The tab that sends you messages or performs navigation may be inactive. Solution: use the tab id in the listener's parameters.

---

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 + '/'}],
      });
    });
  }
});

Notes:

• Avoid declaring content_scripts in manifest.json for all URLs if you only need processing on demand. Use programmatic injection in such cases.
• Instead of alert() use the proper debugging in devtools like breakpoints or console.log() of the background page (more info).

来源：https://stackoverflow.com/questions/57314419/why-webnavigation-listener-failed-for-some-websites