Google Chrome扩展程序jquery未加载

时间:2013-03-21 11:12:58

标签: javascript jquery google-chrome-extension

在下面的google chrome扩展文件中为什么我不能在myscript.js文件中使用jquery脚本,是不是在myscript.js文件中加载了jquery,应该在manifest文件中进行哪些更改以使用myscript.js中的jquery < / p>

Manifest.json

  {
    "manifest_version": 2,

    "name": "One-click Kittens",
    "description": "This extension demonstrates a browser action with kittens.",
    "version": "1.0",
     "background": { "scripts": ["jquery-1.9.1.min.js","myscript.js"] },

    "permissions": [
     "tabs", "http://*/*"
    ],
    "browser_action": {
      "default_icon": "icon.png",
      "default_popup": "popup.html"
    }
  }

myscript.js

 alert($("#extension-command-list").val());    //undefined
 alert($("#extension-command-list").html());   //undefined
 $(document).ready(function() {
    alert("hello world");  //not seen
 });

编辑:

"background": { "scripts": ["jquery-1.9.1.min.js"] },

 "content_scripts": [
 {
  "matches": ["https://*/*"],
  "js": ["myscript.js"]   or "js": ["jquery-1.9.1.min.js","myscript.js"]
 }
],

1 个答案:

答案 0 :(得分:6)

您获得undefined的原因是因为您没有指定背景页。

所以...... Chrome生成的背景页面看起来就像

<html>

    <head></head>

    <body>
        <script src="jquery-1.9.1.min.js"></script>
        <script src="myscript.js"></script>
    </body>

</html>

如您所见,没有任何可以选择的元素,这就是为什么您的第一个元素alert返回undefined

无论如何,alert("hello world")也应该显示,因为DOMContentLoaded 或类似的应该以任何方式解雇。


您是否想要选择正在访问的网站的元素?

如果是这样,您应该将myscript.js放在Content Script而不是背景页面中。 在那里,您可以访问该网站的DOM。


所以问题是,你在忙什么?


如果您确实想要在背景页面中选择元素,则必须指定一个, 查看background pages网站会向您显示,其简单易用:

  

{
   “名称”:“我的扩展名”,
   ...
   “背景”:{
   “page”:“background.html”
   },
   ...
  }

编辑:

  • “default_popup”:“popup.html”

Browser Actions Popup。使用浏览器操作

  

[...]将图标放在地址栏右侧的Google Chrome主工具栏中。除了图标外,浏览器操作还可以包含工具提示,徽章和弹出窗口。

所以

  

如果浏览器操作有弹出窗口,则在用户单击图标时会显示弹出窗口。弹出窗口可以包含您喜欢的任何HTML内容,并且它会自动调整大小以适合其内容。   要在浏览器操作中添加弹出窗口,请使用弹出窗口的内容创建HTML文件。在清单中的browser_action的default_popup字段中指定HTML文件,或调用setPopup方法。

  • “背景”: “{...}”
  

扩展的常见需求是使用单个长时间运行的脚本来管理某个任务或状态。拯救的背景页   正如架构概述所解释的那样,后台页面是一个在扩展过程中运行的HTML页面。它存在于您的扩展的生命周期中,并且一次只有一个实例处于活动状态。

如果您分别请求了权限,还可以使用后台脚本访问Chrome扩展程序的Api的所有部分。 chrome.*


现在假设您想要扩展chrome的ContextMenu并使用一些功能。

为此,首先要在后台页面中创建一个contextMenuEntry 就像您的后台网页一次只运行一个实例,以及扩展程序的生命周期一样,您的contextMenuEntry只有一个实例,它会在您的扩展程序运行时创建,并保留在您的扩展程序的生存期

现在假设您要在其中一个菜单项中显示当前选定的页面文本

要做到这一点,您需要访问chrome.contextMenus API方法,但内容脚本允许使用此方法。

要实现这一点,您需要将带有所选文字的消息发送到背景页,例如通过以下方式。 chrome.extension.sendMessage

在后台页面中,您可以更新 现有上下文菜单以显示所选文字。

sry我现在想不出更好的例子