広告ブロック

2020-09-22

gas, ad, javascript, ブックマークレット

ウゼぇ!と思わざるを得ないWEB広告と出会ったときにササッと除外するブックマークレットを作った

1
javascript:(function(){ var xhr = new XMLHttpRequest(); xhr.open('GET', 'https://script.google.com/macros/s/AKfycbzDeDoKa-_JuaeivOvpdhES7uRWIm6zTVytH6pDKpXHgk4J-1cp/exec', true); xhr.onload = function () { const json = JSON.parse(xhr.responseText); const classNames = json.classNames; const ids = json.ids; classNames.forEach(className => {Array.prototype.slice.call(document.getElementsByClassName(className)).forEach(elm => {elm.remove();})}); Array.prototype.slice.call(document.getElementsByTagName('iframe')).forEach(elm => {elm.remove();}); ids.forEach(id => { Array.prototype.slice.call(document.getElementsByTagName('div')).filter(elm => new RegExp(id).test(elm.id)).forEach(elm => { elm.remove(); })});}; xhr.send(null);})()

分解

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
javascript:(function(){
  var xhr = new XMLHttpRequest();
  xhr.open('GET', 'https://script.google.com/macros/s/AKfycbzDeDoKa-_JuaeivOvpdhES7uRWIm6zTVytH6pDKpXHgk4J-1cp/exec', true);
  xhr.onload = function () {
    const json = JSON.parse(xhr.responseText);
    const classNames = json.classNames;
    const ids = json.ids;
    // classで非表示
    classNames.forEach(className => {
      Array.prototype.slice.call(document.getElementsByClassName(className)).forEach(elm => {
        elm.remove();
      });
    });
    // idでマッチしたら削除
    ids.forEach(id => {
      Array.prototype.slice.call(document.getElementsByTagName('div')).filter(elm => {
        new RegExp(id).test(elm.id));
      }).forEach(elm => {
        elm.remove();
      });
    });
    // iframeは非表示
    Array.prototype.slice.call(document.getElementsByTagName('iframe')).forEach(elm => {
      elm.remove();
    });
  }
  xhr.send(null);
})()

解説

  1. apiをコールしてclassとidの一覧を取得
  2. 取得したclassとidにマッチするdomノードを削除する
    非表示(display: none)でもいい気がするけど一部復活しよる広告がるので
1
2
3
4
5
6
7
8
9
10
11
{
  "classNames": [
    "ad-xxx",
    "xxx-ad",
    ..
  ],
  "ids": [
    "xxx-ad_id",
    ...
  ]
}

こんなjson返すapiを用意して xhr.open('GET', 'https... のURLを変更すればご自分でフィルタしたいclassやidを指定できます

消したくなる広告は随時増えるでしょうからclassとidはgoogleスプレッドシートで管理して
このためにサーバー立てるのもアレなのでgoogle Apps ScriptでAPIを公開しました。

なんで?

「WEB広告は必要悪」と思っちゃいるけど邪魔なのはほんと邪魔。消したい。
卑猥極まりない、記事のど真ん中に居座ってる、単純に邪魔。
広告をフィルタするアプリやproxyもあるけど、完全に除外しちゃうのも申し訳ない。
というか成り立たなくなってしまうので、消したいときだけ消せるブックマークレットにしました。
モバイルブラウザだと使いにくいけど、PCならブックマークバーをポチるだけで消せて便利かなーって。
iframeを問答無用で非表示にするのはやりすぎかもしれない。
idで部分一致したdivを削除はやりすぎかもしれないし、足りないかもしれない。ウーン

一部の広告は、削除や非表示にしてもゾンビのように復活しよる...
広告ベンダーとして、広告をユーザーの目に届ける責任があるのはわかるが
見たくないものや子供に見せたくないものを制御できない苦しみもわかってほしいものです。

コメント

投稿する

投稿したコメントはご自身で削除できません

不適切なコメントと判断した場合は管理側で削除することがあります