时间戳

首页 > 解决方案 > 如何优雅地防止某些元素在现代浏览器上呈现

javascript - 如何优雅地防止某些元素在现代浏览器上呈现

问题描述

所以我想防止某些我知道它们的 html/css 属性的元素（例如广告横幅），例如，XXXX-ads-notification当我浏览某些域时，它们将有一个类似的类来呈现/显示？

目前我所做的是，当网页完全呈现时，我检查元素并手动删除它们，这样我就可以在查看某些页面/域时摆脱广告/通知等这些烦人的事情。

但是，效率低下，每次都需要这样做，更不用说我想为不同的域处理不同的情况。

我不确定我是否需要编写自己的扩展来处理这个问题，或者有没有更出色/优雅的方式来实现这个目标？

顺便说一句，我正在使用 AdBlock，我觉得它的规则不太适合我的情况，因为有些广告更适合内容（例如原生广告），可能无法被此扩展程序捕获......</p>

由于浏览器在客户端存储 html 文件，我实际上不认为这是一个真正的 hack，应该可以自由地这样做吗？

标签： javascripthtmlgoogle-chrome-extensionbrowser

解决方案

我有一个用户脚本可以做到这一点。（你需要一个像 Tampermonkey 这样的用户脚本管理器。）我使用的一般想法是创建一个指向广告的 CSS 选择器列表，并插入一个<style>将这些元素设置为display: none.

例如，如果一个站点有一个名为 的类ad，则可以通过插入以下内容来隐藏它：

<style>
.ad {
  display: none !important;
}
</style>

这是完整的用户脚本：

// ==UserScript==
// @name         Hide Frames
// @namespace    CertainPerformance
// @version      1.0.0
// @match        *://*/*
// @run-at       document-start
// @grant        none
// ==/UserScript==

const selectorsToHideStr = `
stackoverflow.com
  .-marketing-link
  .bottom-share-links
  #footer

example.com
  .someOtherAdSelectorOnExampleDotCom
`;
// ADD SITES AND SELECTORS ABOVE AS NEEDED

const selectorsToHideBySite = selectorsToHideStr
  .match(/^.+(?:\n +.+)+/gm)
  .reduce((a, siteStr) => {
    const lines = siteStr.split('\n');
    const site = lines.shift();
    const selector = lines
      .map(str => str.trim())
      .join(', ');
    a[site] = selector;
    return a;
  }, {});

const selectorsToHide = selectorsToHideBySite[window.location.host];
if (selectorsToHide) {
  const styleTextContent = selectorsToHide + ' { display: none !important }';
  document.documentElement.appendChild(document.createElement('style')).textContent = styleTextContent;
}

要隐藏页面上的广告，只需添加到selectorsToHideStr. 在上面的示例中，选择器.-marketing-link、、.bottom-share-links和#footer在堆栈溢出时被隐藏。

对于您的示例，如果网站somesite.com有带有类的广告XXXX-ads-notification，您可以将其添加到selectorsToHideStr：

somesite.com
  [class$="ads-notification"]

这将匹配并隐藏类名以ads-notificationwhen on结尾的元素somesite.com。

推荐阅读