Google chrome extension Chrome扩展：内容脚本匹配Gmail消息的URL模式

对于我的Chrome扩展，我需要任何有效的Gmail消息URL的匹配模式。例如：

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

我在

manifest.json

中尝试了以下内容：

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

然而，当我使用上面的URL模式访问Gmail消息时，我的自定义样式表并不适用

你知道为什么不应用它吗

如果我只使用

“匹配项”：[“*：//*.mail.google.com”]

，那么它就可以工作了。但是我不希望样式表也应用到我的收件箱页面。因此，我正在寻找一种只捕获单个消息页面的模式。

在匹配模式中，位置片段（

#…

）总是被忽略，

“css”

字段的查询字符串也被忽略

要获得所需的效果，只需在

“*：//*.mail.google.com/*”

上插入样式表，并使用内容脚本检测URL更改。例如：

manifest.json的片段

：

“内容脚本”：[{
“匹配项”：[“*：//*.mail.google.com/*”]，
“css”：[“default.css”]，
“js”：[“style toggler.js”]
} ]

default.css

示例：

。打开我的样式img{
可见性：隐藏；
}

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

style-toggler.js

：

函数hashCheck（）{
if（/^#收件箱\/.*/.test（location.hash））{
document.documentElement.classList.add（'turn-on-my-style'）；
}否则{
document.documentElement.classList.remove（'open-on-my-style'）；
}
}
addEventListener（'hashchange'，hashCheck）；
hashCheck（）；

谢谢Rob。但我并不完全理解样式表的内容。在我的扩展中，我想将

margin top

属性添加到现有类

.aeH

，但如上所述，仅当我不在收件箱中时。就我所知，您的示例添加或删除了一个新类，但没有修改现有类的属性。@orschiro在原始样式表的每个选择器前面加上自定义类名（

。在我的示例中，启用“我的样式”

）。然后，您可以通过从祖先元素（在我的示例中是根元素，

，

document.documentElement

）添加或删除类名来有效地切换样式。现在我明白了您的意思。它工作得很好！谢谢在

default.css

中我添加了

.toggleClass.aeH{margin top:55px！important；}

和

default.js

中我添加了

classList.add（'toggleClass'）