如何用原生JavaScript阻止浏览器加载Web应用？优化GreaseMonkey脚本

我懂你的痛点！这种先加载出网站内容再拦截的体验太糟了，本来想戒瘾结果还先被内容勾到，完全违背初衷对吧？

其实问题出在GreaseMonkey默认的脚本运行时机上——通常脚本会等页面DOM加载完成后才执行，这就给了网站内容加载的时间。要解决这个问题，你可以从这几个方向入手：

• 修改脚本的运行时机：在脚本的元数据里加上@run-at document-start，这样脚本会在页面开始加载的最早期就执行，甚至在浏览器开始解析HTML之前。这时候你可以直接重写页面内容，不给网站任何加载显示的机会。比如在脚本开头加上对应的元数据，然后在逻辑里直接覆盖整个页面：

  // ==UserScript==
  // @name         上瘾网站拦截器
  // @namespace    http://tampermonkey.net/
  // @version      0.1
  // @description  阻止访问上瘾网站
  // @author       You
  // @match        *://example.com/*  // 替换成你要拦截的目标网站
  // @run-at       document-start
  // @grant        none
  // ==/UserScript==
  
  (function() {
      'use strict';
      // 直接用提示内容覆盖整个页面
      document.documentElement.innerHTML = '<body style="background-color: red; display: flex; justify-content: center; align-items: center; height: 100vh;"><h1 style="color: white;">别刷了！该专注正事了！</h1></body>';
      // 强制终止后续资源加载
      window.stop();
  })();
  

• 强制终止页面加载：在替换页面内容后立刻调用window.stop()，能彻底中断浏览器对原网站资源的加载，从根源上避免内容漏出。
• 放弃DOM相关触发事件：别再依赖DOMContentLoaded或者window.onload这类事件来启动拦截逻辑，这些事件都要等页面加载到一定阶段才会触发，必然会带来延迟。

这样调整之后，脚本会在页面刚开始加载的瞬间就完成拦截替换，你基本不会看到原网站的任何内容，完全能达到你想要的戒瘾拦截效果！

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