1

I am just trying to set up a simple chrome extension that will just click on an element once the extension button is clicked on.

I have researched this a bit, and I can't find a simple answer that says how to click, everyone else has very elaborate code that I can't understand and don't know if it's necessary or not. What I mean is, whenever I search for just "click" I find a question that is much more advanced than my level.

(I am about to make a lot of $ off of this extension, so please will you help a brother out ;)

Using what I have seen I have scraped together the code:

popup.js:

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

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

manifest.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>
Chris K
  • 41
  • 2
  • 6
  • Is there a reason that you deleted [your nearly identical question](http://webcache.googleusercontent.com/search?q=cache:stackoverflow.com/questions/40242085/my-javascript-button-click-in-chrome-extension-wont-work) and asked a new one? Normally, you would just [edit] the current question, not delete it and post a new one. – Makyen Oct 25 '16 at 16:59
  • As was mentioned in a comment on your prior question, you will need to use a [content script](https://developer.chrome.com/extensions/content_scripts) to click an element (e.g. a button) within a webpage. From what you describe you are wanting to do, assuming that is all you want to do, there is no reason to be using a popup. A standard `browser_action` button with a [`chrome.browserAction.onClicked`](https://developer.chrome.com/extensions/browserAction#event-onClicked) listener should be sufficient. There should be multiple examples around. – Makyen Oct 25 '16 at 19:12

2 Answers2

4

It is not clear why you are using document.createEvent(). That interface is deprecated. To create events, you should be using event constructors. However, for a generic click event on an HTML element, you can just use the click() method without having to actually construct the event.

A simple, complete Chrome extension which injects a content script to click the button with id="product-addtocart-button" when you click on a browser_action button would be:

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"
    }
}
Makyen
  • 31,849
  • 12
  • 86
  • 121
  • Check the use of single quotes inside the injected code! It should be something like `code: 'document.getElementById("product-addtocart-button").click();'`. BTW, what is "browser_style"? I didn't find it in Chrome Extensions Browser Action documentation... – Iván Nokonoko Oct 25 '16 at 21:17
  • Thanks for catching the quotes issue. Fixed. In this case, I did not double check & it was one of the few times I did not actually test the code. Thus, I failed with the quotes in the copy (from a prior answer of mine)➞paste➞edit cycle. [`browser_style`](http://stackoverflow.com/a/39841309/3773011) is for Firefox WebExtensions. In a WebExtension, if you don't have the key, there is a warning printed in the Browser Console. I usually write example code that is for both Chrome and Firefox WebExtensions. I removed the `browser_style` key as it is potentially confusing in this instance. – Makyen Oct 25 '16 at 22:06
1

With the new manifest version (V3) the page_action and browser_action were unified into one single action:

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

You just avoid declaring any default_popup and in background.js you write:

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

Incredibly easy !

digfish
  • 316
  • 2
  • 11