サンプル: コンテンツスクリプトを使用した画像挿入ツール

[アーティクル]
01/29/2025

このサンプルでは、JavaScript コードを使用して、<body> 要素内の現在の Web ページの上部にstars.jpegイメージを挿入します。拡張機能のポップアップには、タイトルと、[画像の挿入] というラベルが付いた HTML ボタンが 含まれています。 [ 画像の挿入 ] ボタンをクリックすると、拡張機能の JavaScript コードによって拡張機能アイコンのポップアップからメッセージが送信され、ブラウザータブで実行される JavaScript が動的に挿入されます。

このサンプルでは、次の拡張機能を示します。

JavaScript ライブラリを拡張機能に挿入する。
拡張機能アセットをブラウザータブに公開する。
既存のブラウザータブにコンテンツ Web ページを含める。
コンテンツ Web ページでポップアップからのメッセージをリッスンし、応答する。

サンプルのプレビュー

拡張機能のサンプルは、ブラウザーの [ 拡張機能の管理 ] タブを使用してインストールし、[ 拡張機能 ] () ボタンをクリックしてインストールされている拡張機能の一覧を表示し、次のサンプル拡張機能をクリックします。

拡張機能のアイコンをクリックして拡張機能を開く

この拡張機能は、タイトル、 画像の挿入 ボタン、および手順を含む小さな HTML Web ページをポップアップに表示します。

[拡張機能] アイコンを選択した後に表示popup.html

[ 画像の挿入 ] ボタンをクリックすると、JavaScript コードによって現在の Web ページの上部に stars.jpeg が一時的に挿入され、Web ページのコンテンツが画像の下にプッシュダウンされます。挿入されたコンテンツは、現在の Web ページの上部に静的なイメージ stars.jpeg を表示するように image 要素を設定します。

ブラウザーに表示されている画像

イメージをクリックすると、挿入された JavaScript によって DOM ツリーと Web ページからイメージが削除されます。

次のようにサンプルを取得、インストール、実行します。

MicrosoftEdge-Extensions リポジトリを複製する

さまざまなツールを使用して、GitHub リポジトリを複製できます。選択したディレクトリをダウンロードするか、リポジトリ全体を複製できます。

次のように、 MicrosoftEdge-Extensions リポジトリをローカルドライブに複製し、作業ブランチに切り替えます。

git bash コマンドプロンプト
GitHub Desktop

コマンドプロンプトで、「git」と入力して、git がインストールされているかどうかをチェックします。
まだ完了していない場合は、 git をダウンロードしてインストールします。
まだ完了していない場合は、git がインストールされているコマンドプロンプトを起動します。
MicrosoftEdge-Extensions リポジトリを複製するディレクトリに移動します。以下に例を示します。
```
cd C:/Users/localAccount/GitHub/
```
Microsoft Edge で、 MicrosoftEdge-Extensions リポジトリに移動します。
緑色の [コード] ボタンの右側にある下矢印をクリックし、[Web URL を使用して複製する] セクションで、https://github.com/microsoft/MicrosoftEdge-Extensions.gitの横にある [クリップボードに URL をコピー] ボタンをクリックします。
コマンドプロンプトウィンドウで、次のコマンドを入力します。
```
git clone https://github.com/microsoft/MicrosoftEdge-Extensions.git
```
/MicrosoftEdge-Extensions/ ディレクトリは、指定したディレクトリ内に追加されます。

作業ブランチを作成してそれに切り替える

ディレクトリの一覧を確認します。
```
ls
```
/MicrosoftEdge-Extensions/ ディレクトリが一覧表示されます。
新しいディレクトリに切り替えます。
```
cd MicrosoftEdge-Extensions
```
作業ブランチを作成します。
```
git branch test
```
作業ブランチに切り替えます。
```
git switch test
```
収益： Switched to branch 'test'

リポジトリの "メイン" ブランチにあるコードを変更することなく、作業ブランチのコードを自由に変更できるようになりました。後で、"メイン" ブランチに戻すか、"メイン" ブランチに基づいて別のブランチを作成することもできます。

まだ完了していない場合は、GitHub desktop をインストールします。 https://github.com/apps/desktopに移動し、[ 今すぐダウンロード ] ボタンをクリックします。
MicrosoftEdge-Extensions リポジトリに移動します。
[ コード ] ボタンをクリックし、[ GitHub Desktop で開く] を選択します。

