Chrome 扩展程序中的 jGrowl 问题答案

【问题标题】：jGrowl issue in Chrome ExtensionChrome 扩展程序中的 jGrowl 问题
【发布时间】：2013-04-09 20:42:34
【问题描述】：

我搜索了一段时间，似乎找不到答案。

我正在开发一个 Chrome 扩展程序，它会在特定页面打开时提醒用户。我使用的是默认的 javascript 警报，但可以说，它不是最吸引人的 UI 选项。我还尝试了实验性的 chrome 信息栏。这些效果非常好，但是，您不能使用实验性 api 发布扩展。

然后我找到了 jGrowl。这真是棒极了。它完全符合我的要求。我可以设法让 jGrowl 在网页上工作，但不是扩展。我想这是 jQuery 没有加载到背景页面或 jGrowl 页面上的问题。我不知道，这个 Chromium 文件问题很时髦。无论如何，这是我的代码。

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

jGrowl 样式是从 jGrowl 下载中复制的样式。除了将它粘贴到 <stlye> 标签之外，我没有对其进行编辑，因为 Chrome 扩展程序无法读取 <link...> 标签。

jquery.js 只是本地文件中的 jQuery 东西。 (v. 1.9.1)

jquery.jgrowl.js 是 jGrowl 代码。它尚未被编辑。

<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!");
});

我知道 jQuery 可以工作。我可以在document.ready 部分使用基本的javascript 警报，它可以工作。我什至可以将警报放在jquery.jgrowl.js 文件中。仍然有效。

当我将扩展文件上传到服务器或在我的计算机上运行它时，jGrowl 可以工作。（我跑background.html）

我的问题是：

我做错了什么？当扩展程序调用它时，如何让 jGrowl 显示出来？在任何页面上？

PS。我应该在content_scripts 部分和background.html 中都包含jquery.js 还是矫枉过正？

【问题讨论】：

标签： jquery google-chrome jgrowl

【解决方案1】：

你的清单上有一些语法错误，另外你似乎没有加载 jGrowl 或你的 background.js。您还需要包含样式表以使通知可见。纠正这些事情将使 jGrowl 正常工作。

请查看我准备的这个 github 存储库，它使用 jGrowl 的工作实例作为 Chrome 扩展： https://github.com/stanlemon/jgrowl-chrome-ext

您应该能够克隆它，然后使用克隆文件夹上的“加载解压扩展”选项开始。

如果您有任何问题，请随时直接给我发电子邮件，您可以在 GitHub 上找到我的联系信息。

【讨论】：