0

After looking at extension docs, I created a small extension that should do the trick, but it doesn’t seem to have any effect. I’m not sure what else needs done. Or, is perhaps Gmail a special page, and somehow discards stylesheets injected during its load process?

Here’s what I had so far:

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"]
    }
  ]
}

What’s the deal?

Alan H.
  • 16,219
  • 17
  • 80
  • 113

2 Answers2

1

Gmail is not a "special page" like Chrome Webstore, you are allowed to insert CSS. For example, checkout the "standard HTML" page, and try something like body { background-color: #f00; } - it works!

Note that the button you want to change is inside the iFrame canvas_frame, I think that might be a reason, note that this one works, too:

#canvas_frame {
  width: 50%;
}

Maybe the answers to "How to apply CSS to iFrame" can help you, I tried a bit around and can not get it working yet, but maybe this points you in the right direction.

(Btw, you forgot a ; in your CSS, but it seems like it is not the reason that it doesn't work, just wanted to mention it)

Community
  • 1
  • 1
soerface
  • 6,417
  • 6
  • 29
  • 50
  • 1
    Also, while it’s best practice to always end a CSS property declaration with a semicolon, it’s perfectly valid to omit the *last* one. – Alan H. Jun 25 '12 at 00:37
0

In our extension we use a content script to scan a page (based on the url, it only scans certain sites) for elements we wish to change. For example it looks over YouTube comments and changes the color according to a sentiment analysis score.

Such a technique could append a class to a given button and change it that way.

here is a snippet that 

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]);
        });
    }
Aron23
  • 23
  • 6