Search code examples
javascriptimgur

Button doesn't work in custom chrome extension

I tried to make a chrome extension that shows the date, and everything went well, except when I tried to run it. I clicked the button that I coded in, and it wouldn't display what I wanted it to.

Code:

JS

function myFunction() {
    var d = new Date();
    var weekday = new Array(7);
    weekday[0] = "Sunday";
    weekday[1] = "Monday";
    weekday[2] = "Tuesday";
    weekday[3] = "Wednesday";
    weekday[4] = "Thursday";
    weekday[5] = "Friday";
    weekday[6] = "Saturday";

    var n = weekday[d.getDay()];
    document.getElementById("checkday").innerHTML = n;
HTML

<!doctype html>
<html>

<head>
  <title>Day checker</title>
  <script src="popup.js"></script>
</head>

<body>
  <h1>Click to show day</h1>
  <button id="checkday">Check!</button>
</body>

</html>

JSON

{
    "manifest_version": 2,

    "name": "What day is it",
    "description": "This extension will find the date",
    "version": "1.0",

    "browser_action": {
        "default_icon": "icon.png",
        "default_popup": "popup.html"
    },
    "permissions": [
        "activeTab"
    ]
}

Image(19x19) https://i.sstatic.net/FM9wt.png

Solution

  • The action has to be dynamically linked after the DOM content has been loaded. Due to security reasons, statically linked actions (onClick attribute for e.g.) would not work with Chrome extensions.

    In your js file(popup.js), add this

    document.addEventListener('DOMContentLoaded', function(){
  document.querySelector('#checkday').addEventListener('click', myFunction);
  // anything else you want to initialize on the page
});

    That should get it to work.