chrome.webNavigation.onCompleted - Event firing multiple times

Question

I load plagin for Inject code to page, the manifest code:

{
  "name": "any",
  "version": "1.0",
  "permissions": [
    "webNavigation",
    "*://*/*" 
  ],
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "manifest_version": 2
}

And the background.js:

chrome.webNavigation.onCompleted.addListener(function(details) {
    chrome.tabs.executeScript(details.tabId, {
        code: 'console.log("A")'
    });
});

The problem is the event firing a few times after page load, I want the event just one time. What is my mistake? I would appreciate any help on.

Answer 1

chrome.webNavigation.onCompleted is invoked even when the navigation occurs in a subframe. One way to capture it only once is to implement your code with a condition for frame id. frame id = 0 corresponds to the parent frame. Your code would look like :

chrome.webNavigation.onCompleted.addListener(function(tab) {
    if(tab.frameId==0){
    //logic
    }
});

detailed documentation available here : https://developers.chrome.com/extensions/webNavigation

Answer 2

The best practice is to use named functions, register them when ready and, on the performance point of view, only for the requested URLs (if possible). in the next example the listener is getting removed before registered plus only if the filter contains URLs:

if (filter.url.length < 1) {
    resolve(dictionary);
    return;
}

if (chrome.webNavigation.onBeforeNavigate.hasListener(onBeforeNavigate))
    chrome.webNavigation.onBeforeNavigate.removeListener(onBeforeNavigate);
chrome.webNavigation.onBeforeNavigate.addListener(onBeforeNavigate, filter);

and the named should follow this pattern:

const onBeforeNavigate = (details) => {
    if (details.frameId > 0)
        return;
...
}

see more info here: https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/webNavigation/onCompleted