0

I'm trying to create a Chrome Extension which allows me to press a key on my keyboard, and map it to a HTML button on the screen. I was just trying to get the click to work, before even bothering mapping it to a key, and I can't. When I try and run it, the console outputs this: Uncaught TypeError: Cannot read property 'dispatchEvent' of null.

Any help would be much appreciated. Here is my code:

const selector = 'button.btn-standard.call-to-action'; 
const button = document.querySelector(selector);

const triggerClick = (target) => {
  let event = document.createEvent ('MouseEvents');
  event.initEvent ('mousedown', true, true);
  target.dispatchEvent(event);

  event = document.createEvent ('MouseEvents');
  event.initEvent ('mouseup', true, true);
  target.dispatchEvent(event);
};

triggerClick(button);

HTML of the button <button class="btn-standard call-to-action">Search</button>

Update: i have it working in the console but when i try and use it through the chrome extension that is when i get that error. i believe its because chrome extensions cant execute JS thru the popup.HTMl so i put it in the background.js but i still cant seem to get it working

zac
  • 1
  • 1
  • 2
  • sorry ```const selector = 'button.btn-standard.call-to-action'``` should be in the first line but i missed that when i copied the code. my bad – zac Sep 04 '20 at 19:57
  • You can (and should) just edit your question to correct that. And, you should add the relevant HTML as well so we can replicate your issue. – Scott Marcus Sep 04 '20 at 19:57
  • Click the edit link on the bottom left of the question and update it then. – Taplar Sep 04 '20 at 19:57
  • thanks for the tip. just did it – zac Sep 04 '20 at 20:00
  • Please also add the relevant HTML in your document so we can reproduce your issue. – Scott Marcus Sep 04 '20 at 20:04
  • It seems that `querySelector` does not match element, so it returns `null`. – Berislav Kovacki Sep 04 '20 at 20:05
  • Try running `button` in the console, to see what it returns - does it show you the button element? – Nanoo Sep 04 '20 at 20:10
  • https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element – epascarello Sep 04 '20 at 20:25
  • its not my HTML. im trying to do this for a website i didnt make. so im using their HTML code. i verified that the button they have in their code is word for word what you have in yours. yet i get that error. when i try and console.log the button it comes up as undefined – zac Sep 04 '20 at 22:52
  • It doesn't matter if it's your HTML or not, please add it anyway so that we can replicate your issue. – Scott Marcus Sep 04 '20 at 23:57
  • Your issue could have been solved hours ago, if you had just added your HTML. See: [How do I ask a good question?](https://stackoverflow.com/help/how-to-ask) – Nanoo Sep 05 '20 at 13:37
  • @zac If `console.log(button)` returns: `undefined` then you have a typo in your selector. – Nanoo Sep 05 '20 at 13:40
  • @zac Here's what your element *should* look like: [(image)](https://i.imgur.com/g1QZH8P.png) – Nanoo Sep 05 '20 at 13:45
  • my bad here is the HTML for the button `````` sorry for any inconvenience i may have caused. @Nanoo this looks identical to yours no? – zac Sep 06 '20 at 00:38
  • That is the same as mine, yes. In theory, that [should work](https://i.imgur.com/kOch8KC.png). Any chance you could provide all of your HTML (or some) by editing your post or by sharing it via [Pastebin](https://pastebin.com/)? I'm not sure why the selector doesn't work for you, so there may be something going on in your DOM (e.g. inline JavaScript or script tags overriding default JavaScript functions). – Nanoo Sep 06 '20 at 21:50
  • @Nanoo so ive been playing w it and when i put it in the console it works no problem but when i put it in teh chrome extension background script it when i get this error. so it must be something with that. i assume chrome extensions isnt ur jurisdiction tho so thank you for the help. – zac Sep 06 '20 at 22:31

1 Answers1

1

I'm guessing, based on the JS provided, that there is something wrong with your HTML and HTML class for the button. This snippet below does not reproduce the error.

const selector = 'button.btn-standard.call-to-action'; 
const button = document.querySelector(selector);

const triggerClick = (target) => {
  let event = document.createEvent('MouseEvents');
  event.initEvent('mousedown', true, true);
  target.dispatchEvent(event);

  event = document.createEvent ('MouseEvents');
  event.initEvent ('mouseup', true, true);
  target.dispatchEvent(event);
};

triggerClick(button);
<button class="btn-standard call-to-action">BUTTON</button>
Jason Lydon
  • 7,074
  • 1
  • 35
  • 43
  • its not my HTML. im trying to do this for a website i didnt make. so im using their HTML code. i verified that the button they have in their code is word for word what you have in yours. yet i get that error. when i try and console.log the button it comes up as undefined – zac Sep 04 '20 at 22:20
  • Can you share the URL? Something doesn't add up. Is the JS before the HTML in the page? Is the button added dynamically? – Jason Lydon Sep 09 '20 at 15:24
  • initEvent is deprecated –  Nov 04 '21 at 03:40