Javascript 点击Twitch上的按钮的Chrome扩展_Javascript_Google Chrome Extension_Twitch

Javascript 点击Twitch上的按钮的Chrome扩展

javascript google-chrome-extension

Javascript 点击Twitch上的按钮的Chrome扩展,javascript,google-chrome-extension,twitch,Javascript,Google Chrome Extension,Twitch,我是一个java程序员爱好者，刚刚开始学习javascript来实现这个扩展我正在尝试在chrome中创建一个扩展，当我单击扩展中的按钮时，它将单击Twitch上聊天盒旁边的聊天设置按钮实际上我希望它点击points按钮，但是该按钮随机出现，所以我用settings按钮来测试它我想可能是按钮类的名称不正确，但我无法找出正确的名称。我不想使用getElementsByID（），因为我的扩展会弄乱ID manifest.json { "manifest_version": 2, "nam

我是一个java程序员爱好者，刚刚开始学习javascript来实现这个扩展

我正在尝试在chrome中创建一个扩展，当我单击扩展中的按钮时，它将单击Twitch上聊天盒旁边的聊天设置按钮

实际上我希望它点击points按钮，但是该按钮随机出现，所以我用settings按钮来测试它

我想可能是按钮类的名称不正确，但我无法找出正确的名称。我不想使用getElementsByID（），因为我的扩展会弄乱ID

manifest.json

{
"manifest_version": 2,

  "name": "Twitch Point Clicker",
  "description": "This extension collects points on Twitch for you",
  "version": "1.0",

  "browser_action": {
   "default_icon": "icon.png",
   "default_popup": "popup.html"
  },
  "permissions": [
   "activeTab",
   "tabs",
   "<all_urls>"
   ]
}

{
    "manifest_version": 2,

    "name": "Twitch Point Clicker",
    "description": "This extension collects points on Twitch for you",
    "version": "1.0",

    "browser_action": {
        "default_icon": "icon.png",
        "default_popup": "popup.html"
    },
    "permissions": [
        "tabs",
        "<all_urls>"
    ]
}

utilities.js

function clickButton() {
    var activityTab = document.getElementsByClassName("tw-icon__svg")[19];
    activityTab.click();
}

clickButton();

我没有收到任何错误消息，但当我运行扩展时，它什么也不做。

当我在开发人员控制台中手动尝试执行您的

clickButton

方法时，我得到以下结果：

>> document.getElementsByClassName("tw-icon__svg")[19].click()
TypeError: document.getElementsByClassName(...)[19].click is not a function

您似乎通过使用此查询选择的元素是svg元素，它没有此功能。但是，它的父项是

单击可以：
>> document.getElementsByClassName("tw-icon__svg")[19].parentNode.click()
// I can see the menu open

我通过使用Bob的建议并进行故障排除，解决了这个问题。主要问题是引用他提到的正确元素。我将utilities.js与popup.js合并。代码看起来像这样
manifest.json
{
"manifest_version": 2,

  "name": "Twitch Point Clicker",
  "description": "This extension collects points on Twitch for you",
  "version": "1.0",

  "browser_action": {
   "default_icon": "icon.png",
   "default_popup": "popup.html"
  },
  "permissions": [
   "activeTab",
   "tabs",
   "<all_urls>"
   ]
}

{
    "manifest_version": 2,

    "name": "Twitch Point Clicker",
    "description": "This extension collects points on Twitch for you",
    "version": "1.0",

    "browser_action": {
        "default_icon": "icon.png",
        "default_popup": "popup.html"
    },
    "permissions": [
        "tabs",
        "<all_urls>"
    ]
}

啊，接得好。当我尝试运行parentNode版本时，我得到：Uncaught TypeError:无法读取在1:52处未定义的属性“parentNode”。我想我需要另一种方法来找到我正在寻找的元素，比如使用XPath。你的解决方案确实有效。我现在的问题是，由于某种原因，我的utilities.js文件在加载时没有显示在扩展名中，即使它在文件夹中。谢谢你的帮助。
<!doctype html>
<html>
  <head>
    <title>Twitch Point Clicker</title>
  </head>
  <body>
    <h1>Twitch Point Clicker</h1>
    <button id="checkPage">Click Settings</button>
    <script src="popup.js"></script>
  </body>
</html>

function injectTheScript() {
    chrome.tabs.query({url: "https://www.twitch.tv/*"}, function(tabs) {
        chrome.tabs.executeScript( {code: "document.querySelectorAll(\"[data-a-target='chat-settings']\")[0].click();"});
    });
}
document.getElementById('checkPage').addEventListener('click', injectTheScript);