ダイアログが開き、 このサイトが GitHubDesktop.exe を開こうとしているというメッセージが表示されます。
[ 開く ] ボタンをクリックします。

GitHub Desktop が開き、左上のドロップダウンリストで MicrosoftEdge-Extensions リポジトリが選択されています。

または、GitHub Desktop の [ リポジトリの複製 ] ダイアログが開きます。
複製されたリポジトリディレクトリを配置するローカルドライブパスを指定します。例: C:\Users\accountname\GitHub\。
[ 複製 ] ボタンをクリックします。

作業ブランチを作成してそれに切り替える

GitHub Desktop で、GitHub デスクトップの左上にある [現在のリポジトリ ] が MicrosoftEdge-Extensions であることを確認します。

[Current branch]\(現在のブランチ\) ドロップダウンリストに、メインと表示されます。
[ 現在のブランチ ] ドロップダウンリストで、[ 分岐 ] タブをクリックし、[ 新しいブランチ ] ボタンをクリックします。

[ ブランチの作成 ] ダイアログが開きます。
[ 名前 ] テキストボックスに、 テストなどのブランチ名を入力し、[ ブランチの作成 ] ボタンをクリックします。

GitHub Desktop の左上の中央と左下に、 テストなどの現在のブランチが表示されます。

サンプルをローカルにインストールする

ストアからサンプルをインストールする代わりに、サンプルをローカルにインストールして、変更して変更をすばやくテストできるようにします。ローカルへのインストールは、拡張機能の サイドローディング と呼ばれることもあります。

Microsoft Edge で、このアイコンが表示されている場合は、アドレスバーの横にある [ 拡張機能 ] (アイコン) ボタンをクリックします。または、[ 設定など] () >[拡張機能] を選択します。 [拡張機能] ポップアップが開きます。
[ 拡張機能の管理] をクリックします。 [ 拡張機能 の管理] ページが新しいタブで開きます。
[開発者モード] トグルをオンにします。
サンプル拡張機能を初めてインストールするときは、[ 開梱された読み込み ] () ボタンをクリックします。 [ 拡張機能ディレクトリの選択 ] ダイアログが開きます。
manifest.jsonなど、拡張機能のソースファイルを含むディレクトリを選択します。

パスの例:

C:\Users\localAccount\GitHub\MicrosoftEdge-Extensions\Extension-samples\picture-inserter-content-script
[ フォルダーの選択 ] ボタンをクリックします。

[ 拡張機能ディレクトリの選択 ] ダイアログが閉じます。

拡張機能は、ストアからインストールされている拡張機能と同様に、ブラウザーにインストールされます。

サンプルを実行する

新しいウィンドウまたはタブで、 TODO アプリなどの Web ページに移動します。このサンプルでは現在の Web ページにコンテンツを挿入するため、タブを空にしないでください。また、[拡張機能の管理] ページにすることはできません。
Web ページを更新します。これは、拡張機能を再読み込みした後に必要な場合があります。
アドレスバーの右側にある Microsoft Edge で、このアイコンが表示されている場合は、 拡張機能 () ボタンをクリックします。または、[ 設定など] () >Extensions を選択します。

[拡張機能] ポップアップが開きます。
拡張機能のアイコンまたは名前 (コンテンツスクリプトを使用した画像挿入ツール) をクリックします。

拡張機能が開き、アドレスバーと 拡張機能 (拡張機能 アイコン) アイコンの横に拡張機能が追加されます。

タイトル、 画像の挿入 ボタン、および手順を含む小さな HTML Web ページが表示されたポップアップが開きます。
[ 図の挿入 ] ボタンをクリックします。 stars.jpeg は現在のタブの現在の Web ページの上部に挿入され、Web ページのコンテンツが画像の下にプッシュされます。
Web ページの上部に表示されている stars.jpeg 画像をクリックします。その image 要素は DOM ツリーと Web ページから削除され、現在の Web ページが復元され、そのコンテンツがタブの上部に戻されます。

拡張機能は、拡張機能アイコンのポップアップからメッセージを送信し、ブラウザータブでコンテンツとして実行されている JavaScript を動的に挿入します。挿入されたコンテンツは、現在の Web ページの上部に stars.jpeg を表示するように image 要素を設定し、画像をクリックすると画像を削除します。

サンプルを調査する

次のセクションでは、サンプルを調査します。その後、独自の Microsoft Edge 拡張機能を開発するために、サンプルのディレクトリをコピーして変更し、結果の拡張機能をインストールしてテストできます。

