Google chrome extension 我如何编写一个Chrome扩展来改变Gmail中按钮的颜色？

在查看了扩展文档之后，我创建了一个小扩展，它应该可以做到这一点，但它似乎没有任何效果。我不确定还需要做什么。或者，Gmail是否是一个特殊的页面，并且在加载过程中以某种方式丢弃了注入的样式表

以下是我到目前为止的情况：

x、 css:

/*html for extra specificty*/
/*this class is applied to the compose button*/
html .T-I-KE {
  background-image: -webkit-linear-gradient(top,#555,#333);
  background-image: linear-gradient(top,#555,#333)
}

manifest.json：

{
  "name": "A Compose Button as Dark as my Soul",
  "version": "1.1",
  "manifest_version": 2,
  "description": "I’m so depressed.",
  "content_scripts": [
    {
      "matches": ["http://mail.google.com/*", "https://mail.google.com/*"],
      "css": ["x.css"]
    }
  ]
}

---

这是怎么回事？

在我们的扩展中，我们使用一个内容脚本来扫描页面（基于url，它只扫描某些站点），寻找我们想要更改的元素。例如，它查看YouTube评论并根据情绪分析分数更改颜色

这种技术可以将一个类附加到一个给定的按钮，并以这种方式进行更改

这里有一个片段

if (location.href.indexOf('youtube.com') != -1) {
    if (data.indexOf('neg') != -1) {
        $('.comment-text:contains('+data.substring(4)+')').each(function(index) {
            var active_el = $(this)[index];
            chrome.extension.sendRequest({id: "sense_color"}, function(local) {
                active_el.style.color="#"+local;
            });
            selectText($(this)[0]);
        });
    }

Gmail不像ChromeWebstore那样是一个“特殊页面”，你可以插入CSS。例如，签出“标准HTML”页面，然后尝试类似于

body{background color:#f00；}

-它可以工作

请注意，您要更改的按钮位于iFrame

canvas\u frame

内，我认为这可能是一个原因，请注意，此按钮也适用：

#canvas_frame {
  width: 50%;
}

也许“”的答案可以帮助你，我试了一下，但还不能让它工作，但也许这为你指明了正确的方向

---

（顺便说一句，你在CSS中忘记了一个

；

，但这似乎不是它不起作用的原因，只是想提一下）

这是一个建议，本质上CSS不会因为某些原因而被应用，但是JavaScript可能吗？我从未尝试过纯CSS，但我知道你可以操纵dom来轻松地更改类etcAlso，虽然总是以分号结束CSS属性声明是最佳做法，但省略最后一个也是完全有效的。