Chrome Image Hider - ウェブ上の画像を簡単に非表示にする拡張機能

概要

Chrome Image Hiderは、Google Chromeブラウザ向けの拡張機能で、特定のウェブサイト上の画像をユーザーが自由に非表示にできるツールです。画像を右クリックして「このサイトで自動的に非表示にする」を選べば、その画像は同じドメイン内のすべてのページで非表示になります。非表示のルールはドメインごとに保存され、拡張機能のポップアップ画面で管理・削除が可能。広告や不要な画像を除去したい時や、視覚的なノイズを減らしたい時に役立ちます。シンプルなUIと軽量なJavaScript設計により、ブラウジングを快適にカスタマイズできるのが特徴です。

リポジトリの統計情報

スター数: 3
フォーク数: 0
ウォッチャー数: 3
コミット数: 4
ファイル数: 10
メインの言語: JavaScript

主な特徴

任意の画像を右クリックで簡単に非表示設定可能
非表示ルールはドメイン単位で保存され、同一サイト内のすべてのページに適用
拡張機能のポップアップで非表示ルールの一覧確認・削除が可能
一時的に自動非表示機能のオン・オフ切り替えができる

技術的なポイント

Chrome Image Hiderは、主にJavaScriptで実装されたChrome拡張機能の典型的な構成を持ちます。背景で動作するbackground.jsでは、拡張機能の状態管理やユーザーの操作に対応するイベントリスナーが設定されています。content.jsは、ユーザーが閲覧するページに注入され、DOM操作を通じて該当画像の非表示を実現。画像の特定には、右クリックイベントとコンテキストメニューを連携させ、ユーザーが指定した画像のsrc属性などで識別を行っています。

非表示ルールはchrome.storage APIを活用し、ドメイン別に保存。これにより、同一サイト内の複数ページで同じ画像を再度非表示にする必要がなくなり、ユーザーの手間を大幅に削減します。ポップアップ画面では、保存されたルールリストを表示し、任意のルールを削除できるようにUIが設計されているため、管理が直感的です。

また、拡張機能は一時的に自動非表示機能のオン・オフを切り替えるトグル機能を備えており、特定のサイトでのみ非表示設定を有効にしたり解除したりする柔軟性を提供。これにより、ユーザーは必要に応じて表示内容を調整可能です。

全体としては、Chrome拡張機能のAPIをシンプルかつ効果的に活用し、ユーザーの閲覧体験をカスタマイズする実用的なツールに仕上がっています。コード構造もシンプルで保守性が高く、拡張機能開発の入門例としても参考になる設計です。

プロジェクトの構成

主要なファイルとディレクトリ：

.gitattributes: Git属性管理ファイル
LICENSE: ライセンス情報（MITライセンス）
README.md: プロジェクトの説明と使用方法
background.js: 拡張機能のバックグラウンド処理を担当
content.js: ウェブページ内で画像の非表示処理を実行
popup.html: 拡張機能のポップアップ画面のHTML
popup.js: ポップアップ画面の操作ロジック
manifest.json: Chrome拡張機能の設定ファイル
styles.css: ポップアップのスタイルシート
icons/: 拡張機能用アイコンファイル群

まとめ

画像非表示をシンプルに実現する、実用的なChrome拡張機能。

リポジトリ情報：

名前: chrome-image-hider
説明: Image Hider Extension For Google Chrome
スター数: 3
言語: JavaScript
URL: https://github.com/emdidar/chrome-image-hider
オーナー: emdidar
アバター: https://avatars.githubusercontent.com/u/17897757?v=4