将 jQuery 加载到 chrome 扩展中答案

【问题标题】：Loading jQuery into chrome-extension将 jQuery 加载到 chrome 扩展中
【发布时间】：2012-08-15 15:22:22
【问题描述】：

我正在尝试进入 Chrome 扩展的神奇世界。现在我已经建立了我的清单，试图加载 jquery。

{
    "name": "Test Extension",
    "version": "0.1",
    "manifest_version": 2,
    "description": "First try",
    "options_page": "options.html",
    "content_scripts": [{
        "matches": ["chrome-extension://*/*"],
        "js": ["jquery.js", "popup.js"],
        "run_at": "document_end"
    }],
    "browser_action": {
        "default_icon": "icon.png",
        "default_popup": "popup.html",
        "default_title": "Click me!"
    }
}

实际上尝试重新加载扩展程序告诉我“匹配项”与有效架构不匹配。

但这还不是全部。为了克服它，我尝试将“匹配”值更改为*://*/* 并重新加载。好吧，扩展似乎加载正确，但似乎 jquery 没有加载，因为我可以从 popup.js 得到的错误告诉我

Uncaught ReferenceError: $ is not defined

其实 HTML 只是：

<!doctype html>
<html>
<head>
    <title>Test Extension</title>
    <link rel="stylesheet" style="text/css" src="style.css">
</head>
<body>
    <div id="test"></div>
</body>
</html>
<script type="text/javascript" src="popup.js"></script>

popup.js 代码就是这样做的：

$("#test").html("Foo!");

【问题讨论】：

您的意思是$("#test").html("Foo!"); 而不是$.('#test')？
是的。那是一个分散注意力的错误。我要编辑这个问题。真丢人。当然，错误现在是一个更具指示性的“$ 未定义”

标签： jquery google-chrome-extension manifest

【解决方案1】：

$.("#test").html("Foo!");

应该是

$("#test").html("Foo!");

您得到的错误与这部分代码不正确是一致的。

【讨论】：

OP 编辑了他的问题，因此不再适用。我建议编辑答案或删除它。
但是现在错误也发生了变化，所以答案是有效的。但是，我会追加它。

【解决方案2】：

内容脚本将从不在扩展程序的上下文中运行。在浏览器操作弹出窗口中加载脚本的正确方法是将其包含在代码中。让您的清单文件为：

{
    "name": "Test Extension",
    "version": "0.1",
    "manifest_version": 2,
    "options_page": "options.html",
    "browser_action": {
        "default_icon": "icon.png",
        "default_popup": "popup.html",
        "default_title": "Click me!"
    }
}

还有popup.html:

...
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="popup.js"></script>

【讨论】：

按照你的建议改变，给我以下错误：拒绝执行内联脚本，因为它违反了以下Content Security Policy directive: "script-src 'self' chrome-extension-resource:".
@theCrius 您的真实代码包含内联脚本（<script>....</script> 或事件侦听器，Content security policy 明确禁止这些 - 请参阅 stackoverflow.com/a/10417745/938089。要解决它，请将代码移动到外部文件。
更正我之前的评论：“事件侦听器”是指“内联事件侦听器”，例如。 <body onload="..."> 或 <button onclick="...">.
@theCrius 你把popup.js 放在了头上。该脚本会立即执行，但 <body> 甚至还不存在。要解决该特定问题，请将您的代码包装在 domready 事件处理程序中：$(function(){ $('#text').html('Foo!');}); - 请参阅api.jquery.com/ready
@Dan 我写了那个声明。单击 browserAction 按钮后显示的弹出窗口是从“chrome-extension://[EXTENSIONID]/popup.html”加载的。内容脚本只能插入到与某个match pattern 匹配的页面上。 chrome-extension:-URLs 无法与此类模式匹配（对于内容脚本），因此内容脚本无法在扩展页面中运行，即 Chrome 扩展的上下文。内容脚本将始终在选项卡的渲染器进程中运行。