Chrome扩展程序：与Gmail邮件的网址格式匹配的内容脚本 [英] Chrome extension: Content script matching URL pattern for Gmail message

问题描述

对于我的Chrome扩展程序，我需要匹配任何有效的Gmail邮件网址格式。示例：

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

我在 manifest.json 中尝试过的内容如下：

 content_scripts：[{
matches：[*：//*.mail.google.com/mail/u/0 /？shva = 1＃inbox / *]，
css：[default.css] 
}] 
  

然而，当我使用上述网址格式访问Gmail邮件时，我的自定义样式表不适用。

它不适用？

如果我只使用matches：[*：//*.mail.google.com] ，那么它的工作原理。但我不希望将样式表应用于我的收件箱页面。因此，我正在寻找一种模式，以便只捕获单个消息页面。

解决方案

位置片段（＃ ... ）始终在匹配模式中被忽略。 上次我查看，对于css字段，查询字符串也被忽略。

效果，只需在*：//*.mail.google.com/*中插入样式表，然后使用内容脚本来检测URL更改。例如：
$ b

manifest.json的片段：

content_scripts：[{
matches：[*：//*.mail。 google.com/*]，
css：[default.css]，
js：[style-toggler.js]
}]


default.css 的示例：

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

如果为CSS选择器添加前缀花费太多精力，我建议使用CSS预处理器，如 LESS 。

style-toggler.js ：

$ b

  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（）; 
  

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.

解决方案

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();

这篇关于Chrome扩展程序：与Gmail邮件的网址格式匹配的内容脚本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！