Element Hider (ABP-style filters)

Adblock Plus 風のフィルタ記法（ドメイン##CSSセレクタ）で、任意のサイト上の要素を非表示にする Chrome 拡張機能です。

特徴

• Manifest V3 対応
• 初期フィルタなし（インストール直後は何も変化しない）
• options ページからフィルタを編集・保存
• 簡単に 1 行追加できるミニ UI 付き
• フィルタは chrome.storage.sync に保存

ディレクトリ構成

element-hider/
  ├── manifest.json
  ├── content-script.js
  ├── options.html
  └── options.js

インストール方法（開発用）

1. このリポジトリ（または element-hider ディレクトリ）を任意の場所に配置
2. Chrome を開き、アドレスバーに chrome://extensions/ を入力
3. 右上の「デベロッパーモード」をオン
4. 「パッケージ化されていない拡張機能を読み込む」をクリック
5. element-hider ディレクトリを選択

これで拡張がインストールされ、右上の拡張機能一覧に表示されます。

使い方

1. 編集ページ（options.html）の開き方

以下のどちらかの方法で開けます。

方法 A: 拡張機能アイコンから

1. Chrome 右上のパズルアイコン（拡張機能）をクリック
2. 一覧から「Element Hider (ABP-style filters)」を探す
3. 右側の︙などのメニューから「オプション」または「拡張機能のオプション」を選択

方法 B: 拡張機能ページから

1. chrome://extensions/ を開く
2. 「Element Hider (ABP-style filters)」のカードで「詳細」をクリック
3. 中にある「拡張機能のオプション」をクリック

2. フィルタの編集（テキストエリア）

options ページには大きなテキストエリアがあります。

• 1 行につき 1 ルール
• 書式は ドメイン##CSSセレクタ

例:

youtube.com##ytd-button-renderer[class="style-scope ytd-masthead"]

書き終えたら「保存（ブラウザに保存）」ボタンを押すと、内容が chrome.storage.sync に保存されます。

3. 簡単追加 UI から 1 行追加

テキストエリアの下に、次のようなブロックがあります。

• 左側: 「適用するページのドメイン」
• 右側: 「一致するCSS」
• 中央: 固定文字列 ##
• ボタン: 「非表示にする」

使い方:

1. 「適用するページのドメイン」に、対象ドメインを入力
   • 例: youtube.com
   • 空のままにすると * とみなされ、全ドメインが対象になる
2. 「一致するCSS」に、CSS セレクタを入力
   • 例: ytd-button-renderer[class="style-scope ytd-masthead"]
3. 「非表示にする」ボタンを押す

すると、

• ドメイン##CSSセレクタ 形式の 1 行がテキストエリア末尾に追加される
• 追加後の内容が chrome.storage.sync に自動保存される

4. フィルタのインポート／エクスポート

options ページには次のボタンがあります。

「ファイルから読み込み」

• 手元の filters.txt などのテキストファイルを読み込み
• 中身をテキストエリアに反映
• 即座に chrome.storage.sync に保存

「filters.txt として保存」

• 現在のテキストエリアの内容を filters.txt としてダウンロード
• 他の環境へのコピーやバックアップに利用可能

フィルタ記法

この拡張で対応しているのは、Adblock Plus 風記法のごく一部です。

基本形

domain##css-selector

domain

例: youtube.com, example.org, *

• サブドメインにもマッチ
  • youtube.com → youtube.com, www.youtube.com, m.youtube.com など

css-selector

通常の CSS セレクタ

例:

div#header
ytd-button-renderer[class="style-scope ytd-masthead"]

コメント

! で始まる行はコメントとして無視されます。

! 作成ボタンを非表示
youtube.com##ytd-button-renderer[class="style-scope ytd-masthead"]

挙動の詳細

1. DOM への影響範囲

content-script.js は全ページで実行されますが、以下のように動作します。

1. chrome.storage.sync.filters からフィルタ文字列を取得
2. 1 行ずつ domain##selector としてパース
3. location.hostname が domain にマッチするルールだけを抽出
4. マッチするルールが 1 件もなければ、何もせず終了
5. マッチしたルールがある場合、そのセレクタに対して

   selector { display: none !important; }

   という CSS をまとめた <style data-element-hider="true"> タグを 1 つ挿入

そのため、

• フィルタを書いていないドメインには一切影響を与えません
• フィルタが空の状態では、どのサイトにもスタイルは挿入されません

2. ドメインマッチのルール

domainMatches() は次の条件でマッチ判定します。

• 完全一致: ruleDomain === pageHost
• サブドメイン: pageHost.endsWith("." + ruleDomain)

例:

• ルール側が youtube.com の場合
  • youtube.com → マッチ
  • www.youtube.com → マッチ
  • m.youtube.com → マッチ
• ルール側が * の場合
  • 特別扱いはしていないが、CSS 側で絞り込めば「全ドメイン対象」として運用できる

技術メモ

ストレージ

• 使用: chrome.storage.sync
• キー: filters
• 型: 1 つの長い文字列（複数行のテキスト）

セキュリティ／権限

• permissions: storage のみ
• host_permissions: <all_urls>

全サイトの DOM にはアクセスするが、実際に DOM を変更するのはフィルタのドメインにマッチした場合のみ

留意事項・制限

• Adblock Plus の完全な記法サポートは行っていません
  • 対応しているのは domain##css-selector とコメント行のみ
• 極端に重い CSS セレクタや大量のルールを追加すると、特定サイトの表示が遅くなる可能性があります
• 動的に生成される要素でも、セレクタが CSS でマッチし続ける限り display: none !important; が効きます

ライセンス

MIT License