Расширения 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 type="text/javascript">
$(document).ready(function() {


});
</script>

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

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

    // YOUR CODE GOES HERE

})
</script>

Answer 3

Сначала нужно включить jQuery, например

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

Вам следует проверить консоль всплывающих страниц на наличие ошибок.