Chrome扩展中针对Facebook禁用Page Visibility API的方案问询

你之前的事件拦截方案失效的核心原因是：Facebook除了监听visibilitychange等事件外，还会主动读取document.hidden、document.visibilityState等原生属性判断页面可见状态，仅阻止事件冒泡无法覆盖这部分判断逻辑。

完整实现步骤如下：

• 首先在扩展的manifest.json中配置内容脚本的运行时机为document_start，确保覆写逻辑在Facebook业务代码加载前执行
• 向页面上下文注入属性覆写+事件拦截的完整逻辑，代码示例如下：

// 内容脚本执行代码
function injectPageVisibilityOverride() {
  const injectScript = document.createElement('script');
  injectScript.textContent = `
    // 覆写核心可见性判断属性
    Object.defineProperties(document, {
      hidden: { get: () => false, configurable: true },
      visibilityState: { get: () => 'visible', configurable: true },
      // 兼容webkit前缀版本
      webkitHidden: { get: () => false, configurable: true },
      webkitVisibilityState: { get: () => 'visible', configurable: true }
    });
    // 拦截所有相关事件，阻止页面感知到可见性变化
    ['visibilitychange', 'webkitvisibilitychange', 'blur', 'focusout'].forEach(eventName => {
      window.addEventListener(eventName, e => e.stopImmediatePropagation(), true);
      document.addEventListener(eventName, e => e.stopImmediatePropagation(), true);
    });
  `;
  document.documentElement.prepend(injectScript);
  injectScript.remove();
}
injectPageVisibilityOverride();

额外注意事项：

• 如果你需要在扩展中调用页面滚动触发懒加载，无需将标签页切为激活状态，直接通过内容脚本调用window.scrollTo即可，结合上述覆写逻辑可正常触发数据加载
• 若遇到Facebook更新逻辑导致覆写失效，可新增MutationObserver监听页面script标签插入，每次新脚本插入前重新执行一次覆写逻辑即可

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