Search code examples
jquerygoogle-chromejgrowl

jGrowl issue in Chrome Extension

I have searched for a while, and I cannot seem to find an answer.

I am developing a Chrome Extension that alerts the user when a specific page is open. I was using the default javascript alert, but it is, lets just say, not the most attractive UI option. I also tried the experimental chrome infobars. Those worked wonderfully, but alas, you cannot publish Extensions with the experimental api.

Then I found jGrowl. It is wonderful. It does exactly what I was looking for. I can manage to get the jGrowl to work on a webpage, but not an extension. I imagine this is an issue with jQuery not being loaded on the background page or the jGrowl page. I dont know, this Chromium file issue is funky. Anyway, here is my code.

manifest.json

{
  "name" : "jGrowl Test",
  "version" : "1.0",
  "description" : "Makes jGrowl work.",
  "background" : {
    "page": "background.html"
  },
  "permissions": [
"tabs",
"http://*/*",
"https://*/*",
    "<all_urls>",
  ],
  "content_scripts" : [
    {
      "matches" : [
        "http://*/*",
        "https://*/*"
      ],
      "js" : ["jquery.js"],
      "run_at" : "document_idle",
      "all_frames" : false
    }
  ]
  "manifest_version": 2    
}

background.html

The jGrowl styling is the styling copied from the jGrowl download. I have not edited this other than pasting it into the <stlye> tags because Chrome Extensions cant read the <link...> tags.

The jquery.js is just the jQuery thingy in a local file. (v. 1.9.1)

jquery.jgrowl.js is the jGrowl code. It has not been edited.

<html>
  <head>
        <style>
           ...jGrowl styling...
        </style>
        <script src='jquery.js'></script>
        <script src="jquery.jgrowl.js"></script>
        <script src="background.js"></script>
  </head>
</html>

background.js

$(document).ready(function() 
{
   $.jGrowl("Hello world!");
});

I know that the jQuery works. I can use an basic javascript alert in the document.ready part, and it works. I can even put the alert in the jquery.jgrowl.js file. Still works.

When I upload the Extension files to a server or run it on my computer, the jGrowl works. (I run background.html)

My question is:

What am I doing wrong? How can I get the jGrowl to show up when the Extension calls it? On any page?

PS. Should I include jquery.js in both the content_scripts section and the background.html or is it overkill?

Solution

  • There are a few syntax errors on your manifest, additionally you do not seem to be loading jGrowl or your background.js. You also need to include the stylesheet for the notifications to be visible. Correcting these things will make jGrowl work correctly.

    Please take a look at this github repository which I have prepared with a working instance of jGrowl as a Chrome extension: https://github.com/stanlemon/jgrowl-chrome-ext

    You should be able to clone it and then use the "Load unpacked extension" option on the clone folder to get started.

    If you have any questions please feel free to email me directly, you can find my contact info over on GitHub.