ファイルとディレクトリ

このサンプルには、次のディレクトリ構造とファイルがあります。

サンプルのパスの例:

C:\Users\localAccount\GitHub\MicrosoftEdge-Extensions\Extension-samples\picture-inserter-content-script

/picture-inserter-content-script/ ディレクトリ内のディレクトリとファイル:

/content-scripts/
   content.js
/icons/
   extension-icon16x16.png
   extension-icon32x32.png
   extension-icon48x48.png
   extension-icon128x128.png
/images/
   stars.jpeg
/popup/
   popup.html
   popup.js
manifest.json

/content-scripts/ ディレクトリには、現在の Web ページに挿入されるスクリプトであるcontent.jsが含まれています。
/icons/ ディレクトリには、ブラウザーのアドレスバー、拡張機能ポップアップ、拡張機能管理ページの近くの拡張機能を表すために使用される.png ファイルのバージョンが含まれています。
/images/ ディレクトリには、拡張機能のポップアップに表示されるstars.jpegが含まれています。
/popup/ ディレクトリには、次のファイルが含まれています。
- popup.html は、拡張機能の初期ポップアップ Web ページ (タイトル、ボタン、および手順) 内のコンテンツを定義します。
- popup.js 最初のポップアップ Web ページでは、タブページで実行されているコンテンツスクリプト (content.js) にメッセージを送信し、表示するイメージファイルを指定します。
manifest.json には、拡張機能に関する基本情報が含まれています。

上部に画像を挿入するように Web ページを更新する方法 (`stars.jpeg`)

このサンプルには、現在のブラウザータブに読み込まれている Web ページに挿入されるコンテンツスクリプトが含まれています。

拡張機能のサンプルを実行すると、最初のポップアップ HTML ページが表示され (popup.html)、タイトル、手順、および [図の挿入 ] ボタンが表示されます。
[ 画像の挿入 ] ボタンをクリックすると、初期ポップアップページの JavaScript (popup.js) によって、タブページで実行されているコンテンツスクリプト (content.js) にメッセージが送信されます。メッセージは、表示するイメージファイルを指定します。
タブページで実行されているコンテンツスクリプト (content.js) はメッセージを受け取り、指定したイメージファイル (stars.jpeg) を表示します。

初期ポップアップ Web ページ (`popup.html`)

/popup/popup.html は、拡張機能の初期ポップアップに表示する Web ページとしてマニフェストファイルで指定されます。マニフェストファイルには、キーフィールド "default_popup": "popup/popup.html"が含まれています。このサンプルの popup.html ファイルは、タイトル、 画像の挿入 ボタン、および手順を含む小さな Web ページです。

popup.html:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style>
            body {
                width: 500px;
            }
            button {
                background-color: #336dab;
                border: none;
                color: white;
                padding: 15px 32px;
                text-align: center;
                font-size: 16px;
            }
        </style>
    </head>
    <body>
        <h1>Picture inserter using a content script</h1>
        <button id="sendmessageid">Insert picture</button>
        <script src="popup.js"></script>
        <p>Click the displayed image to remove it from the webpage.</p>
    </body>
</html>

挿入された JavaScript にメッセージを送信する、初期ポップアップページの JavaScript (`popup.js`)

/popup/popup.jsは、ブラウザータブに一時的に挿入されるコンテンツスクリプト (content.js) にメッセージを送信します。これを行うには、popup.jsポップアップ Web ページの [画像の挿入] ボタンにonclick イベントを追加します。このボタンには ID sendmessageidがあります。

popup.js (部分):

const sendMessageId = document.getElementById("sendmessageid");
if (sendMessageId) {
    sendMessageId.onclick = function() {
        ...
    };
}

popup.jsで、chrome.tabs.queryは現在のブラウザータブを見つけ、そのタブにメッセージを送信chrome.tabs.sendMessage。このサンプルは、現在のタブの ID を渡します。メッセージには、表示されるイメージの URL が含まれている必要があります。

挿入されたイメージに割り当てる一意の ID を送信して、後で image 要素を見つけて削除する必要があります。挿入されたイメージに割り当てる一意の ID を送信するには、一意の ID が popup.js で生成され、コンテンツスクリプトに渡されます。

popup.js (完了):

