如何防止浏览器在vanilla JavaScript中加载Web应用程序？

Question

我写了下面的Greasemonkey脚本,以防止自己访问一些网络应用程序(网站),通常这些我觉得有点上瘾.这是我最接近阻止我的浏览器显示这些网站:

// ==UserScript==
// @name        blocko
// @include     *
// ==/UserScript==

window.addEventListener('load', function() {
    let sites = ['example-1.com', 'example-2.com', 'example-3.com'];
    let dotTLD_andAllAfterIt = /\..+/;
    let href = window.location.href;
    for (let i = 0; i < sites.length; i++) {
        if (href.includes(sites[i])) {
            let domain = sites[i].replace(dotTLD_andAllAfterIt, '');
            document.body.innerHTML =`
                <div style="direction: ltr; position: fixed; top: 0; z-index: 999999; display: block; width: 100%; height: 100%; background: red">
                  <p style="position: relative; top: 40%; display: block; font-size: 66px; font-weight: bold; color: #fff; margin: 0 auto; text-align: center">
                    Enough with this ${domain} bullshit!
                  </p>
                </div>
          `;
        }
    }
}, true);

我不满足于我在这里的成就,因为这个脚本让我进入网站,我需要在极少数情况下等待1/2/3/4甚至5秒或更长时间,直到网站消失并且我打印到的消息将出现带有红色背景的屏幕.因此,我不情愿地接触到我想避免的网站内容.

我希望阻止浏览器通过JavaScript导航到网站.有一个名为"BlockSite"的Chrome插件可以帮助解决这个问题,我尝试检查其(巨大的)源代码,但却无法理解它是如何阻止用户移入网站的,不像上面的脚本将用户移动到网站,但几秒钟后(load事件被触发后)消息网站消息.

请分享一种完全阻止自己进入网站的方法,就像使用"BlockSite"一样.

Answer 1

作为解决方案,您可以覆盖网站中所有链接的onclick方法.然后决定让用户关注链接.

const blackList = [`example-1.com`, `example-2.com`]

function onClick(event) {
  const href = this.href.match(/^(?:https?:)?(?:\/\/)?(?:[^@\n]+@)?(?:www\.)?([^:\/\n]+)/i)
  if (!href) return
  const domain = href[1]
  if (blackList.includes(domain)) {
    event.stopPropagation()
    event.preventDefault()
    document.body.innerHTML =`
      <p>
        Enough with this ${domain} bullshit!
      </p>
    `;
  }
}

const elements = document.getElementsByTagName(`a`);
for(let element of elements) {
  element.onclick = onClick
}

.:更新:.

好的,让我解释一下上面的代码.

该代码将click侦听器添加到<a href="...">...</a>当前页面的所有链接().当用户点击上面的功能时会触发.

const href = this.href.match- 我们从href中提取唯一的域部分,以便比较我们的blackList中是否存在url - > if (blackList.includes(domain)).

this- 请参阅链接属性href以获取更多信息,请查看本文.

这是一个演示,这是源代码.

Answer 2

只要您使用window load活动,就需要等待.您需要使用DOMContentLoaded事件.这个答案解释了差异.

如果你改变它会更快

window.addEventListener('load', function() {
   //Your Code
}, true);

至

document.addEventListener("DOMContentLoaded", function(event) {
   //Your Code
});

有许多免费扩展可用于阻止不需要的域.如果您想为Chrome构建一个,请告诉我,在这种情况下,我可以进一步提供帮助.

更新:根据评论删除以下段落

但是如果你想自己扩展,那么你需要特定于浏览器.因为您需要为不同的浏览器编写不同的扩展名.