我正在尝试进入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!"
}
}
Run Code Online (Sandbox Code Playgroud)
实际上尝试重新加载扩展名告诉我"匹配"与有效架构不匹配.
但那还不是全部.为了克服它,我尝试只更改"匹配"值*://*/*并重新加载.好吧,扩展似乎加载正确,但似乎没有加载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>
Run Code Online (Sandbox Code Playgroud)
popup.js代码就是这样做的:
$("#test").html("Foo!");
Run Code Online (Sandbox Code Playgroud) 我希望jQuery可以在内容脚本和控制台中访问(即,从网页 - 我相信,但我不确定,这就是你使用的原因web_accessible_resources).
注意:我同意下面的Zig Mandel,他说你不应该使用CDN来加载jquery,因为它只能节省少量空间并留下CDN可能关闭的可能性.在这一点上,我只是想知道为什么这不起作用.
为什么这不起作用:
"content_scripts": [
{
...
"js": ["foo.js", "https://code.jquery.com/jquery-1.10.1.min.js", "https://code.jquery.com/jquery-1.10.1.min.map"],
"run_at": "document_idle",
"all_frames": true
}
],
"content_security_policy": "script-src 'self' https://code.jquery.com; object-src 'self'",
"web_accessible_resources": [ "https://code.jquery.com/jquery-1.10.1.min.js", "https://code.jquery.com/jquery-1.10.1.min.map"],
Run Code Online (Sandbox Code Playgroud)
我加载扩展程序时收到的错误是:
--------------------------- Extension error
--------------------------- Could not load extension from 'C:\Users\[me]\Documents\GitHub\foo'. Could not load
javascript '' for content script.
--------------------------- OK
---------------------------
Run Code Online (Sandbox Code Playgroud)
当我需要在jQuery的(或一些自定义调试库等)web_accessible_resources与中时content_scripts?
你必须在jQuery中包含一个javascript文件web_accessible_resources,然后注入它.包含jQuery content_scripts仅供扩展中的其他内容脚本使用.如何注入代码(无论是否为本地)的示例:
function inject(script) {
if (script.match(/^http\:\/\//)){
var …Run Code Online (Sandbox Code Playgroud)