16

我正在尝试进入 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 得到的错误告诉我

未捕获的 ReferenceError：$ 未定义

实际上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!");
4

2 回答 2

17

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

{
    "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>
于 2012-08-20T09:43:49.243 回答
0 
$.("#test").html("Foo!");

应该

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

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

于 2012-08-20T09:37:38.260 回答