Google Chrome扩展程序 - 需要帮助 [英] Google Chrome Extension - Help needed
问题描述
我是 Google Chrome浏览器扩展程序编码的新成员，并且有一些基本问题。我想制作Chrome扩展程序，并且计划如下：
- 一个包含按钮和结果字段的弹出窗口（popup.html）
- 当一个按钮被点击时，我想触发一个事件，这个事件应该连接到一个web服务器（我也是这个servlet），然后从服务器收集信息。 （XMLHttpRequest（））
- 此后，我希望我的扩展程序将收集的信息加载到其中一个结果字段中。
简单，不是吗？但是我有几个问题，一开始就是这样:(我从阅读教程开始开发，但是我对扩展的主要结构有迷惑。现在，我开始了一个应用程序，其中包含popup.html，manifest.json ...
在popup.html中有一个结果字段和一个按钮
< div id =extension_container>
< div id =header>
< p id =intro>结果在这里< / p>
< button type =buttonid =button >点击我！< / button>
< / div><！ - END header - >
< div id =content>
< / div><！ - END content - >
p>
当按钮被点击时，我触发一个事件，用jquery处理，代码在这里：
$（document）.ready（function（）{
$（＃button）。click（function（）{
$（＃intro ）.text（Hello，im added）;
alert（Clicked）;
}）;
}）;
< ; /脚本>
问题出在popup.html中，这不起作用，如果我将它加载到Chrome中，什么都没发生。否则，如果我在浏览器中打开popup.html，而不是作为扩展名，一切工作正常。所以，我认为我对扩展结构有基本的误解，从背景页面，背景JavaScript等开始.. :(任何人都可以帮助我？
在Chrome 19.0.1084.1中进行测试，这对我很有帮助....
$ b
popup.html
$ p $
<！doctype html>
< html>
< head>
< script src = jquery-1.7.1.min.js>< / script>
< script src =popup.js>< / script>
< / head>
< body>
< div id =extension_container>
< div id =header>
< p id =intro> ; / p>
< / div><！ - END header - > $ p
< / div>按钮>按钮> ;
< div id =content>
< / div><！ - END content - >
< / div>
< / body>
< / html>
popup.js
$（document） .ready（function（）{
$（＃button）。click（function（）{
$（＃intro）。text（Hello，im added）;
alert（点击）;
}）;
}）;
可能的错误
我认为可能是什么你的问题是你的清单中有manifest_version：2，并且你的popup.html看起来像这样....
<！doctype html>
< html>
< head>
< script src =jquery-1.7.1.min.js>< / script>
<！ - script src =popup.js>< / script - >
< script>
$（document）.ready（function（）{
$（＃button）。click（function（）{
$（＃intro）。text（Hello， im添加）;
alert（Clicked）;
}）;
}）;
< / script>
< / head>
< body>
< div id =extension_container>
< div id =header>
< p id =intro>结果在这里< / p>
< button type =buttonid =button> Click Me！< / button>
< / div> <！ - END标题 - >
< div id =content>
< / div> <！ - END内容 - >
< / div>
< / body>
< / html>
...这不起作用，因为内联脚本不允许在清单版本2中使用。
Im new on Google Chrome Extensions coding, and i have some basic questions.
I want to make a Chrome Extension, and the scheme is the following:
-a popup window, containing buttons and result fields (popup.html)
-when a button is clicked, i want to trigger an event, this event should connect to a webserver (i make the servlet too), and gather information from the server. (XMLHttpRequest())
-after that, i want my extension to load the gathered information into one of the result fields.
Simple, isn't it? But i have several problems, right at the beginning:( I started developing with reading tutorials, but i have fog on the main structure of an extension. Now, i started an app, containing a popup.html, manifest.json ... In popup.html theres a result field, and a button
<div id="extension_container">
<div id="header">
<p id="intro">Result here</p>
<button type="button" id="button">Click Me!</button>
</div> <!-- END header -->
<div id="content">
</div> <!-- END content -->
When button is clicked, i trigger an event, handeled with jquery, code here:
<script>
$(document).ready(function(){
$("#button").click(function(){
$("#intro").text("Hello, im added");
alert("Clicked");
});
});
</script>
And here comes the problem, in popup.html this doesnt work, if i load it to Chrome, nothing happens. Otherwise, if i open popup.html in browser, not as an extension, everything works fine. So, i think i have basic misunderstandings on extension structures, starting with background pages, background javascript and so on.. :( Could anyone help me?
Testing in Chrome 19.0.1084.1 this worked for me....
popup.html
<!doctype html>
<html>
<head>
<script src="jquery-1.7.1.min.js"></script>
<script src="popup.js"></script>
</head>
<body>
<div id="extension_container">
<div id="header">
<p id="intro">Result here</p>
<button type="button" id="button">Click Me!</button>
</div> <!-- END header -->
<div id="content">
</div> <!-- END content -->
</div>
</body>
</html>
popup.js
$(document).ready(function() {
$("#button").click(function() {
$("#intro").text("Hello, im added");
alert("Clicked");
});
});
Possible Error
I think what MIGHT be your problem is that you have "manifest_version" : 2 in your manifest and your popup.html looks something like this....
<!doctype html>
<html>
<head>
<script src="jquery-1.7.1.min.js"></script>
<!--script src="popup.js"></script-->
<script>
$(document).ready(function() {
$("#button").click(function() {
$("#intro").text("Hello, im added");
alert("Clicked");
});
});
</script>
</head>
<body>
<div id="extension_container">
<div id="header">
<p id="intro">Result here</p>
<button type="button" id="button">Click Me!</button>
</div> <!-- END header -->
<div id="content">
</div> <!-- END content -->
</div>
</body>
</html>
...this wouldnt work because inline scripts arent allowed in manifest version 2.
这篇关于Google Chrome扩展程序 - 需要帮助的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
