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?
