javascript - 如何点击 Chrome 扩展程序中的按钮

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

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

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

(我即将通过这个扩展赚很多钱,所以请你帮助我的兄弟;)

利用我所看到的内容,我整理了代码:

popup.js:

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

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

list .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>

最佳答案

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

一个简单、完整的 Chrome 扩展,它注入(inject) content script当您单击 browser_action 按钮时,单击带有 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"
    }
}

关于javascript - 如何点击 Chrome 扩展程序中的按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40244252/

相关文章:

php - 向表发送数据时保持表单打开

javascript - 全日历过滤

javascript - WordPress 4.5.2 : Uncaught ReferenceError: JQuery is not defined

jquery - 点击表格行触发其下有tr行的checkbox事件

javascript - AngularJS 中的单选按钮未将表单设置为有效

javascript - 如何通过 JS 更改 HTML 文档中字符串的所有实例而不影响其标记?

javascript - 序列化检查约束其他列

javascript - 无法使用 heatmap.js 生成简单的热图

javascript - 如何在区域形状上使用 onMouseOver 更改图像?

javascript - 如何在单击特定 li 时隐藏所有 li 项目,并使用 jquery 在鼠标悬停时再次显示该项目下方的剩余 li 项目