Chrome extension - How can I capture click events on the document vanillaJS

Question

I'm trying to create my first chrome extension and what I would like to do is have a function run each time the user clicks.

This is my manifest file:

{
  "manifest_version": 2,
  "name": "MyName",
  "description": "MyDescription",
  "version": "1.0.0",
  "icons": {
    "128": "icon_128.png"
  },
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "permissions": [ "activeTab" ],
  "content_scripts": [
    {
      "matches": [ "<all_urls>" ],
      "js": [ "contentscript.js" ],
      "all_frames":  true
    }
  ]
}

I've then created a js file called "contentscript.js" which contains the following:

document.addEventListener("click", clickHandler);

function clickHandler() {
    alert("test");
}

I couldn't find much online apart from this post: Chrome extension that captures middle click and replaces URL, however that seems to be using jQuery which I would like to avoid if possible (I tried to modify my project based on the above question to work without jQuery but nothing happens once I load my project to chrome in dev mode and click on the page).

I would be grateful if anyone can point me in the right direction.

EDIT:

This is my popup.html file:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <link rel="stylesheet" type="text/css" href="popup.css" />
        <!--script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>-->
        <script src="popup.js"></script>
        <title>wow!</title>
    </head>
    <body>
        <div class="main-content">
            <h1 class="main-title">w0w!</h1>
        </div>       
    </body>
</html>

Chrome doesn't report middle/wheel click in `click` event. Use `"mousedown"` or `"auxclick"`. — wOxxOm, Jul 14 '18 at 14:06
You should add icon.png (extension icon for browser action) in same folder, otherwise chrome won't load it. Do you see your extension on extensions bar (top right corner)? I have tested and after adding icon your extension works as expected. — Gaiozz, Jul 14 '18 at 14:30
@wOxxOm I'm trying to capture left click, not middle mouse click. — hjalpmig, Jul 14 '18 at 14:34
@Gaiozz I already have icons setup, and the extensions loads succesfully (I can see my popup.html when I click the icon in the top right), its just that nothing happens when I click. — hjalpmig, Jul 14 '18 at 14:34
For a left click the code is correct and it works for me. Make sure to reload the extension on chrome://extensions page, also reload the web page because manifest-declared content scripts run only when the page is fully [re]loaded. If this doesn't help, try **window**.addEventListener('mousedown', clickHandler, **true**) and use `"run_at": "document_start"` in content script declaration. — wOxxOm, Jul 14 '18 at 14:54
@wOxxOm Neither of those seem to work for me. I've added my popup.html file to the question in case that makes any difference? — hjalpmig, Jul 14 '18 at 15:56
The popup is a separate page which is not related to the web page or its content script. Apparently there's something else you're not telling us or doing wrong or there's a bug in your browser. — wOxxOm, Jul 14 '18 at 16:22
@wOxxOm Hmm, only other things I've not mentioned is that there is a popup.js file (referenced in popup.html) that is empty, and I'm adding the extension to Chrome in unpacked mode. — hjalpmig, Jul 15 '18 at 10:45
Like I said, the code is correct. Maybe I could guess more if I saw what exactly you're doing in a screencast. — wOxxOm, Jul 15 '18 at 10:59

score 0 · Accepted Answer · answered Aug 26 '18 at 15:53

Haven't had time to play with this for a while, but had another look today and found the solution. I was using Visual Studio to write my code, and this created a solution folder withing the folder my code was saved in. So seems that Google extensions don't like having any extra bits in there which caused no code to be run.

Chrome extension - How can I capture click events on the document vanillaJS

1 Answers1