const sendMessageId = document.getElementById("sendmessageid");
if (sendMessageId) {
    sendMessageId.onclick = function() {
        chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
            chrome.tabs.sendMessage(
                tabs[0].id,
                {
                    url: chrome.runtime.getURL("images/stars.jpeg"),
                    imageDivId: crypto.randomUUID(),
                    tabId: tabs[0].id
                },
                function(response) {
                    window.close();
                }
            );
        });
    };
}

コンテンツスクリプトメッセージリスナー (`content.js`)

すべてのブラウザータブページに挿入される content-scripts\content.js ファイルを次に示します。このファイルは、manifest.jsonの [content-scripts] セクションに一覧表示されます。

content.js (完了):

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
  const img = document.createElement("img");
  img.id = request.imageDivId;
  img.src = request.url;
  img.style = "height: auto; width: 90vw;";
  document.body.prepend(img);

  img.addEventListener("click", () => {
      img.remove();
  }, { once: true });

  sendResponse({ fromcontent: "This message is from content.js" });
});

content.js は、 chrome.runtime.onMessage.addListener Extension API メソッドを使用してリスナーを登録します。このリスナーは、 popup.js が chrome.tabs.sendMessageを呼び出したときに送信されるメッセージを待機します。

content.jsでは、addListener メソッドは関数である 1 つのパラメーターを受け取ります。その関数の最初のパラメーター requestには、渡されるメッセージの詳細が含まれています。

content.jsでは、リスナーによってイベントが処理されると、addListenerに渡されるリスナー関数が実行されます。渡されたリスナー関数の最初のパラメーターは、sendMessageによって割り当てられた属性を持つrequest オブジェクトです。

popup.jsでは、chrome.tabs.sendMessage メソッド呼び出しの場合、sendMessage の 2 番目のパラメーターの属性は、url、imageDivId、およびtabIdされます。

addListenerに渡される分離リスナー関数を次に示します。

content.js (部分)

function(request, sender, sendResponse) {
  const img = document.createElement("img");
  img.id = request.imageDivId;
  img.src = request.url;
  img.style = "height: auto; width: 90vw;";
  document.body.prepend(img);

  img.addEventListener("click", () => {
      img.remove();
  }, { once: true });

  sendResponse({ fromcontent: "This message is from content.js" });
}

リスナー関数の最初の 5 行は、ブラウザータブの body 要素のすぐ下に img 要素を追加します。

リスナー関数の 2 行目 ( img.id = request.imageDivId;) は、 img 要素の ID を、渡された要求の imageDivId に設定します。

リスナー関数では、 addEventListener 呼び出しによって、イメージ全体をカバーする click イベントリスナー関数が追加され、ユーザーはイメージ上の任意の場所をクリックできます。挿入されたイメージをクリックすると、現在の Web ページから行 img.remove();によってイメージが削除され、 { once: true }を指定してイベントリスナーも削除されます。

`stars.jpeg`を任意のブラウザータブから使用できるようにする方法

任意のブラウザータブから images/stars.jpeg を使用できるようにするには:

popup.js (上記) では、 chrome.runtime.getURL API が使用されます。
マニフェスト (以下) は、型の web_accessible_resources がすべての URL と一致 .jpeg 指定します。

このサンプルでは、img 要素の src 属性を使用してコンテンツページにイメージを挿入します。コンテンツページは、拡張機能を実行しているスレッドと同じではない一意のスレッドで実行されています。静的イメージファイルを正しく動作させるには、Web 資産として公開する必要があります。

イメージがすべてのブラウザータブで使用可能であることを宣言するために、 manifest.json ファイルに別のエントリが追加されます。

/manifest.json (部分):

"web_accessible_resources": [
    {
      "resources": ["images/*.jpeg"],
      "matches": ["<all_urls>"]
    }
  ]

popup.js ファイル内のコードは、現在アクティブなタブページに埋め込まれているコンテンツページにメッセージを送信します。

マニフェストにリソースを一覧表示する方法 (`manifest.json`)

このサンプルでは、現在アクティブなタブページに埋め込まれているコンテンツページを作成して挿入します。 manifest.json には、次のように content-scripts と web_accessible_resourcesが含まれます。

/manifest.json (完了):

{
    "name": "Picture inserter using content script",
    "version": "0.0.0.1",
    "manifest_version": 3,
    "description": "A browser extension that uses JavaScript to insert an image at the top of the current webpage.",
    "icons": {
        "16": "icons/extension-icon16x16.png",
        "32": "icons/extension-icon32x32.png",
        "48": "icons/extension-icon48x48.png",
        "128": "icons/extension-icon128x128.png"
    },
    "action": {
        "default_popup": "popup/popup.html"
    },
    "content_scripts": [
        {
            "matches": [
              "<all_urls>"
            ],
            "js": ["content-scripts/content.js"]
        }
    ],
    "web_accessible_resources": [
        {
            "resources": ["images/*.jpeg"],
            "matches": ["<all_urls>"]
        }
    ]
}

