Javascript in Google Chrome popup extension not running

google-chrome, google-chrome-extension, javascript

Solution

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/

Problem

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?

Original source

Related problems