Chrome Extension only running properly in new tab

Question

I have just started a Chrome extension. I have this simple file structure

Manifest file looks like this

{ "manifest_version": 2, "name": "fu", "description": "block audio from videos set to autoplay", "version": "1", "author": "ddpf", "browser_action": {     "default_title": "Have a better day" }, "chrome_url_overrides" : {  "newtab": "newtab.html"},  "permissions": ["activeTab"]}

The newtab is very basic as of now, just hello world and linking to the js file

<!doctype html>
<html> 
    <head>   
        <title>Test</title>  
        </head>  <body>  
            <h1>Hello World!</h1>  
             <video>
                <iframe width="420" height="345" src="https://www.youtube.com/embed/tgbNymZ7vqY">
                </iframe>
            </video>
    <script src="popup.js"></script>

</body></html>

And the rather rudimentary JS code

var videos = document.querySelectorAll('video'); /*Loop*/

if (videos.length <= 1) {
  console.log("there have been no video elements to mute or remove")
}

else {
var i;
for (i = 0; i < videos.length; i++) {
    videos[i].style.display = 'none';
  console.log("there have been " + i +" video elements")
}
}


var totalNoOfResrouces = window.performance.getEntriesByType("resource").length;
 console.log("totalNoOfResrouces ")
if (totalNoOfResrouces.length <= 10) {
 console.log("well done")
}

else {

console.log("Too many telemetry and tracking and 3rd party, we will redirect this")

}

If I run this in a new tab, I do get a "hello world" rendered, the video and iframe are in the DOM (set to display:none, as desired) and I get this in the console.

there have been 0 video elements (this should show 1 instead of 0, why 0?)
popup.js:19 0                     (this seems ok but js line 26 should return the if clause condition on line 22, not the line 26 else clause ) 
popup.js:26 Too many telemetry and tracking and 3rd party scripts, we will redirect this /// This should show well done,

However the real problem is, the JS or the extension is not running on the new tab page if I change the URL or if I go to any tab and change the URL.

For testing I went to https://www.dailymail.co.uk/news/article-9106063/Biggest-teaching-union-calls-emergency-meeting.html , the mail has a criminal amount of auto play videos and lo and behold, they all auto play and there's nothing in the console.

On the above link they have a video element #vjs_video_2122_html5_api popping up on scrolling down and another video element with the html attribute data-mol-fe-video-preview. Both run, it looks like they calling many external services for ads on the video elements, many errors in the console, but none from my extension and the vids run none the less.

I have not paid the 5USD dev fee for google, it is ok if this only runs on my local machine for now, this is very far from publishable and a hobby project. But why does this only run in a fresh new tab?

Do I have to give permission to all tabs in the manifest.json file? And how do I do this? Thanks

[How to access the webpage DOM rather than the extension page DOM?](https://stackoverflow.com/a/4532567) — wOxxOm, Jan 02 '21 at 17:13
@wOxxOm you can include that reply as answer, I will give it the accepted answer, the link was very solid. I have managed to kill all video elements( btw , more than 20) and 15 iframe elements, not sure if those were recursive calls on the newspapers behalf or literally 15 elements, and the script even kills most ads, just not very elegant yet, thanks, you deserve to have the accepted answer — ptts, Jan 02 '21 at 17:59

score 1 · Accepted Answer · answered Jan 03 '21 at 17:29

You want the popup.js to get injected into every page you visit right? In that case just paste the below code into your manifest.js file. If you want to see the console.log entries, just open any tab page, open the devtools and the console.log entries will be there.

Content-scripts are injected into every page that matches the pattern in the matches array. In the case of the code below that will be "all-urls".

Another thing, if you want to give the extension permission to access all tabs, just remove "activeTab" and replace it with "<all_urls>"

{
    "manifest_version": 2,
    "name": "fu",
    "description": "block audio from videos set to autoplay",
    "version": "1",
    "author": "ddpf",
    "browser_action": {
        "default_title": "Have a better day"
    },
    "chrome_url_overrides": {
        "newtab": "newtab.html"
    },
    "content_scripts": [{
        "js": ["popup.js"],
        "matches": [
            "<all_urls>"
        ]
    }],
    "permissions": ["activeTab"]
}

Chrome Extension only running properly in new tab

1 Answers1