将jQuery加载到Chrome扩展程序中

Question

将jQuery加载到Chrome扩展程序中

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!"
    }
}

尝试重新加载扩展会告诉我"匹配项"不符合有效的架构。

但这还不是全部。为了克服它，我尝试将"匹配项"的值更改为*：/ / * / *并重新加载。嗯，扩展似乎成功加载了，但由于从弹出窗口.js中获取的错误，似乎jquery未加载：

Uncaught 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!");

- Claudio

1

你是不是想用 $("#test").html("Foo!"); 而不是 $.('#test')？ - CD..

是的，那是一个分心错误。我将编辑问题。真丢脸。当然，现在的错误更具指示性，是“$未定义”。 - Claudio

2个回答

0

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

应该是

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

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

- Flater

5

楼主编辑了他的问题，因此这个回答不再适用。我建议修改答案或将其删除。 - Rob W

但现在错误也已经改变，所以答案是有效的。不过，我会追加它。 - Flater

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rob W · Accepted Answer

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

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