Расширения Chrome с jQuery

Question

Скачано http://code.google.com/chrome/extensions/samples.html#ea2894c41cb8e80a4433a3e6c5772dadce9be90d. Я хотел бы сделать это он JQuery, но если я делаю:

<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> 

это не работает. Ничего не произошло. Зачем?

Answer 1

Вы не включили документ готовый обработчик, попробуйте следующее:

<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> 

В качестве альтернативы вы можете переместить <script> тег непосредственно перед </body> тега, так что загружается все HTML перед JavaScript.

Answer 2

Вам нужно включить JQuery первый, как

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

Вы должны проверить popup page console на наличие ошибок.

Answer 3

Оберните JQuery в этом:

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


}); 
</script> 

Итак, ваш JQuery должен выглядеть следующим образом:

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

    // YOUR CODE GOES HERE 

}) 
</script>