将 jQuery 加载到 chrome-extension 中

2024-04-13

我正在尝试迈入 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!"
    }
}

实际上尝试重新加载扩展告诉我“匹配”与有效模式不匹配。

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

未捕获的引用错误:$ 未定义

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

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

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

And popup.html:

...
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="popup.js"></script>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

将 jQuery 加载到 chrome-extension 中 的相关文章