如何单击 Chrome 扩展程序中的按钮答案

【问题标题】：How to click on a button in Chrome Extension如何单击 Chrome 扩展程序中的按钮
【发布时间】：2016-10-25 15:42:47
【问题描述】：

我只是想设置一个简单的 chrome 扩展，一旦点击扩展按钮，它就会点击一个元素。

我对此进行了一些研究，但找不到一个简单的答案来说明如何单击，其他人都有非常复杂的代码，我看不懂，也不知道是否有必要。我的意思是，每当我只搜索“点击”时，我就会发现一个比我的水平高得多的问题。

（我即将从这个扩展中赚很多钱，所以请你帮帮兄弟吧；）

使用我所看到的，我将代码拼凑在一起：

popup.js：

var evt = document.createEvent ("HTMLEvents");
evt.initEvent ("click", true, true);

document.getElementById('product-addtocart-button').dispatchEvent (evt);

清单.Json：

{
  "manifest_version": 2,

  "name": "Shoe BOT",
  "description": "This extension shows a Google Image search result for the current page",
  "version": "1.0",

  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "permissions": [
    "activeTab",
    "https://shop.adidas.ae/en/"
  ]
}

popup.html：

<!doctype html>
<!--
 This page is shown when the extension button is clicked, because the
 "browser_action" field in manifest.json contains the "default_popup" key with
 value "popup.html".
 -->
<html>
  <head>
    <title>Getting Started Extension's Popup</title>
    <style>
      body {

      }
      #status {

      }
    </style>

    <!--
      - JavaScript and HTML must be in separate files: see our Content Security
      - Policy documentation[1] for details and explanation.
      -
      - [1]: https://developer.chrome.com/extensions/contentSecurityPolicy
     -->
    <script src="popup.js"></script>
  </head>
  <body>
    <!--<div id="status"></div>
    <img id="image-result" hidden>-->
  </body>
</html>

【问题讨论】：

您删除your nearly identical question 并问一个新的有什么原因吗？通常，您只会edit当前问题，而不是删除它并发布一个新问题。
正如您在上一个问题的评论中提到的，您需要使用content script 来单击网页中的元素（例如按钮）。根据您所描述的您想要做的事情，假设这就是您想要做的，没有理由使用弹出窗口。带有chrome.browserAction.onClicked 侦听器的标准browser_action 按钮就足够了。周围应该有多个例子。

标签： javascript jquery html google-chrome google-chrome-extension

【解决方案1】：

不清楚您为什么使用document.createEvent()。该接口已弃用。要创建事件，您应该使用event constructors。但是，对于 HTML 元素上的通用 click event，您可以只使用 click() method 而无需实际构造事件。

当您单击browser_action 按钮时，一个简单、完整的Chrome 扩展程序会注入content script 以单击带有id="product-addtocart-button" 的按钮：

background.js：

chrome.browserAction.onClicked.addListener(function(tab) {
    chrome.tabs.executeScript(tab.id,{
        code: "document.getElementById('product-addtocart-button').click();"
    });
});

manifest.json：

{
    "description": "Click a button with ID=product-addtocart-button",
    "manifest_version": 2,
    "name": "click-product-addtocart-button",
    "version": "0.1",

    "permissions": [
        "activeTab"
    ],

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

    "browser_action": {
        "default_icon": {
            "32": "myIcon.png"
        },
        "default_title": "Click product-addtocart-button"
    }
}

【讨论】：

检查注入代码中单引号的使用！它应该类似于code: 'document.getElementById("product-addtocart-button").click();'。顺便说一句，什么是“browser_style”？我在 Chrome 扩展浏览器操作文档中没有找到它...
感谢您关注报价问题。固定的。在这种情况下，我没有仔细检查，这是我没有实际测试代码的少数几次之一。因此，我在副本中引用失败（来自我之前的回答）➞粘贴➞编辑周期。 browser_style 用于 Firefox WebExtensions。在 WebExtension 中，如果您没有密钥，浏览器控制台中会显示警告。我通常为 Chrome 和 Firefox WebExtensions 编写示例代码。我删除了 browser_style 键，因为它在这种情况下可能会造成混淆。