Javascript in Google Chrome popup extension not running

Question

Hi I have run into a very weird problem.

I have a basic chrome extension which has a default popup.html document defined as follows:

<html>

<head>
  <script type="text/javascript">
    function disp() {
    document.getElementById("test").innerHTML = "Bye";
    }
  </script>
</head>

<body>

<p id="test">Hello</p>
<button type="button" onclick="disp()">'Twas Nice to meet you</button>

</body>

</html>

Upon running the html file independently in a browser, it behaves as expected: clicking on the button changes the text of the p tag. However, from withing the chrome extension, in the popup the button does not seem to respond

Is this something to do with popups in general or something specific to my code?

Strangely enough, the console displays no new message when I click on the popup. Do I need to change some settings or something? — Saurabh Agarwal, Jun 23 '12 at 11:59
possible duplicate of [onClick within Chrome Extension not working](http://stackoverflow.com/questions/13591983/onclick-within-chrome-extension-not-working) — Xan, Sep 02 '14 at 08:40

Jared Farrish · Accepted Answer · 2012-06-23T15:35:07.820

Although you've found out you can circumvent the inline script "issue" (it is a security feature), below is what it would look like if you did not do that. This shows both how to call a notification and a "window"-based dialog.

manifest.json

{
  "name": "Hello World!",
  "version": "1.0",
  "manifest_version": 2,
  "description": "The first extension that I made.",
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "permissions": [
    "notifications",
    "create",
    "tabs"
  ]
}

popup.html

<!doctype html>
<html>
  <head>
    <title>Getting Started with Extension's Popup</title>
    <style>
      body {
        min-width:357px;
        overflow-x:hidden;
      }
      img {
        margin:5px;
        border:2px solid black;
        vertical-align:middle;
        width:75px;
        height:75px;
      }
    </style>

    <!-- JavaScript and HTML must be in separate files for security. -->
    <script src="popup.js"></script>
  </head>
  <body>
    <div style="text-align: center;">
        <button type="button" id="click">Show Notification</button>
        <button type="button" id="dialog">Show Dialog</button>
    </div>
  </body>
</html>

dialog.html

<!doctype html>
<html>
  <head>
    <title>Dialog Prompt - Chrome</title>
    <style>
    body {
      overflow: hidden;
      margin: 0px;
      padding: 0px;
      background: white;
    }
    p {
        text-align: center;
        padding: 20px;
    }
    </style>
  </head>
  <body>
    <p>This is a dialog prompt.</p>
  </body>
</html>

popup.js

var notifier,
    dialog;

function showNotify() {
    var notify;

    if (window.webkitNotifications.checkPermission() == 0) {
        notify = window.webkitNotifications.createNotification(
            "",
            'Notification Test',
            'This is a test of the Chrome Notification System. This is only a test.'
        );
        notify.show();
    } else {
        window.webkitNotifications.requestPermission();
    }
}    
function showDialog(){
    chrome.windows.create({
        url: 'dialog.html',
        width: 200,
        height: 120,
        type: 'popup'
    });
}    
function init() {
    clicker = document.querySelector('#click');
    dialog = document.querySelector('#dialog');

    clicker.addEventListener('click', showNotify, false);
    dialog.addEventListener('click', showDialog, false);
}    
document.addEventListener('DOMContentLoaded', init);

You can find the files to download here:

http://jfcoder.com/projects/chrometestdialogs/

So basically, in the newer (more secure version), all the javascript functions must be called as callbacks to event listeners in order to execute? — Saurabh Agarwal, Jun 23 '12 at 14:57
No. In order to get the event listeners attached for the button click's to fire, you have to wait until the DOM is ready to be accessed. The security model in version two says that inline scripts are not allowed, so there's the added requirement to place them in an in like I've done above. I wouldn't just go around it by removing the manifest number or lowering it; it'll eventually get removed. Just get used to running it from a script file. Also, you were a native method that isn't in Chrome extensions, ie, `alert()`. — Jared Farrish, Jun 23 '12 at 15:35
I also updated it; I didn't realize I'd left a couple things in. Downloadable files are also updated. — Jared Farrish, Jun 23 '12 at 15:37
"Uncaught TypeError: Cannot read property 'checkPermission' of undefined" this error shown — , Sep 02 '14 at 04:47

score 1 · Answer 2 · answered Sep 02 '14 at 04:58

manifest_version 2 doesn't allow user to enter the function inside the html file for security purpose, should we need to write all the function in separate file and import it to that html file like below

<head>
  <script src="yourjsfile.js"></script> //All our functions are defined here
  <script src="jquery.js"></script>  // This is the jquery
</head>

and the function calling are not allowed here like onclick, onkeydown,onkeyup, etc...

    <body>
    <p id="test">Hello</p>
    <button type="button" id="btn">Twas Nice to meet you</button>
    </body>

In above "onclick="disp()" not allowed, and should assign a id

so should we need to create the event and definition must create from the .js file

So you should write a js file like below yourjsfile.js

document.addEventListener('DOMContentLoaded', function () {
$("#btn").on("click",function(){
 disp();
});
});

function disp() {
document.getElementById("test").innerHTML = "Bye";
}

Javascript in Google Chrome popup extension not running

2 Answers2