jquery - Chrome 扩展：如何使用 jQuery 操作内部 Gmail DOM？

Question

虽然使用 css 内容脚本操作内部 Gmail 内容没有问题，但我无法使用 jQuery 和自定义 js 内容脚本进行操作。

我想使用 jQuery 来操作内部 Gmail DOM。

清单.json

"content_scripts": [ {
        "matches":      ["*://*.mail.google.com/*"],
        "js":           ["jquery.js", "default.js"]
    } ],

默认.js

$(document).ready(function() {
    $("div.gK").css("color", "red");
});

但是，相应的div.gK元素不反映 css 的变化：

任何想法为什么这不起作用？

Answer 1

DOMReady 事件在您的目标元素创建之前很久就会触发。当您访问 mail.google.com 时，您会注意到加载栏 - 就在它出现之前，您的事件已被触发。

我不确定GMail是否有任何更可靠的自定义事件，否则我建议使用

jQuery(window).load(function(){
  jQuery("div.gK").css("color", "red");
});

如果您想更详细地剖析这些事件，我建议您阅读并使用 Chrome 开发人员工具，重点是Timeline 选项卡。

Answer 2

通过查看 Javascript 控制台，确保您的扩展程序没有抛出错误。问题可能是它没有执行，因为它抛出了一个错误。干杯！