在开发Chrome扩展中添加jQuery [英] Adding jquery in developing a chrome extension
问题描述
我查看了几篇关于在开发Chrome扩展中添加jQuery的文章 - 但大多数都是旧的，并使用了不赞成使用的清单选项（如background_page）。我已经添加了content_scripts成员。我仍然得到未捕获的ReferenceError：$未定义。
采取最简单的方案 - 基于Chrome的扩展示例添加jquery它 - 我们会有这样的：
-
清单：
{
manifest_version：2，
name：myExt，
description：myExt Desc，
version：1.0，
browser_action：{
default_icon：icon.png，
default_popup：popup.html
，
content_scripts：[
{
js：[jquery.js，myScript.js]，
matches：[http：// * / *，https：// * / *]
}
]
}
$ b $ p $// var myObj = {
// execute：function（）{
// $（＃btn1）。click（function（）{
// alert（'I was点击indeeeed！'）;
//}）;
//}
//}
//document.addEventListener('DOMContentLoaded'，function（）{
// myObj.execute（）;
//}）;
$（＃btn1）。click（function（）{alert（'iae'）;}）;
-
popup.html：
ul> Manifest:
{ "manifest_version": 2, "name": "myExt", "description": "myExt Desc", "version": "1.0", "browser_action": { "default_icon": "icon.png", "default_popup": "popup.html" }, "content_scripts": [ { "js": [ "jquery.js", "myScript.js" ], "matches": [ "http://*/*", "https://*/*" ] } ] }myScript.js:
//var myObj = { // execute: function () { // $("#btn1").click(function () { // alert('I was clicked indeeeed!'); // }); // } //} //document.addEventListener('DOMContentLoaded', function () { // myObj.execute(); //}); $("#btn1").click(function () { alert('iae'); });popup.html:
< html> < HEAD> < title>入门分机的弹出式菜单< / title> <风格> body {min-width：357px; overflow-x：hidden; } img {margin：5px;边框：2px纯黑色; vertical-align：middle;宽度：75px;身高：75px; }< / style> <！ - - JavaScript和HTML必须位于单独的文件中：有关详细信息和说明，请参阅我们的Content Security - Policy文档[1]。 - - [1]：http://developer.chrome.com/extensions/contentSecurityPolicy.html - > < script src =myScript.js>< / script> < /头> <身体GT; <表> < TR> < TD>嘿< / td> < TD>有< / td> < / TR> < TR> < TD>这是一个扩展！ < / TD> < TD> < input type =buttonid =btn1value =Click Me/> < / TD> < / TR> < /表> < /体> < / HTML>
我将所有文件放在同一目录（popup.html， icon.png，manifest.json，myScript.js，jquery.js）。
在html中也没有错误，在脚本中也没有错误。
单击[检查弹出窗口]的唯一错误是：
未捕获的ReferenceError：$未定义
我错过了什么？！？？
实际上，您没有为您的弹出窗口包含jQuery。 b
$ b
清单中定义的内容脚本仅适用于您在清单中指定的页面。在你的情况下，任何页面上 http 和 https 方案 - 但弹出窗口有一个有效的URL chrome-extension：//yourextensionsidhere/popup.html ，因此不会被注入。
内容脚本在概念上是页面你不控制。因此，即使您可以让Chrome注入脚本，由于 由于您完全控制了您的扩展的页面，因此您需要手动包含 阅读体系结构概览，以便更好地理解脚本的内容以及它们与您的扩展自己的页面之间的关系。
标签。
$ b
<脚本SRC = 的jquery.js >< /脚本>
< script src =myScript.js>< / script>
$（document）.ready（）中，因为您的代码将在 #btn之前执行在DOM中。
I looked at several posts about adding jquery in developing a chrome extension - but most are old and use manifest options that were deprecated (such as "background_page"). I have already added the "content_scripts" member. I still get "Uncaught ReferenceError: $ is not defined ".
Taking the simplest possible scenario - building upon Chrome's extension sample to add jquery to it - we would have something like:
<html>
<head>
<title>Getting Started Extension's Popup</title>
<style>
body
{
min-width: 357px;
overflow-x: hidden;
}
img
{
margin: 5px;
border: 2px solid black;
vertical-align: middle;
width: 75px;
height: 75px;
}
</style>
<!--
- JavaScript and HTML must be in separate files: see our Content Security
- Policy documentation[1] for details and explanation.
-
- [1]: http://developer.chrome.com/extensions/contentSecurityPolicy.html
-->
<script src="myScript.js"></script>
</head>
<body>
<table>
<tr>
<td>
Hey
</td>
<td>
There
</td>
</tr>
<tr>
<td>
This is an extension!
</td>
<td>
<input type="button" id="btn1" value="Click Me" />
</td>
</tr>
</table>
</body>
</html>
I have all files in the same directory (popup.html, icon.png, manifest.json, myScript.js, jquery.js). There are no errors whatsoever in the html, nor in the script. The only error I get upong clicking [Inspect popup] is: Uncaught ReferenceError: $ is not defined
What am I missing ?!?
You have not, in fact, included jQuery for your popup.
A Content Script defined in the manifest only applies to pages you specified in the manifest. In your case, any page on http and https scheme - but a popup has an effective URL chrome-extension://yourextensionsidhere/popup.html, and so it is not injected.
Content scripts are, conceptually, for pages you do not control. As a consequence, even if you could make Chrome inject the script, it would still not work for the code in the page because of the isolated context principle.
Since you have full control over your extension's pages, you need to manually include scripts with <script> tags.
<script src="jQuery.js"></script>
<script src="myScript.js"></script>
Read the Architecture Overview for a better understanding of what content scripts do and how they relate to your extension's own pages.
As an aside, you will still need to wrap your code in $(document).ready(), as your code will execute before #btn is in DOM.
这篇关于在开发Chrome扩展中添加jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
