Home/ Questions/Q 8807473
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T02:22:34+00:00

I’m developing a Chrome Extension with HTML desktop notifications, but when they show up,

  • 0

I’m developing a Chrome Extension with HTML desktop notifications, but when they show up, it looks like they don’t execute any JavaScript. I started with a complex JS, then I reduced my test to this one:

<!DOCTYPE html>
<head>
    <title>notification</title>
</head>
<body>
    <script>document.write("content")</script>
    <img src='notification.png'><p>Yep!</p><p id="test"></p>
</body>
</html>

I can see anything I hardcode but no DOM manipulation (or simple document.write) is working. I tried to put the JS in a separate file, but it didn’t work. My current Chrome version is 23.0.1271.64 (Apple v.).

Can you help me?

[UPDATE] This is the manifest.json:

{
  "name": "BB",
  "version": "1.0",
  "manifest_version": 2,
  "description": "",
  "icons": {"48": "BB.png"},
  "browser_action": {
    "default_title": "BB",
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "background": {
    "scripts": ["bkg.js"]
  },
  "permissions": [
    "notifications"
  ],
  "web_accessible_resources": [
    "notification.html","popup.html","popup.js"
  ]
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You have to use an external script because of the Content Security Policy (CSP).

    Here’s how I got it working:

    background.js

    var notification = webkitNotifications.createHTMLNotification('notification.html');
notification.show();

    notification.html

    <!DOCTYPE html>
<head>
  <title>notification</title>
  <script src="notification.js"></script>
</head>
<body>
    <img src='notification.png'><p>Yep!</p><p id="test"></p>
</body>
</html>

    And finally the notification.js. It is important that you add an event listener to wait for the page to be loaded:

    document.addEventListener('DOMContentLoaded', function() {
  document.getElementById('test').innerHTML = 'test';
});

    The text of the p tag should then be filled with the test content.

    By the way: I don’t think you need to add notification.html to your web_accessible_resources.

    • 0