Chrome 扩展：如何禁用页面可见性 API

Question

我正在编写一个 Chrome 扩展，需要防止网页触发文档可见性更改事件。 至少我需要能够覆盖 document.visibilityState（即使它是只读属性）。 如果不可能，因为这个扩展仅供我使用，不会出现在 Chrome 扩展商店中，有没有办法配置我的 Chrome 浏览器来实现我想要的？ 我只需要在 Chrome 的“开发者模式”打开时使用此扩展程序，其他时间都不需要。

我希望有人能想出一种创造性的方法来实现这一目标。 谢谢你。

请注意：4 年前的答案中有一个解决方案在较新版本的 Chrome 中不再生效： Spoof or disable the Page Visibility API

自己测试一下：

// This codes worked 4 years ago but not anymore
var c='(function(){var a=Node.prototype.addEventListener;Node.prototype.addEventListener=function(e){if(e=="visibilitychange"||e=="webkitvisibilitychange"){}else a.apply(this,arguments)}})()'
, E=document.documentElement;
E.setAttribute('onreset', c);
E.dispatchEvent(new CustomEvent('reset'));
E.removeAttribute('onreset');

// THIS WILL STILL LOG THE STATES EVEN WITH THE ABOVE CODE RUNNING
document.addEventListener("visibilitychange", function() {
    console.log( document.visibilityState );
});

如果在 Chrome 中不可能，是否有可以实现此目的的 Firefox/Safari/Opera 浏览器代码？

Answer 1

这是我的解决方案：

for (event_name of ["visibilitychange", "webkitvisibilitychange", "blur"]) {
  window.addEventListener(event_name, function(event) {
        event.stopImmediatePropagation();
    }, true);
}

我添加了blur事件，因为我想跳过的视频（everfi.net）使用它来检测我何时切换窗口。 阻止该事件以及visibilitychange和webkitvisibilitychange做了诀窍:)

我还修改了扩展程序的清单，以便它可以在iframe中运行。

完整代码（chrome扩展名）： https ： //github.com/NavinF/dont

确认使用以下狗牌：

Google Chrome   63.0.3239.132 (Official Build) (64-bit)
Revision    2e6edcfee630baa3775f37cb11796b1603a64360-refs/branch-heads/3239@{#709}
OS  Mac OS X
JavaScript  V8 6.3.292.49
Command Line    /Applications/Google Chrome.app/Contents/MacOS/Google Chrome --flag-switches-begin --flag-switches-end

Answer 2

我在 StackExchange 上找到了一个很好的解决方案：

 Object.defineProperty(document, 'visibilityState', {value: 'visible', writable: true}); Object.defineProperty(document, 'hidden', {value: false, writable: true}); document.dispatchEvent(new Event("visibilitychange"));

如果有人无法在浏览器扩展中使用上述解决方案或此页面上的任何其他解决方案（就像我所做的那样），解决方案是将欺骗可见性 API 的脚本直接添加到 DOM。

在 manifest.json 中，我添加了以下内容：

"content_scripts": [
    {
      "matches": ["*://*/*"],
      "js": ["disable.js"]
    }
 ]

然后我使用 disable.js 添加了一个实际操作页面的脚本。

 let s = document.createElement("script"); s.setAttribute("id", "yourScriptID"); s.textContent = ` /** * Monitors changes to the page visibility. */ document.addEventListener('visibilitychange', () => { /** * Uncomment this line to debug whether the * Page Visibility API is being spoofed. * console.log('Document.hidden = "${document.hidden}".'); **/ Object.defineProperty(document, 'visibilityState', { value: 'visible', writable: true, }); Object.defineProperty(document, 'hidden', { value: false, writable: true }); });`; (document.head || document.documentElement).appendChild(s);

这样做的原因是“内容脚本生活在一个孤立的世界中”。

这意味着它们可以访问被注入页面的 DOM，但不能访问页面创建的任何 JavaScript 变量或函数。

在了解内容脚本如何与页面交互以及如何通过扩展安全/正确地注入脚本时，您会发现以下讨论非常有帮助：

使用内容脚本访问页面上下文中定义的变量和函数

HTH, 姆瓦莱