Google検索結果からYahoo!のページをグレーアウトする拡張機能 Ver.1.0.0

目的

• Yahoo!のサービスがヨーロッパからアクセスできなくなった¹。
• 誤ってYahoo!のリンクを開くとアクセス制限の主旨が表示される。
• 誤って開く度にストレスを感じるので、Yahooのドメインのみ検索結果からグレイアウトまたは検索除外するChrome拡張機能を作成した。

特徴

• Yahoo.co.jp のみグレイアウトして、目立たなくする。
• VPN 等を使用する場合も考慮して、クリックしてページを開くことは可能。

ソースコード

manifest.jsonの"content_scripts"の"matches"のリンクに当てはまるサイトを開いたときに、style.cssが実行される拡張機能です。

manifest.json

{
  "name": "Hide-YahooJP",
  "version": "1.0.0",
  "manifest_version": 3,
  "description": "Extension to grey out Yahoo! JP services in google search results",
  "content_scripts": [
    {
      "matches": [
        "*://www.google.com/search?*",
        "*://www.google.co.jp/search?*",
        "*://www.google.de/search?*",
        "*://www.google.com.au/search?*",
        "*://www.google.be/search?*",
        "*://www.google.com.br/search?*",
        "*://www.google.ca/search?*",
        "*://www.google.ch/search?*",
        "*://www.google.cn/search?*",
        "*://www.google.dk/search?*",
        "*://www.google.fi/search?*",
        "*://www.google.com.hk/search?*",
        "*://www.google.co.in/search?*",
        "*://www.google.it/search?*",
        "*://www.google.co.kr/search?*",
        "*://www.google.co.uk/search?*",
        "*://www.google.fr/search?*"
      ],
      "css": ["style.css"]
    }
  ],
  "icons": {
    "16": "/icons/icon16.png",
    "48": "/icons/icon48.png",
    "128": "/icons/icon128.png"
  }
}

content_scriptsを使って、特定のwebページでstyle.cssを実行するようにしている。Google検索のドメインは国ごとにあるため、代表的な国を抽出した。

style.css

div.v7W49e > div > div > div:has(a[ping*="yahoo.co.jp"]) * {
  color: rgba(80, 80, 80, 0.5) !important;
  text-decoration: none;
}
div.v7W49e > div > div > div:has(a[ping*="yahoo.co.jp"]) * img {
  filter: grayscale(100%);
}

yahoo.co.jpが含まれているときのみ全体をグレーに色を変更する。

ソースコードと拡張機能へのリンク

GitHubとChrome拡張機能ストアで公開しています。

参考文献

• Chrome拡張機能 manifest.json Ver.3の書き方
• Chrome拡張機能開発の始め方 2022 manifest v3
• Chrome拡張機能ManifestV3へ対応する方法（V2から
• 広告ブロックするchrome拡張を自作してみた

1. https://privacy.yahoo.co.jp/notice/globalaccess.html ↩