如何使用 Google Chrome for Youtube 运行扩展程序？答案

【问题标题】：How can I run a extension with Google Chrome for Youtube?如何使用 Google Chrome for Youtube 运行扩展程序？
【发布时间】：2019-01-12 15:34:41
【问题描述】：

你好，我想删除出现在 YouTube 上的缩略图。我为此使用以下代码。

while (true) {
    $("ytd-thumbnail").remove()
}

当我将此代码粘贴到控制台时，所有缩略图都将被删除。我希望它通过添加扩展在背板上工作。我正在准备的插件代码如下。

manifest.json;

{
    "manifest_version": 2,

    "name": "test",
    "description": "test extension",
    "version": "1.0",

    "browser_action": {
        "default_popup": "popup.html"
    },
    "permissions": [
        "activeTab"
    ]
}

popup.html

<!doctype html>
<html>
    <head>
    <title>TEST</title>
    <script src="popup.js"></script>
    </head>
    <body>
        <h1>TEST</h1>
        <button id="checkPage">Check !</button>
    </body>
</html>

popup.js

document.addEventListener('DOMContentLoaded', function() {
    var checkPageButton = document.getElementById('checkPage');

    checkPageButton.addEventListener('click', function() {
        chrome.tabs.getSelected(null, function(tab) {
            d = document;

            while (true) {
                $("ytd-thumbnail").remove()
            }
        });
    }, false);
}, false);

当我按下 checkPage 按钮时，没有任何反应。但是当我添加控制台时，此代码有效。问题是什么？提前致谢。

【问题讨论】：

自己做一些调试。 console.log($)。 console.log($('ytd-thumbnail'))。它包含jquery吗？它是否包含您正在寻找的元素？
没有 jQuery。我正在学习新的 .js，但我不明白。我尝试通过尝试和询问来学习。 @弗兰克Z
我会先研究基本调试，然后再问更多问题。 console.log() 和调试器是你的朋友。如果某些事情不是预期的，请添加断点，在您认为有问题的地方注销。它是否包含您所期望的内容？不？然后找出原因。谷歌“为什么 $ 在我的 chrome 扩展程序中不起作用”。

标签： javascript html json google-chrome-extension

【解决方案1】：

扩展有几个问题：

您正在尝试使用 $ 即 jquery，它在您的 popup.js
您正在尝试访问属于到 youtube 页面，而不是你的 popup.html。所以，即使你更换 $ 使用 document.querySelector ，您将找不到这些元素。

我创建了一个看起来像这样的工作版本。我没有包含与您相同的 popup.html。

manifest.json

{
  "manifest_version": 2,  
  "name": "Hello Extensions",
  "description" : "Base Level Extension",
  "version": "1.0",
  "browser_action": {    
    "default_icon": "hello_extensions.png",
    "default_popup": "popup.html"
  },
  "content_scripts": [
  {
    "matches": ["<all_urls>"],     
    "js": ["background.js"],
    "all_frames" : true

  }
 ],
 "permissions": [
    "activeTab",  
    "tabs"
 ]
}

2.popup.js

document.addEventListener('DOMContentLoaded', function() 
{
   var checkPageButton = document.getElementById('checkPage');
   checkPageButton.addEventListener('click', function() 
    {

        chrome.tabs.query({"active":true}, function (tabs){             

           chrome.tabs.sendMessage(tabs[0].id, "removeThumbnails", function (response) {
                    });             
            });
    });         
});

单击按钮时，检索活动选项卡并向其发送“removeThumbnails”消息。

3.background.js

chrome.runtime.onMessage.addListener(function(message, callback) {

    if (message == "removeThumbnails")
    {       
        var elements = document.querySelectorAll("ytd-thumbnail");
        elements.forEach(a => a.parentNode.removeChild(a));
    }
});

background.js 是内容脚本，在 youtube 页面中运行。它现在可以访问 youtube 页面中的所有 dom 元素。当我们收到“removeThumbnails”消息时，获取所有 ytd-thumbnail 元素并将它们从页面中删除。

【讨论】：

非常感谢您的宝贵回复。这当然有效，我学会了如何。我想根据你的知识问你2个问题。问题一：如何在背板上连续运行这段代码（background.js）？当我们单击时图像被隐藏，但当我们再次加载页面或加载更多时，图像再次显示。我们需要再次按下按钮。 @Nish26
问题2：这样的视频可以删除吗？我将此代码添加到我的 background.js 文件中。按钮用于删除视频，但我们正在删除整个 YouTube 页面，因为我使用了错误的名称。 var elements = document.querySelectorAll ("ytd-watch-flexy"); elements.forEach (a => a.parentNode.removeChild (a));不用担心。当我们点击按钮时，我想我们可以使用 .js 代码来降低视频高度。例如;高度：240 像素；到高度：0 px；我们将使视频的大小不会出现 0 px 但声音会出现。 @Nish26
对于1，可以使用setInterval api 。如果您这样做，您应该考虑修改您的清单以仅在 youtube.com 上运行您的内容脚本。对于 2，我不确定我是否正确理解了您的问题。据我了解，也许您可以只使用 css 可见性来控制视频元素是否可见。