Home/ Questions/Q 8125537
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-06T06:51:10+00:00

Hi I have run into a very weird problem. I have a basic chrome

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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/

    • 0