マニフェストの [ `content_scripts` ] セクションでは、すべてのブラウザータブに JavaScript が挿入されます

マニフェストファイルの content_scripts キーセクションでは、matches属性は <all_urls> に設定されます。つまり、content_scripts キーセクションで指定された.js (または.css) ファイルは、各タブが読み込まれるときにすべてのブラウザータブページに挿入されます。挿入できるファイルの種類は、JavaScript (.js) と CSS (.css) です。

このサンプルのマニフェストでは、1 つのコンテンツスクリプト ( content-scripts/content.js) を指定します。

各コンテンツスクリプトは、サンドボックス化された独自のスレッドで実行されます

各タブページ (および拡張機能) は、独自のスレッドで実行されます。ブラウザータブに JavaScript コードを実行する Web ページが含まれている場合でも、拡張機能によってそのブラウザータブに挿入された content.js スクリプトは、その JavaScript コードにアクセスできません。挿入されたコンテンツスクリプトは、Web ページの DOM にのみアクセスできます。

次の手順

独自の Microsoft Edge 拡張機能を開発するには、サンプルのディレクトリをコピーして変更し、結果の拡張機能をインストールしてテストします。

次の方法で共有

サンプル: コンテンツスクリプトを使用した画像挿入ツール

サンプルのプレビュー

MicrosoftEdge-Extensions リポジトリを複製する

作業ブランチを作成してそれに切り替える

作業ブランチを作成してそれに切り替える

サンプルをローカルにインストールする

サンプルを実行する

サンプルを調査する

ファイルとディレクトリ

上部に画像を挿入するように Web ページを更新する方法 (`stars.jpeg`)

初期ポップアップ Web ページ (`popup.html`)

挿入された JavaScript にメッセージを送信する、初期ポップアップページの JavaScript (`popup.js`)

コンテンツスクリプトメッセージリスナー (`content.js`)

`stars.jpeg`を任意のブラウザータブから使用できるようにする方法

マニフェストにリソースを一覧表示する方法 (`manifest.json`)

マニフェストの [ `content_scripts` ] セクションでは、すべてのブラウザータブに JavaScript が挿入されます

各コンテンツスクリプトは、サンドボックス化された独自のスレッドで実行されます

次の手順

関連項目

フィードバック

その他のリソース

次の方法で共有

サンプル: コンテンツ スクリプトを使用した画像挿入ツール

サンプルのプレビュー

MicrosoftEdge-Extensions リポジトリを複製する

作業ブランチを作成してそれに切り替える

サンプルをローカルにインストールする

サンプルを実行する

サンプルを調査する

ファイルとディレクトリ

上部に画像を挿入するように Web ページを更新する方法 (stars.jpeg)

初期ポップアップ Web ページ (popup.html)

挿入された JavaScript にメッセージを送信する、初期ポップアップ ページの JavaScript (popup.js)

コンテンツ スクリプト メッセージ リスナー (content.js)

stars.jpegを任意のブラウザー タブから使用できるようにする方法

マニフェストにリソースを一覧表示する方法 (manifest.json)

マニフェストの [ content_scripts ] セクションでは、すべてのブラウザー タブに JavaScript が挿入されます

各コンテンツ スクリプトは、サンドボックス化された独自のスレッドで実行されます

次の手順

関連項目

フィードバック

その他のリソース

サンプル: コンテンツスクリプトを使用した画像挿入ツール

上部に画像を挿入するように Web ページを更新する方法 (`stars.jpeg`)

初期ポップアップ Web ページ (`popup.html`)

挿入された JavaScript にメッセージを送信する、初期ポップアップページの JavaScript (`popup.js`)

コンテンツスクリプトメッセージリスナー (`content.js`)

`stars.jpeg`を任意のブラウザータブから使用できるようにする方法

マニフェストにリソースを一覧表示する方法 (`manifest.json`)

マニフェストの [ `content_scripts` ] セクションでは、すべてのブラウザータブに JavaScript が挿入されます

各コンテンツスクリプトは、サンドボックス化された独自のスレッドで実行されます