如何在内容脚本中页面加载前识别Stack Exchange网站？

我正在开发一款全局启用的Chrome扩展，用来修改各类网站的样式，其中需要适配Stack Exchange旗下的所有网站。目前我是通过window.location.hostname来区分站点的，实现代码如下：

// 页面加载前执行的代码
const host = window.location.hostname;
function hostIncludesAny(...strList) {
    for (const str of strList) {
        if (host.includes(str)) {
            return true;
        }
    }
    return false;
}
// ...
// 其他站点判断逻辑
// ...
if (hostIncludesAny("stackoverflow.com", "stackexchange.com", "serverfault.com", "superuser.com", "askubuntu.com")) {
    // 应用Stack Exchange系列网站的样式
}

这种方式需要手动添加独立域名的社区站点，比如superuser.com、askubuntu.com，而stackexchange.com后缀能覆盖大部分子域名站点。我想知道是否有更统一的识别方式，比如通过响应头这类信息源？另外我已经配置了背景脚本，可以通过Chrome API发送消息执行操作，这部分可以利用起来。

可行的统一识别方案 #

1. 利用响应头识别 #

Stack Exchange所有站点的响应头里都包含X-StackExchange前缀的字段，比如X-StackExchange-ParentSite、X-StackExchange-RequestId，这是全系列站点的统一标识。

你可以通过Chrome扩展的chrome.webRequest.onHeadersReceivedAPI在背景脚本里监听所有请求的响应头，一旦检测到这类头，就标记当前站点为Stack Exchange系列，再通过消息通知内容脚本执行样式修改。

示例代码（背景脚本）：

chrome.webRequest.onHeadersReceived.addListener(
  (details) => {
    const isStackExchange = details.responseHeaders.some(header => 
      header.name.startsWith('X-StackExchange')
    );
    if (isStackExchange) {
      // 给当前标签页发送标记消息
      chrome.tabs.sendMessage(details.tabId, { type: 'IS_STACK_EXCHANGE' });
    }
  },
  { urls: ["<all_urls>"] },
  ["responseHeaders"]
);

内容脚本里监听消息：

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.type === 'IS_STACK_EXCHANGE') {
    // 执行Stack Exchange样式修改逻辑
  }
});

2. 检测页面内的全局标识 #

Stack Exchange站点的页面会挂载全局变量StackExchange，你可以直接在内容脚本里判断这个变量是否存在，无需依赖域名：

// 页面加载完成后执行
if (typeof StackExchange !== 'undefined') {
  // 应用Stack Exchange系列网站的样式
}

这种方式更直接，不需要背景脚本配合，适合样式修改这类前端操作。

3. 双重验证提升准确性 #

如果担心极端情况（比如全局变量未加载完成、响应头异常），可以同时结合域名判断和上述两种方式，做双重验证，确保识别的准确性。

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