Question

我尝试制作一个简单的Chrome扩展程序，通过单击几个按钮来激活YouTube Dark Mode。

alert("Clicker");

//document.getElementsByClassName("button.style-scope.ytd-topbar-menu-button-renderer")[0].click();
var buttons = Array.from(document.getElementsByClassName("button.style-scope.ytd-topbar-menu-button-renderer").innerHTML);

console.log(buttons[0]);
buttons[0].click();

我正在https://www.youtube.com/feed/trending上对此进行测试。我有一个manifest.json：

{
    "manifest_version": 2,

    "name": "Youtube Dark Mode",
    "version": "1.0.0",

    "permissions": [
        "https://www.youtube.com/*",
        "tabs",
        "activeTab"
    ],

    "background": {
        "scripts": ["background.js"]
    },

    "browser_action": {
        "default_title": "Engage Youtube Dark Mode."
    },

    "content_scripts": [
    {
      "matches": ["https://www.youtube.com/*"],
      "js": ["content.js"]
    }]
}

和background.js：

chrome.browserAction.onClicked.addListener(function(tab) {
    //alert("Boat");

    chrome.tabs.executeScript(null, {file: "clicker.js"});
});

我已经在这里阅读了很多类似的帖子，但他们的建议都没有对我有用（可能是因为我不太了解Javascript）。问题是.click不是buttons[0]的属性，或者buttons数组未定义。

这段代码本质上是试图将$("button.ytd-topbar-menu-button-renderer").click();放到扩展表单中，因为我知道jQuery在开发者控制台中有效。

非常感谢任何帮助。谢谢！

Answer 1

请勿在className中使用.

如果您想使用选择器document.getElementsByClassName进行选择，请使用"button.style-scope.ytd-topbar-menu-button-renderer"。

为什么document.getElementsByClassName会不断返回未定义的数组？

1 个答案: