Chrome扩展Manifest如何仅匹配Twitter基础URL，排除子页面？

你遇到的问题其实是Chrome扩展匹配规则的常见坑——默认的matches配置["https://twitter.com/"]会匹配所有以该URL为前缀的页面（比如/mentions、/home这些子页面），因为Chrome的匹配逻辑是前缀匹配，只要路径以/开头就会命中。下面给你两种可靠的解决方案：

方案一：利用Manifest的include_globs精确匹配 #

Chrome扩展支持用include_globs来做更精确的URL匹配，它可以限定只匹配完全等于主页的URL。修改你的Manifest配置如下：

"content_scripts": [
  {
    "matches": ["https://twitter.com/*", "http://twitter.com/*", "https://www.twitter.com/*", "http://www.twitter.com/*"],
    "include_globs": ["https://twitter.com/", "http://twitter.com/", "https://www.twitter.com/", "http://www.twitter.com/"],
    "js": ["your-content-script.js"],
    "css": ["your-styles.css"]
  }
]

这里的matches先覆盖所有可能的Twitter域名和协议，然后include_globs精确筛选出只有主页的URL，这样子页面就不会被匹配到了。

方案二：在内容脚本中主动判断URL（更适合SPA场景） #

因为Twitter是单页应用（SPA），很多子页面是通过前端路由跳转的，不会重新加载页面，这时候Manifest的静态匹配规则可能无法实时生效。这种情况下，在你的内容脚本开头添加URL判断会更稳妥：

// 定义所有需要匹配的主页URL（考虑重定向和www域名）
const allowedUrls = [
  "https://twitter.com/",
  "http://twitter.com/",
  "https://www.twitter.com/",
  "http://www.twitter.com/"
];

// 检查当前页面URL是否在允许列表中
if (!allowedUrls.includes(window.location.href)) {
  // 如果不是主页，直接终止脚本执行
  return;
}

// 下面写你的扩展核心逻辑
console.log("仅在Twitter主页执行的代码");

这种方法的优势是，即使Twitter的路由方式变化，也能准确判断当前是否是主页，避免误触发。

如果你的扩展还用到了后台脚本或者其他逻辑，记得也要同步调整对应的匹配规则，确保只有主页触发相关逻辑。

内容的提问来源于stack exchange，提问作者xthree