Question

我正在尝试进入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!");

Answer 1

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

{
    "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>

Answer 2

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

应该是

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

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

将jQuery加载到chrome扩展中

2 个答案: