能否通过Chrome扩展修改document.referrer？可在页面JS加载前完成吗？

document.referrer是只读属性，无法直接赋值修改，以下是两种可行的方案，均能在页面JavaScript加载前生效，且避免页面闪烁：

方案一：通过Tabs API强制指定referrer加载页面 #

这个方案从根源上设置页面的referrer，既会修改HTTP请求头中的Referrer，也会让document.referrer返回指定值，且无页面闪烁。

实现步骤 #

1. 在扩展的manifest.json中声明所需权限：

{
  "manifest_version": 3,
  "name": "Referrer Modifier",
  "version": "1.0",
  "permissions": ["tabs", "webNavigation"],
  "background": {
    "service_worker": "background.js"
  }
}

2. 在background.js中监听目标页面的导航事件，替换原导航并指定referrer：

chrome.webNavigation.onBeforeNavigate.addListener((details) => {
  // 匹配你需要修改的目标页面URL
  if (details.url.includes("example.com/target-page")) {
    chrome.tabs.update(details.tabId, {
      url: details.url,
      referrer: "https://your-desired-referrer.com" // 设置你想要的referrer
    });
  }
}, { url: [{ hostContains: "example.com" }] });

该方法会在页面开始加载前替换导航流程，完全不会出现闪烁问题。

方案二：内容脚本覆盖document.referrer的取值逻辑 #

如果只需让页面内的JavaScript读取到指定的referrer，无需修改HTTP请求头中的Referrer，可以用这个方案，无需重新加载页面，完全无闪烁。

实现步骤 #

1. 在manifest.json中配置内容脚本，确保在页面JS加载前注入：

{
  "manifest_version": 3,
  "name": "Referrer Overrider",
  "version": "1.0",
  "content_scripts": [
    {
      "matches": ["https://example.com/target-page/*"], // 匹配目标页面
      "js": ["content.js"],
      "run_at": "document_start" // 确保在页面JS加载前注入
    }
  ]
}

2. 在content.js中覆盖document.referrer的getter：

Object.defineProperty(document, "referrer", {
  get: () => "https://your-desired-referrer.com", // 返回你指定的referrer
  configurable: true // 允许后续调整（可选）
});

页面内的所有JavaScript读取document.referrer时，都会得到你设置的值，但实际HTTP请求的Referrer不会改变。

关于你当前方法的问题 #

window.location.replace(window.location.href)本质是重新加载页面，所以必然会出现闪烁，且刷新操作的referrer只能是当前页面本身，无法设置为其他值，这也是该方法的局限性。

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