Chrome extension: Content script matching URL pattern for Gmail message

Question

For my Chrome extension, I need a matching pattern for any valid Gmail message URL. Example:

https://mail.google.com/mail/u/0/?shva=1#inbox/140acd877b64109b

What I tried in manifest.json is the following:

"content_scripts": [ {
        "matches":      ["*://*.mail.google.com/mail/u/0/?shva=1#inbox/*"],
        "css":          ["default.css"]
    } ]

However, my custom stylesheet is not applied when I access a Gmail message with the URL pattern above.

Any ideas why it is not applied?

If I only use "matches": ["*://*.mail.google.com"], then it works. Yet I do not want the stylesheet to be applied to my inbox page too. Thus I am looking for a pattern to only catch single message pages.

score 3 · Accepted Answer · edited May 23 '17 at 11:58

3

The location fragment (#...) is always ignored in the match pattern. Last time I checked, the query string is also ignored for the "css" field.

To get the desired effect, just insert the stylesheet on "*://*.mail.google.com/*", and use a content script to detect URL changes. For example:

Fragment of manifest.json:

"content_scripts": [ {
    "matches":      ["*://*.mail.google.com/*"],
    "css":          ["default.css"],
    "js":           ["style-toggler.js"]
} ]

Example of default.css:

.turn-on-my-style img {
    visibility: hidden;
}

If prefixing your CSS selectors takes too much efforts, I suggest to use a CSS preprocessor like LESS.

style-toggler.js:

function hashCheck() {
    if (/^#inbox\/.*/.test(location.hash)) {
        document.documentElement.classList.add('turn-on-my-style');
    } else {
        document.documentElement.classList.remove('turn-on-my-style');
    }
}
window.addEventListener('hashchange', hashCheck);
hashCheck();

edited May 23 '17 at 11:58

Community

1
1

answered Aug 24 '13 at 15:58

Rob W

341,306
83
791
678

Thanks Rob. But I do not completely understand the content of the stylesheet. In my extension, I want to add a `margin-top` property to an existing class `.aeH` but as mentioned above, only if I am not in the inbox. As far as I understand your example, it adds or removes a new class, but does not modify the property of an existing class. – orschiro Aug 24 '13 at 19:54
@orschiro Prefix every selector of your original style sheet with the custom class name (`.turn-on-my-style`, in my example). Then, you can effectively toggle the styles by adding or removing the class name from the ancestor element (the root element, ``, `document.documentElement` in my example). – Rob W Aug 24 '13 at 20:29
Now I understand what you mean. It is working great! Thanks. In `default.css` I added `.toggleClass .aeH { margin-top: 55px !important; }` and in `default.js` I added `classList.add('toggleClass');` – orschiro Aug 24 '13 at 20:36

Chrome extension: Content script matching URL pattern for Gmail message

1 Answers1

Linked