阻止对每个网站域的全部或部分 DOM 内容进行解析

Question

我创建了一个小的命令式香草 JavaScript 脚本来阻止分散注意力的新闻网站我觉得有一种类似上瘾的行为：

// ==UserScript==
// @name         blocksite
// @match        *://*.news_site_1.com/*
// @match        *://*.news_site_2.com/*
// ==/UserScript==

function blocksite () {
    document.body.innerHTML =`<div dir="ltr"; style="font-size:100px; font-weight: bold; text-align: center">Blocked !</div>`;
}

setTimeout( blocksite(), 1000)
setTimeout( blocksite(), 5000) // Block possible later DOM mutations;
setTimeout( blocksite(), 10000) // Block possible later DOM mutations;

该脚本基本上可以工作（弹出窗口接管了 DOM），但我的问题是它只在解析和呈现所有 DOM 内容后才阻止网站，而我很感兴趣一般阻止解析。

虽然收听 load 事件为时已晚，但收听较早的 DOMContentLoaded 事件可能比收听 load 或收听 setTimeout() 有更好的结果，因为阻塞可能会在内容被解析后立即发生，而不是呈现。
然而，我需要一种方法来完全阻止解析相关网站的任何网页（或者，在解析第一个 DOM HTML 元素节点后阻止任何进一步的解析）。

我试过的

根据评论，我在 Google Chrome:

中尝试过

window.stop(); 我不记得有任何重大变化
window.close(); 它只在 devtool 控制台对我有效
window.location.replace("about:blank"); 它只在 load 事件结束后才对我有用，而不是在解析开始时

我的问题

我需要的操作是否可以使用最新的 ECMAScript (10) 实现？如果可以，应该使用什么命令？

Sxribe 更新：

亲爱的 Sxribe，我使用以下代码创建了以下文件。
该文件确实由 Tampermonkey 加载（具有适当的 @match 列表）但我在加载匹配的网站时看到浏览器没有变化（这些网站未被阻止并正常加载）。

文件中的代码

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Tampermonkey 中的文件调用

window.open("C:\Users\MY_USER_NAME\Desktop\blocksite.html");

Answer 1

要中止加载网站，您可以简单地使用 window.stop() 方法。

调用时，当当前脚本完成时运行，网站解析完全停止。

例如：

<p>Before scripts</p>
<script>
  document.write('<p>Before stop</p>')
  console.log('Before stop')

  window.stop()

  document.write('<p>After stop</p>')
  console.log('After stop')
</script>
<p>Between scripts</p>
<script>
  console.log('Second script')
  document.write('<p>Second script</p>')
</script>
<p>After scripts</p>

以上HTML显示：

Before scripts
Before stop

而您可以在控制台中看到以下内容：

Before stop
After stop

这表明 <script> 调用 .stop() 已完全评估，但未显示 .stop() 之后对 DOM 所做的更改。

或者，要删除完整的 DOM 内容，重定向浏览器可能会更好，该解决方案甚至在页面加载后仍然有效：

window.open('about:blank','_self')

Answer 2

这里是旧的错误答案：https://hastebin.com/vujuduforu.txt

好吧，所以，chrome/firefox 不喜欢用 window.close() 打开本地文件。最后，我只是简单地将网站托管在 glitch.com（免费 100%）上，然后重定向到它。这是我的所有代码：

Tampermonkey 脚本：

// ==UserScript==
// @name         blocktest
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        *://*.bing.com/*
// ==/UserScript==

(function() {
    'use strict';
    window.open("https://block-sxribe.glitch.me/", "_self");
})();

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>This site has been blocked.</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <div class="flex-container">
        <div class="content">
            <h1>This site has been blocked.</h1>
            <p id="sep"></p>
            <p>This site was blocked with Tampermonkey.</p>
        </div>
    </div>
</body>
</html>

CSS:

@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');

* {
    margin: 0;
    padding: 0;
    font-family: 'Open Sans', sans-serif;
    text-transform: uppercase;
}

.flex-container {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

#sep {
    margin-left: 20vw;
    width: 60vw;
    border-bottom: 1px solid lightgray;
}

tl;dr 托管网站在线，运行 window.open("website location.com", "_self") 打开当前 window.

的网站

Answer 3

如果您以任何方式控制网站服务器，您可以代理外部脚本，甚至内部脚本，这样当您不想被解析时，您只需添加 return;在每个代理脚本的顶部。

通过代理，我的意思是：

你有一个脚本，http://example.com/script.js
您在应用程序中创建一个从服务器加载 http://example.com/script.js 并 return 结果的路径。
如果您不想 http://example.com/script.js 被解析，return 一个空脚本或 return http://example.com/script.js 的内容但在添加 return; 作为文件的顶部。

代理的 path/route 可能是这样的：

const script = encodeUriComponent('http://example.com/script.js')
http://myserver.com/proxy?url=script&allowed=false

阻止对每个网站域的全部或部分 DOM 内容进行解析

Prevent all or some DOM content to be parsed, per website domain

javascript

parsing

dom

dom-events

ecmascript-2018

我试过的

我的问题

Sxribe 更新：

文件中的代码

Tampermonkey 中的文件调用