👌

Yahoo Blocker Chrome拡張機能の作成方法

2024/05/15に公開

アドオン

tech

以下にMarkdown形式でブログ記事の内容を書きます。目的、作成方法、設定の仕方を順に説明しています。

yahooを開こうとすると、こんな辛辣な言葉をいただけます。

目的

この拡張機能は、仕事や勉強中に無意識にYahoo!を開いてしまう自分自身を戒めるためのものです。特定のURLにアクセスしようとしたときに、カスタムメッセージを表示してアクセスをブロックします。

作成方法

プロジェクトフォルダの作成
- 任意の場所に新しいフォルダを作成し、適当な名前を付けます。例えば yahoo-blocker など。
ファイルの作成
- 以下のファイルをプロジェクトフォルダ内に作成します。

manifest.json ファイル

{
  "manifest_version": 3,
  "name": "Yahoo Blocker",
  "version": "1.0",
  "description": "Blocks Yahoo! and displays a custom message.",
  "permissions": [
    "declarativeNetRequest"
  ],
  "host_permissions": [
    "*://*.yahoo.co.jp/*"
  ],
  "declarative_net_request": {
    "rule_resources": [{
      "id": "ruleset_1",
      "enabled": true,
      "path": "rules.json"
    }]
  }
}

rules.json ファイル

[
  {
    "id": 1,
    "priority": 1,
    "action": {
      "type": "redirect",
      "redirect": {
        "url": "chrome-extension://<YOUR_EXTENSION_ID>/blocked.html"
      }
    },
    "condition": {
      "urlFilter": "*://*.yahoo.co.jp/*",
      "resourceTypes": ["main_frame"]
    }
  }
]

<YOUR_EXTENSION_ID> は、後で取得する拡張機能IDに置き換えます。

blocked.html ファイル

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Blocked</title>
  <style>
    body {
      background-color: black;
      color: white;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      font-size: 24px;
      text-align: center;
    }
  </style>
</head>
<body>
  見る必要ある？時間の無駄だよ？
</body>
</html>

popup.html ファイル

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Yahoo Blocker</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 10px;
    }
  </style>
</head>
<body>
  <h1>Yahoo Blocker</h1>
  <p>この拡張機能はYahoo!のサイトへのアクセスをブロックします。</p>
</body>
</html>

設定の仕方

Chromeで拡張機能を読み込む
- Chromeブラウザを開き、chrome://extensions/ にアクセスします。
- 右上の「デベロッパーモード」をオンにします。
- 「パッケージ化されていない拡張機能を読み込む」ボタンをクリックし、作成したプロジェクトフォルダを選択します。
拡張機能のIDを確認
- 拡張機能が読み込まれると、その詳細を表示してIDを確認します。
- rules.json ファイルの <YOUR_EXTENSION_ID> をこのIDに置き換えます。
rules.json ファイルの修正
- 置き換えたIDを保存し、rules.json ファイルを更新します。
再読み込み
- chrome://extensions/ ページで拡張機能を再読み込みします。

これで、https://www.yahoo.co.jp/ にアクセスしようとすると、「見る必要ある？時間の無駄だよ？」というメッセージが表示されるはずです。

このブログ記事を参考に、仕事や勉強中にYahoo!を開かないように自分を戒めるChrome拡張機能を作成してみてください。

ちなみに設定している限り閲覧はできません。

目的

作成方法

設定の仕方

Discussion