带有 jQuery 的 Chrome 扩展答案

【问题标题】：Chrome extensions with jQuery带有 jQuery 的 Chrome 扩展
【发布时间】：2012-03-06 21:15:41
【问题描述】：

我下载了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>

这不起作用。什么都没发生。为什么？

【问题讨论】：

请在jQuery tag wiki阅读“常见错误”；第一项适用。
@pimvdb 哇，多么好的小文档（您链接到）。我已经使用 StackOverflow 一年了，几乎每天都在使用，但从未见过此文档。您应该在每个 jQuery 帖子上发布指向该文档的链接。谢谢！
@Evik James：老实说，我认为应该反过来——问题发布者最好在提问之前检查该页面。
我的意思是，如果没有指向它的链接，没有人会看到该页面。在你发布之前我还没有看到它。我每天都在网上搜索 jQuery 的东西，发现很多垃圾。如果您没有找到它并且不知道它存在，您就不能检查它，对吗？再次感谢您的链接。

标签： javascript jquery google-chrome google-chrome-extension google-chrome-devtools

【解决方案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> 标记之前，以便在 javascript 之前加载所有 HTML。

【讨论】：

【解决方案2】：

你需要先包含jQuery，比如

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

您应该检查popup page console 是否有错误。

【讨论】：

我有这个，但仍然没有任何反应

【解决方案3】：

将你的 jQuery 包装在这个：

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


});
</script>

所以，你的 jQuery 应该是这样的：

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

    // YOUR CODE GOES HERE

})
</script>

【讨论】：