Chrome extensions with jQuery

Question

I downloaded http://code.google.com/chrome/extensions/samples.html#ea2894c41cb8e80a4433a3e6c5772dadce9be90d. I would like make it it jQuery, but if i do:

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

<script>
$("div").css('background-color', 'black');

$('.click').click(function(){
  chrome.tabs.executeScript(null,
    {code:"document.body.style.backgroundColor='" + $(this).attr('id') + "'"});
  window.close();
})
</script>
<div class="click" id="red">red</div>
<div class="click" id="blue">blue</div>
<div class="click" id="green">green</div>
<div class="click" id="yellow">yellow</div>

this not working. Nothing happens. Why?

Read the "Commonly Made Mistakes" at the [jQuery tag wiki](http://stackoverflow.com/tags/jquery/info) please; the first item applies. — pimvdb, Feb 15 '12 at 14:14
@pimvdb Wow, what a nice little document (you linked to). I've been using StackOverflow for a year, almost daily, and have never seen this document. You should post a link to this document on every jQuery post. Thanks! — Evik James, Feb 15 '12 at 16:14
@Evik James: Honestly I think it should be the other way round - a question poster would be better off checking that page *before* asking a question. — pimvdb, Feb 15 '12 at 16:19
My point is that no one will ever see the page if there aren't links to it. I haven't seen it until you posted it. I scour the web for jQuery stuff every day and find lots of garbage. You can't check a page if you haven't found it and don't know it exists, can you? Again, thanks for the link. — Evik James, Feb 15 '12 at 16:22

score 3 · Accepted Answer · answered Feb 15 '12 at 14:23

You didn't include the document ready handler, try this:

<script>
    $(function() {
        $("div").css('background-color', 'black');

        $('.click').click(function() {
            chrome.tabs.executeScript(null,
                {code:"document.body.style.backgroundColor='" + $(this).attr('id') + "'"});
            window.close();
        })
    });
</script>
<div class="click" id="red">red</div>
<div class="click" id="blue">blue</div>
<div class="click" id="green">green</div>
<div class="click" id="yellow">yellow</div>

Alternatively you can move your <script> tag to just before the </body> tag so that all HTML is loaded before the javascript.

score 0 · Answer 2 · answered Feb 15 '12 at 14:14

0

You need to include jQuery first, like

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

You should check the popup page console for errors.

answered Feb 15 '12 at 14:14

Sjoerd

74,049
16
131
175

i have this, but still nothing happens – Adam Bausy Feb 15 '12 at 14:24

score 0 · Answer 3 · answered Feb 15 '12 at 16:18

0

Wrap your jQuery in this:

<script type="text/javascript">
$(document).ready(function() {


});
</script>

So, your jQuery should look like this:

<script type="text/javascript">
$(document).ready(function() {

    // YOUR CODE GOES HERE

})
</script>

answered Feb 15 '12 at 16:18

Evik James

10,335
18
71
122

Chrome extensions with jQuery

3 Answers3

Linked