Chrome扩展程序：与Gmail邮件匹配的网址格式的内容脚本

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邮件上面的URL模式我的自定义样式表不适用。

任何想法，为什么它不适用？

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

Answer 1

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

为了达到预期效果，只需在"*://*.mail.google.com/*"上插入样式表，并使用内容脚本来检测URL更改。例如：

片段的manifest.json：

例 default.css

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

：

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

如果前缀你的CSS选择器需要太多的努力，我建议使用一个CSS预处理器一样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();