将jQuery加载到Chrome扩展

前端之家收集整理的这篇文章主要介绍了将jQuery加载到Chrome扩展前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在尝试我的第一步进入Chrome扩展的神奇世界.
现在我已经建立了我的manifest来加载 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只是告诉我的错误

Uncaught ReferenceError: $is not defined

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

解决方法

内容脚本永远不会在扩展名的上下文中运行.在浏览器操作弹出窗口中加载脚本的正确方法是将其包含在代码中.让你的清单文件是:
{
    "name": "Test Extension","default_title": "Click me!"
    }
}

和popup.html:

...
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="popup.js"></script>

猜你在找的jQuery相关文章