0

I found a few examples of how to create a simple chrome extension. Now I want to run a JS function when a button is clicked in the chrome extension pop up. I followed this general guide to get the extension set up:

https://developer.chrome.com/extensions/getstarted

and I followed these explanations specifically to get the function running when the button is clicked:

https://gist.github.com/greatghoul/8120275

Right now in my popup.html (the main html shown to the user when they click the plug in icon) i have the following line:

<button id="clickme">click me</button>

And in popup.js which has been succesfully configured as accesible to the chrome plug in I added the following:

function hello() {
        console.log("I MEOW AT CATS");
}

document.getElementById('clickme').addEventListener('click', hello);

As I understand it this should be enough and when the button is clicked the hello() function should run and "I MEOW AT CATS" should be displayed in the console but it is not. Seemingly the hello() function is never run. What am I doing wrong?!

This is my manifest.json if it matters:

{
    "name": "Getting Started Example",
    "version": "1.0",
    "description": "Build an Extension!",
    "permissions": ["declarativeContent", "storage"],
    "background": {
      "scripts": ["background.js"],
      "persistent": false
    },
    "page_action": {
      "default_popup": "popup.html",
      "default_icon": {
        "16": "images/get_started16.png",
        "32": "images/get_started32.png",
        "48": "images/get_started48.png",
        "128": "images/get_started128.png"
      }
    },
    "icons": {
      "16": "images/get_started16.png",
      "32": "images/get_started32.png",
      "48": "images/get_started48.png",
      "128": "images/get_started128.png"
    },
    "manifest_version": 2
}
HelloCoding
  • 119
  • 2
  • 9

1 Answers1

-1

Your JavaScript file (popup.js) is correct but remember that the console.log logs on your extension's html file.
Your HTML file (popup.html) should be like this: 

<!DOCTYPE html>
<html>
  <body style="width: 300px">
    <button id="clickme">click me</button>
    <script type="text/javascript" src="popup.js"></script>
  </body>
</html>
aldi
  • 718
  • 1
  • 8
  • 22