单击Twitch上的按钮的Chrome扩展程序

Question

I'm a hobbyist java programmer that just started learning javascript to make this extension. 我是一名业余Java程序员，刚开始学习javascript进行此扩展。

I'm trying to make an extension in chrome that will click the chat settings button by the chatbox on Twitch when I click the button in my extension. 我正在尝试使用chrome扩展程序，当我单击扩展程序中的按钮时，它将单击Twitch上的聊天框的聊天设置按钮。

I actually want it to click the points button but that button appears randomly so I'm testing it with the settings button instead. 我实际上希望它单击点按钮，但是该按钮是随机出现的，因此我正在使用设置按钮对其进行测试。

I think it might be that the name of the class of the button is incorrect but I can't figure out the correct name. 我认为可能是按钮类的名称不正确，但我无法弄清楚正确的名称。 I would prefer not to use getElementsByID() because I have extensions that mess with the IDs. 我不想使用getElementsByID（），因为我的扩展名与ID混淆。

manifest.json 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>"
   ]
}

popup.html popup.html

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

popup.js popup.js

function injectTheScript() {
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
        chrome.tabs.executeScript(tabs[0].id, {file: "utilities.js"});
    });
}
document.getElementById('checkPage').addEventListener('click', injectTheScript);

utilities.js utilities.js

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

clickButton();

I don't get any error messages but the extension just does nothing when I run it. 我没有收到任何错误消息，但是运行该扩展程序后它什么也没做。

Answer 1

When I manually try to execute your clickButton method in the developer console, I get the following result: 当我尝试在开发人员控制台中手动执行clickButton方法时，得到以下结果：

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

The element you seem to select by using this query is an svg element, which doesn't have this function. 您似乎通过使用此查询选择的元素是svg元素，没有此功能。 Its parent however is click able: 但是其父级可以click ：

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

Answer 2

I fixed this issue by using Bob's advice and doing troubleshooting. 我通过使用Bob的建议并进行故障排除来解决此问题。 The main problem was referencing the correct element as he mentioned. 他提到的主要问题是引用了正确的元素。 I merged utilities.js with popup.js. 我合并了Utility.js和popup.js。 Code looks like this. 代码看起来像这样。

manifest.json 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": [
        "tabs",
        "<all_urls>"
    ]
}

popup.html popup.html

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

popup.js popup.js

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);

单击Twitch上的按钮的Chrome扩展程序

问题描述

2 个解决方案

解决方案1
0 2019-09-04 18:48:02

解决方案2
0 2019-09-05 01:31:09

单击Twitch上的按钮的Chrome扩展程序

问题描述

2 个解决方案

解决方案1 0 2019-09-04 18:48:02

解决方案2 0 2019-09-05 01:31:09

解决方案1
0 2019-09-04 18:48:02

解决方案2
0 2019-09-05 01:31:09