Chrome 扩展程序仅在新标签中正常运行答案

【问题标题】：Chrome Extension only running properly in new tabChrome 扩展程序仅在新标签中正常运行
【发布时间】：2021-01-04 01:29:35
【问题描述】：

我刚刚启动了一个 Chrome 扩展程序。我有这个简单的文件结构

清单文件如下所示

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

到目前为止，newtab 非常基本，只是 hello world 并链接到 js 文件

<!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>

还有相当基本的 JS 代码

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

否则 {

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

}

如果我在新选项卡中运行它，我会得到一个“hello world”渲染，视频和 iframe 在 DOM 中（设置为 display:none，根据需要），我在控制台中得到它。

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,

但真正的问题是，如果我更改 URL 或转到任何选项卡并更改 URL，JS 或扩展程序不会在新标签页上运行。

为了测试我去了https://www.dailymail.co.uk/news/article-9106063/Biggest-teaching-union-calls-emergency-meeting.html，邮件中有大量的自动播放视频，你瞧，它们都是自动播放的，控制台中什么都没有。

在上面的链接中，他们有一个视频元素 #vjs_video_2122_html5_api 在向下滚动时弹出，另一个视频元素具有 html 属性 data-mol-fe-video-preview。两者都运行，看起来他们为视频元素上的广告调用了许多外部服务，控制台中有许多错误，但我的扩展程序和视频都没有运行。

我还没有为谷歌支付 5 美元的开发费，如果它现在只在我的本地机器上运行就可以了，这离可发布和爱好项目还很远。但是为什么这只在新的标签页中运行呢？

我是否必须授予 manifest.json 文件中所有选项卡的权限？我该怎么做？谢谢

【问题讨论】：

How to access the webpage DOM rather than the extension page DOM?
@wOxxOm 您可以将该回复作为答案包含在内，我会给它接受的答案，链接非常可靠。我设法杀死了所有视频元素（顺便说一句，超过 20 个）和 15 个 iframe 元素，不确定这些是代表报纸的递归调用还是真正的 15 个元素，脚本甚至杀死了大多数广告，只是还不是很优雅，谢谢，你应该得到公认的答案

标签： javascript html google-chrome video google-chrome-extension

【解决方案1】：

您希望popup.js 注入您访问的每个页面，对吗？在这种情况下，只需将以下代码粘贴到您的 manifest.js 文件中。如果您想查看 console.log 条目，只需打开任何标签页，打开 devtools，console.log 条目就会出现。

内容脚本被注入到匹配匹配数组中的模式的每个页面中。在下面的代码中，这将是“all-urls”。

另外，如果你想授予扩展访问所有选项卡的权限，只需删除“activeTab”并将其替换为"<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"]
}

【讨论】：