Google Chrome Extension - Help needed

问题

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?

回答1:

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.

回答2:

Are you sure you added the jQuery library with an additional tag like this?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>

After I did that, I had no more problems. Before I did it, I had an "$ is undefined" error, of course.

来源：https://stackoverflow.com/questions/9963333/google-chrome-extension-help-needed

标签

jquery

google-chrome

google-chrome-extension