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

Question

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

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

的manifest.json

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

default.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 tab。

Answer 2

通过查看Javascript控制台，确保您的扩展程序没有引发错误。 问题可能在于它没有执行，因为它引发了错误。 干杯！