Zenn
🗞️

NextDNSのカスタムDenylistを使って、リンクを視覚的にマークする

に公開
Chrome拡張
DNS
browser
tech

はじめに

前回の記事「現在開いているページを NextDNS の拒否ドメインリストへワンクリック追加する」では、NextDNS のカスタムDenylistへ簡単にドメインを追加するためのスクリプトを紹介しました。

今回はその「逆」、つまり すでにブロック対象となっているドメインに対して、ブラウザ上で視覚的なマークを付けて「無駄なクリックを避ける」ことを目的とした仕組みを紹介します。

背景：なぜ視覚的なマークが必要か

  • 検索結果などでニュースサイト・まとめサイトなどの時間泥棒系のリンクを無意識にクリックしてしまう
  • せっかく NextDNS でブロックしても、クリックするまではブロック対象か分からない（ウインドウを閉じる手間が発生）
  • このスクリプトでリンクにマークが付いていれば、前回の記事の方法を使って能動的にブロック対象のサイトを探すときにも役立つ。

実装：リンクをマークするスクリプト

以下のスクリプトを Tampermonkey に追加することで、NextDNS のカスタムDenylistに基づいてリンクを判別し、視覚的に区別できるようになる。

このスクリプトは、NextDNS のカスタムDenylist APIから現在ブロックしているドメインの一覧を取得し、ページ内のリンクがそのドメインに一致している場合に視覚的なマーク（オレンジ色の枠と文字色）を付ける。これにより、リンクをクリックする前にブロック対象かどうかを一目で判別できるようになる。

// ==UserScript==
// @name         NextDNS Denylist Marker (All Sites)
// @namespace    http://tampermonkey.net/
// @version      0.4
// @description  Mark links on any page if they match NextDNS custom denylist
// @match        *://*/*
// @grant        GM_xmlhttpRequest
// @connect      api.nextdns.io
// @run-at       document-idle
// ==/UserScript==

(function () {
  'use strict';

  const PROFILE_ID = 'YOUR_PROFILE_ID';
  const API_KEY = 'YOUR_API_KEY';
  const apiUrl = `https://api.nextdns.io/profiles/${PROFILE_ID}/denylist`;

  GM_xmlhttpRequest({
    method: 'GET',
    url: apiUrl,
    headers: { 'X-Api-Key': API_KEY },
    onload: function (response) {
      if (response.status === 200) {
        const denylistObject = JSON.parse(response.responseText);
        const denylist = denylistObject.data.filter(entry => entry.active).map(entry => entry.id);
        markBlockedLinks(denylist);
      }
    },
    onerror: function (err) {
      console.error('[NextDNS] APIリクエスト失敗:', err);
    }
  });

  function markBlockedLinks(denylist) {
    const links = document.querySelectorAll('a[href]');
    links.forEach((link, i) => {
      try {
        const url = new URL(link.href);
        const hostname = url.hostname;
        const match = denylist.find(blocked => hostname === blocked || hostname.endsWith(`.${blocked}`));
        if (match) {
          mark(link, match);
        }
      } catch (e) {}
    });
  }

  function mark(link, matchedDomain) {
    const orange = 'rgba(255, 140, 0, 0.7)';
    link.style.color = orange;
    link.style.border = `1px solid ${orange}`;
    link.style.borderRadius = '4px';
  }
})();

🔐 PROFILE_ID と API_KEY の取得方法については、前回の記事 を参照してください。

実行例（Yahooニュース）

例えば news.yahoo.co.jp をカスタムdenylistに登録している場合、Google検索やYahooトップページでこのようにリンクがマークされる。

今後の拡張案

  • ブロック対象リンクを非表示にするモード
  • 許可リスト（Allowlist）との共存：たとえば yahoo.co.jp をdenylistに入れている場合でも、sports.yahoo.co.jp や finance.yahoo.co.jp のように有用なサブドメインは除外したいことがある。Tampermonkey 側でそれらを allowlist に登録し、マーク対象から除外することで対応できるようにする。今後の拡張で allowlist を別に定義し、denylist と照合する前に除外する設計が考えられる。

まとめ

  • NextDNS の denylist は「ブロックする」だけでなく「視覚的に警告する」ことにも活用できる
  • Tampermonkey を使えばシンプルな仕組みで実現できる
  • 無意識の時間浪費を防ぐ補助ツールとして活用できる

おわりに

今回は、NextDNSのカスタムDenylistと連携してリンクを視覚的にマークするスクリプトを紹介しました。前回の記事で扱った「ブロック対象への追加」と組み合わせることで、より効率的な時間管理が可能になります。

このスクリプトの真価は、スマホでのダラダラ閲覧を防ぐための効率的な仕組みを提供することにあります。PCで視覚的にマークされたブロック対象リンクを確認し、前回記事の方法を使ってNextDNSのブロックリストに追加することで、スマホを含む全デバイスで同じサイトがブロックされるようになります。つまり、PCでの「発見→追加」作業が、スマホでの「気づいたら何時間もダラダラとネットサーフィンしてしまう」という事態の根本的な防止につながります。

実装自体はシンプルですが、NextDNS APIを活用することでリアルタイムな状態反映を実現している点がポイントです。ブロックリストの更新が即座に視覚的なマークにも反映されるため、一度セットアップすれば継続的に効果を発揮してくれます。
自分なりのブロックリストを設定して、ダラダラとした時間の浪費を防ぎ、より意図的なWeb体験を実現してみてください。

Discussion