Chrome Extension - Content Script being injected multiple times per single page load

Question

I'm having some issues with a content script being injected to the same page multiple times in my Chrome extension.

I am injecting the content script from my "background.html" page, on Tab change:

chrome.tabs.onUpdated.addListener(function(tabId,changeInfo,tab){ 
    chrome.tabs.getSelected(null,function(tab){
         // Do some stuff
         chrome.tabs.executeScript(null, { code: code}, function(result){

...etc

Inside the content script, I have some console.log commands

The problem is that when I load a SINGLE page, I am seeing each of the logs show up in the console 2-4 times.

It's pretty clear to me that this is happening because of iframes within the page, I think at least... My question is WHY?

I have seen in the documentation that "all_frames" (content script permissions array in manifest) should be set to "false" by default, resulting in the content script only being injected to the top frame of the page, but this is simply not happening!

Why is it being injected multiple times? Do I need to physically set "all_frames" to false?

Secondly:

Is there any way to tell if the page that the extension is trying to inject the content script to is an iframe or top from WITHIN the "background.html" page?

I have tried

if(window.top === window){ console.log('whatever'); }

And found that it does NOT work 100% of the time. Even when I have that conditional around the rest of my code block (around chrome.tabs.executeScript() ), I am still seeing the content script injected multiple times....

Any ideas or suggestions would be greatly appreciated! :)

Answer 1

onUpdated fires each time a tab's state changes. This includes when it is loading and done loading, which explains the many log statements. You need to check for what changed (the URL changed, it loaded, etc.) each time the event fires.