Question

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

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

但是，当我使用上面的网址格式访问Gmail邮件时，我的自定义样式表不会应用。

为什么不应用它的任何想法？

如果我只使用"matches": ["*://*.mail.google.com"]，那么它可行。但我不希望样式表也应用于我的收件箱页面。因此，我正在寻找一种只捕获单个消息页面的模式。

Answer 1

在匹配模式中，位置片段（#...）始终被忽略。 Last time I checked，"css"字段也会忽略查询字符串。

要获得所需效果，只需在"*://*.mail.google.com/*"上插入样式表，然后使用内容脚本检测URL更改。例如：

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选择器添加前缀需要花费太多精力，我建议使用像LESS这样的CSS预处理器。

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邮件的网址格式

1 个答案: