0

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

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

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

清单.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    
}

背景.html

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

这jquery.js只是本地文件中的 jQuery 东西。（第 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>

背景.js

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

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

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

我的问题是：

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

PS。我是否应该同时包含jquery.js在该content_scripts部分和该部分中，background.html或者它是否矫枉过正？

4

1 回答 1

1

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

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

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

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

于 2013-04-09T12:42:34.300 回答