Chrome拡張機能を使ってサイトへのアクセスを抑制する

この記事は、 Supership株式会社 Advent Calendar 2024 - Qiita の6日目の記事になります。

はじめに

Supership株式会社 の @tanjo です。

Chrome を使って安全で快適なウェブブラウジング体験できていますか？

• 詐欺サイト・中身がなくて広告がやたら多いページを踏んでしまった。
• R18・生理的に受け付けないサイトへのリンクを踏んでしまった。
• 仕事中、ついうっかりYouTube・SNSを見てしまった。

なんてことはあると思います。
いくら注意していても人には限界があります。
人の意志に頼るだけでは防げないので、
ツールの力を使って問答無用で阻止しようと思います。

今回は、Chrome 拡張機能でウェブサイトブロッカーを作って簡単に解決してみました。

Chrome 拡張機能を作る前の下準備

自作した Chrome 拡張機能を利用する場合、デベロッパーモードを ON にする必要があります。

手順は以下の通り、

1. chrome://extensions/ にアクセスする
2. デベロッパー モード を ON にする

以上で完了です。

作成するもの

サイトをブロックするだけならプログラミングは不要です。
新しいフォルダ・ディレクトリ（app）を用意して、以下のファイルを作成するだけです。

- app
  - icons （拡張機能用のアイコン）
    - 16.png
    - 48.png
    - 128.png
  - manifest.json
  - ruleset.json

アイコンの作成

macOS の場合

正方形の画像を作って sips コマンドでサクッと各サイズの画像を作りましょう。

sips -Z 128 icon.png --out 128.png
sips -Z 48 icon.png --out 48.png
sips -Z 16 icon.png --out 16.png

こんな感じで3種類のサイズの画像を用意します

manifest.json

Google 拡張機能を作成するには manifest.json を作成する必要があります。

1から説明すると大変なので以下の内容を利用してください。

名前や説明文くらいしかいじる部分はないと思います。

manifest.json

{
    "manifest_version": 3,
    "name": "特定サイトのアクセスをブロック",
    "version": "0.0.1",
    "description": "特定サイトのアクセスをブロックします",
    "icons": {
        "16": "icons/16.png",
        "48": "icons/48.png",
        "128": "icons/128.png"
    },
    "permissions": [
        "declarativeNetRequest"
    ],
    "declarative_net_request": {
        "rule_resources": [
            {
                "id": "ruleset",
                "enabled": true,
                "path": "ruleset.json"
            }
        ]
    }
}

ruleset.json の作成

アクセスを遮断したいURLのルールセットを作成していきます。

設定項目は以下の通りで変更が必要なのは id と urlFilter 部分だけです。

• id
  • ユニークなものにしてください
• priority
  • 基本 1
• action
  • type
    • 今回は block
    • 他にも設定ができるので 公式サイトを確認してください
• condition
  • urlFilter
    • || はドメイン名アンカーです。
    • URL フィルタの構文の詳しい書き方に関しては公式サイトを確認してください
  • resourceTYpes
    • 今回は main_frame
    • 他の種類は 公式サイト を確認してください

サンプルを用意しました。

多すぎるのも問題なので例として3つ定義しています。

ruleset.json

[
    {
        "id": 1,
        "priority": 1,
        "action": {
            "type": "block"
        },
        "condition": {
            "urlFilter": "||x.com/",
            "resourceTypes": [
                "main_frame"
            ]
        }
    },
    {
        "id": 2,
        "priority": 1,
        "action": {
            "type": "block"
        },
        "condition": {
            "urlFilter": "||tiktok.com/",
            "resourceTypes": [
                "main_frame"
            ]
        }
    },
    {
        "id": 3,
        "priority": 1,
        "action": {
            "type": "block"
        },
        "condition": {
            "urlFilter": "||instagram.com/",
            "resourceTypes": [
                "main_frame"
            ]
        }
    }
]

拡張機能をChromeにインストール

以上で完成なのでインストールしてみましょう。

1. chrome://extensions/ にアクセスする
2. パッケージ化されていない拡張機能を読み込む ボタンを押す
3. 作成した app フォルダ・ディレクトリを選択する

これで完了です。

結果

試しに X (旧Twitter) へアクセスしてみましょう。

このようにChromeがアクセスをブロックしてくれるようになります。

おわりに

今回は Chrome 拡張機能でウェブサイトブロッカーを作成してみました。

ブロックしたいサイトを動的に設定することも可能なので、
フォーマットを決めてシェアしたりして、
悪意のあるサイト等を集合知でブロックできるようになるかもしれません。

ちょっとした工夫でよりよい安全で快適なウェブブラウジングを目指しましょう。

最後に宣伝です。

Supershipではプロダクト開発やサービス開発に関わる人を絶賛募集しております。
ご興味がある方は以下リンクよりご確認ください。
Supership 採用サイト
是非ともよろしくお願いします。