Chrome 仅扩展运行在新标签页中正确

Question

我刚刚开始 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 和 linking 到 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.

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

在上面的 link 中，他们有一个视频元素 #vjs_video_2122_html5_api 在向下滚动时弹出，另一个视频元素具有 html 属性 data-mol-fe-video-preview . 运行，看起来他们为视频元素上的广告调用了许多外部服务，控制台中有很多错误，但是 none 来自我的扩展和视频运行 none越少。

我还没有为 google 支付 5 美元的开发费用，如果这现在在我的本地机器上只有运行就可以了，这远非可发布和业余项目。但是为什么这只运行在一个新的标签页中？

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

Answer 1

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

内容脚本被注入到与 matches 数组中的模式相匹配的每个页面中。对于下面的代码，它将是“所有 url”。

另一件事，如果你想给扩展访问所有标签的权限，只需删除“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"]
}

Chrome 仅扩展运行在新标签页中正确

Chrome Extension only running properly in new tab

html

javascript

video

google-chrome

google-chrome-extension

Chrome 仅扩展 运行 在新标签页中正确

Chrome Extension only running properly in new tab

html

javascript

video

google-chrome

google-chrome-extension

Chrome 仅扩展运行在新标签页中正确