ページ上のHTML要素へのアクセスと操作

Chrome拡張機能のコンテントスクリプト（content script）を使うことで、拡張機能はユーザーが閲覧しているWebページ上のDOM（Document Object Model）に直接アクセスして操作できます。以下では、その基本的な仕組みと注意点を詳しく説明します。

1. コンテントスクリプトの役割

コンテントスクリプトは、Webページのコンテキスト（DOM）に注入されて実行されるJavaScriptです。これにより、ページ内のHTML要素にアクセスして内容を書き換えたり、新しい要素を挿入したりすることが可能になります。

例：

javascript
// content_script.js
document.body.style.backgroundColor = "lightyellow";

このコードは、対象ページの背景色を変更します。

2. DOMへのアクセスと操作の基本

a. 要素の取得

ページ内の特定の要素を取得するには、標準のDOM APIが使えます：

javascript
// IDで取得
const title = document.getElementById("main-title");

// クラスで取得
const items = document.getElementsByClassName("item");

// CSSセレクタで取得（推奨）
const firstLink = document.querySelector("a.link");

// すべての一致を取得
const allLinks = document.querySelectorAll("a.link");

b. 内容の変更

取得した要素のプロパティを変更することで、表示内容や属性を変更できます：

javascript
title.textContent = "新しいタイトル";
firstLink.href = "https://example.com";

c. 要素の追加・削除

新しい要素の生成とDOMへの追加も可能です：

javascript
const newDiv = document.createElement("div");
newDiv.textContent = "拡張機能が追加した要素";
document.body.appendChild(newDiv);

削除も同様に可能です：

javascript
const target = document.querySelector(".ad-banner");
if (target) {
    target.remove();
}

3. コンテントスクリプトの登録方法

コンテントスクリプトは manifest.json に以下のように記述して登録します：

json
{
  "name": "Sample Extension",
  "version": "1.0",
  "manifest_version": 3,
  "permissions": ["scripting"],
  "host_permissions": ["<all_urls>"],
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [
    {
      "matches": ["https://*/*"],
      "js": ["content_script.js"],
      "run_at": "document_idle"
    }
  ]
}

  • matches：スクリプトを適用するURLパターン

  • run_at：スクリプトの実行タイミング（document_start, document_end, document_idle）

4. セキュリティと制限事項

  • 同一オリジン制限の回避は不可：コンテントスクリプトはWebページと同じDOMにアクセスできますが、JavaScriptのグローバルスコープ（window）は分離されています。

  • 変数の直接共有はできない：ページスクリプトとデータをやりとりする場合は、custom events や window.postMessage() を使用します。

  • 影響範囲に注意：複数の拡張機能が同時に動作する可能性があるため、セレクタの特異性を高めたり、独自クラスを使ったりして副作用を最小限に抑える必要があります。

まとめ

コンテントスクリプトを利用することで、Chrome拡張機能はWebページのDOMを自由に操作できます。標準のJavaScript DOM APIを活用し、manifest.jsonに適切な指定を行うことで、ページの内容変更、広告ブロック、UI拡張など多様な操作が可能です。セキュリティと他のスクリプトとの干渉に注意しつつ設計することが重要です。

生成日：2025/05/18