如何單擊 Chrome 擴展程序中的按鈕

Question

我只是想設置一個簡單的 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>

Answer 1

目前尚不清楚為什么要使用document.createEvent() 。 該接口已棄用。 要創建事件，您應該使用事件構造函數。 但是，對於HTML元素上的常規click事件，您可以僅使用click()方法，而不必實際構造該事件。

一個簡單，完整的Chrome擴展程序可以是：當您單擊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"
    }
}

Answer 2

在新的清單版本(V3)中， page_action和browser_action被統一為一個action ：

  "action": {
    "title": { 'This is a popup tip!'}
}

您只需避免聲明任何default_popup並在background.js中編寫：

    chrome.action.onClicked.addListener(
        async function(tab) {
          // what you want to do when click the extension button
    });

非常容易！

如何單擊 Chrome 擴展程序中的按鈕

問題描述

2 個解決方案

解決方案1
1 2016-10-25 19:30:37

解決方案2
0 2022-07-07 21:34:59

如何單擊 Chrome 擴展程序中的按鈕

問題描述

2 個解決方案

解決方案1 1 2016-10-25 19:30:37

解決方案2 0 2022-07-07 21:34:59

解決方案1
1 2016-10-25 19:30:37

解決方案2
0 2022-07-07 21:34:59