チュートリアルパート 2: JavaScript を使用して Web ページに画像を挿入する

[アーティクル]
10/26/2024

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

パート 2 のサンプルでは、次の拡張テクノロジを使用します。

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

[拡張機能の管理] タブで拡張機能をインストールした後、[ 拡張機能 ] () ボタンから Part 2 拡張機能 を開きます。

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

拡張機能は、タイトル、指示、表示ボタンを含む小さな HTML ページをポップアップに表示します。

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

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

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

完了した拡張機能をすぐにインストールして実行する場合、または完成したコードを表示する場合は、次のいずれかを実行します。

MicrosoftEdge-Extensions リポジトリをローカルドライブに複製します。リポジトリディレクトリを使用します /extension-getting-started-part2/。
MicrosoftEdge-Extensions リポジトリの /extension-getting-started-part2/ フォルダーからソースコードをダウンロードします。

その後、リポジトリにある完成した拡張機能をインストールして実行できます。サイドロードによって拡張機能をインストールし、ローカルでテストできます。拡張機能を開く前に、タブに Web ページが含まれている必要があります。

手順 1: ボタンを含むように popup.html を更新する

この記事を使用するには、まず、「チュートリアルパート 1: ポップアップに画像を表示する」の手順を実行します。つまり、MicrosoftEdge-Extensions リポジトリを複製し、パート 1 デモをインストールして、そのデモを実行します。

この手順は、MicrosoftEdge-Extensions リポジトリの popup.html で既に行われています。

このパート 2 の記事の仮定的な開始状態は、サンプルを手動でビルドして JavaScript を追加する場合、パート 1 の記事で作成されたのと同じディレクトリとファイルを含む、パート 2 コードのディレクトリが存在することです。これらは、MicrosoftEdge-Extensions リポジトリで行われるパート 1 とパート 2 の兄弟ディレクトリです。

完了したパート 1 とパート 2 のデモは、MicrosoftEdge-Extensions リポジトリからサイドバイサイドでインストールできます。まずリポジトリを複製し、デモをインストールして実行してから、空のディレクトリから始めてから手動でディレクトリを作成し、ファイルを作成し、コードをファイルに貼り付ける前に実行することをお勧めします。

完成したパート 1 デモを手動で展開してパート 2 デモを作成するには、次の操作を行う必要があります。

パート 2 のファイル (最初はパート 1 ファイルのコピー) を含む popup.html フォルダーに、タイトルをボタンで表示するタグ付けを追加します。
JavaScript ファイル popup.jsへの参照を含めます。
そのボタンをプログラムします。

HTML ファイルの例を次に示します。

/popup/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>Display the NASA picture of the day</h1>
        <h2>(click the image to remove it from the webpage)</h2>
        <button id="sendmessageid">Display</button>
        <script src="popup.js"></script>
    </body>
</html>

「拡張機能をサイドロードする」の手順を実行して、拡張機能をローカルでインストールしてテストし、拡張機能をローカルで更新してから拡張機能を実行します。拡張機能を開く前に、タブに Web ページが含まれている必要があります。

拡張機能を更新して開くと、タイトル、手順、表示ボタンを含む小さな HTML ページを含むポップアップが開きます。

拡張機能のアイコンをクリックした後にpopup.html

手順 2: Web ページを更新して、画像を上部に挿入する

[表示] ボタンを追加した後、次のタスクは、アクティブなタブにある Web ページの上部に画像ファイルを表示images/stars.jpegします。

各タブページ (および拡張機能) は、独自のスレッドで実行されます。次の手順では、タブページに挿入されるコンテンツスクリプトを作成します。挿入されたスクリプトは、ポップアップから、タブページで実行されているコンテンツスクリプトにメッセージを送信します。コンテンツスクリプトは、表示する画像を示すメッセージを受け取ります。

手順 3: メッセージを送信するポップアップ JavaScript を作成する

この手順は、MicrosoftEdge-Extensions リポジトリの popup.js で既に行われています。パート 2 拡張機能を手動で作成する場合は、次の手順に進みます。

ファイルを popup/popup.js 作成し、そのファイルに次のコードを追加します。

このコードは、まだ作成されていないコンテンツスクリプトにメッセージを送信します。このスクリプトは、ブラウザータブに一時的に作成して挿入する必要があります。これを行うために、次のコードは onclick ポップアップ表示ボタンにイベントを追加します。

/popup/popup.js (initial):

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

イベントで onclick 、現在のブラウザータブを見つけます。次に、Extension API を chrome.tabs.sendmessage 使用して、そのタブにメッセージを送信します。

そのメッセージには、表示するイメージの URL を含める必要があります。挿入されたイメージに割り当てる一意の ID を必ず送信してください。

挿入されたイメージに割り当てる一意の ID を送信するには、いくつかの異なる方法を使用できます。

方法 1: コンテンツ挿入 JavaScript にそのイメージ ID を生成させる。この方法は、後で明らかになる理由から、ここでは使用しません。
方法 2: で一意の popup.jsID をここで生成し、その ID をまだ作成されていないコンテンツスクリプトに渡します。この方法を使用します。

次のコードは、で更新されたコードの概要を popup/popup.js示しています。現在のタブ ID も渡します。これは、この記事の後半で使用します。

/popup/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: `${guidGenerator()}`,
                    tabId: tabs[0].id
                },
                function(response) {
                    window.close();
                }
            );
            function guidGenerator() {
                const S4 = function () {
                    return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
                };
                return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
            }
        });
    };
}

手順 4: 任意のブラウザータブから使用できるようにする`stars.jpeg`

この手順は、MicrosoftEdge-Extensions リポジトリの manifest.json で既に行われています。パート 2 拡張機能を手動で作成する場合は、次の手順に進みます。

任意の images/stars.jpeg ブラウザータブから使用できるようにするには、API を使用する chrome.runtime.getURL 必要があります。

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

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

このエントリは次のとおりです (コンテンツスクリプト宣言を追加すると、以下の完全な manifest.json ファイルに表示されます)。

/manifest.json (部分):

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

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

手順 5: 新しいコンテンツと Web アクセスを更新する`manifest.json`

次に、現在アクティブなタブページに埋め込まれているコンテンツページを作成して挿入します。この手順は、MicrosoftEdge-Extensions リポジトリの manifest.json で既に行われています。

と web_accessible_resources を含むcontent-scripts更新manifest.jsonは次のとおりです。

/manifest.json (完了):

{
    "name": "NASA picture of the day viewer",
    "version": "0.0.0.1",
    "manifest_version": 3,
    "description": "An extension that uses JavaScript to insert an image at the top of the webpage.",
    "icons": {
        "16": "icons/nasapod16x16.png",
        "32": "icons/nasapod32x32.png",
        "48": "icons/nasapod48x48.png",
        "128": "icons/nasapod128x128.png"
    },
    "action": {
        "default_popup": "popup/popup.html"
    },
    "content_scripts": [
        {
            "matches": [
              "<all_urls>"
            ],
            "js": ["lib/jquery.min.js","content-scripts/content.js"]
        }
    ],
    "web_accessible_resources": [
        {
            "resources": ["images/*.jpeg"],
            "matches": ["<all_urls>"]
        }
    ]
}

属性は matches に <all_urls>設定されています。これは、各タブが読み込まれるときに、のすべての content_scripts ファイルがすべてのブラウザータブページに挿入されることを意味します。挿入できるファイルの種類は、JavaScript と CSS です。また、も追加しました lib\jquery.min.js。そのファイルは、MicrosoftEdge-Extensions リポジトリの /lib/ フォルダーからコピーできます。

jQuery を追加する

この手順は、MicrosoftEdge-Extensions リポジトリの jquery.min.js で既に行われています。

挿入するコンテンツスクリプトで、jQuery ($) の使用を計画します。縮小版の jQuery を追加し、拡張機能パッケージにとして lib\jquery.min.js配置しました。

これらのコンテンツスクリプトは個々のサンドボックスで実行されます。つまり、ページに popup.js 挿入された jQuery はコンテンツと共有されません。

スレッドについて

読み込まれた Web ページでブラウザータブで JavaScript が実行されている場合でも、挿入されたコンテンツは、その JavaScript にアクセスできません。挿入された JavaScript は、そのブラウザータブに読み込まれた実際の DOM にのみアクセスできます。

手順 6: コンテンツスクリプトメッセージリスナーを追加する

パート 2 デモを手動でビルドし続けるには、このファイルを作成する必要があります。この手順は、MicrosoftEdge-Extensions リポジトリの content.js で既に行われています。

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

/content-scripts/content.js (完了):

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    $("body").prepend(
        `<img  src="${request.url}" id="${request.imageDivId}"
               class="slide-image" /> `
    );
    $("head").prepend(
        `<style>
          .slide-image {
              height: auto;
              width: 100vw;
          }
        </style>`
    );
    $(`#${request.imageDivId}`).click(function() {
        $(`#${request.imageDivId}`).remove(`#${request.imageDivId}`);
    });
    sendResponse({ fromcontent: "This message is from content.js" });
});

上記の JavaScript で行われるのは、Extension API メソッドを使用してをlistenerchrome.runtime.onMessage.addListener登録することです。このリスナーは、前に説明した Extension API メソッドで popup.js 送信したメッセージのようなメッセージを chrome.tabs.sendMessage 待機します。

メソッドの最初の addListener パラメーターは、最初のパラメーター request が渡されるメッセージの詳細である関数です。から、 popup.jsメソッドをsendMessage使用した場合、最初のパラメーターの属性はと imageDivIdであることをurl覚えておいてください。

リスナーによってイベントが処理されると、最初のパラメーターである関数が実行されます。その関数の最初のパラメーターは、によって sendMessage割り当てられた属性を持つオブジェクトです。この関数は、単に 3 つの jQuery スクリプト行を処理します。

最初のスクリプト行は、ブラウザータブのすぐ下bodyにある要素を追加imgします。この要素にはslide-image、クラスと、その image 要素の ID が割り当てられますimageDivId。
2 番目のスクリプト行は、要素にクラスとして割り当てる必要があるスタイル> セクションを DOM ヘッダー<に動的にimg挿入します。slide-image
3 番目のスクリプト行は、イメージ全体をカバーするイベントを追加 click します。これにより、ユーザーはイメージ上の任意の場所を選択でき、そのイメージはページから削除されます (イベントリスナーと共に)。

手順 7: 拡張機能をインストールしてテストする

[拡張機能の管理] ページで、拡張機能をインストールまたは更新します。「拡張機能をサイドロードしてローカルにインストールしてテストする」を参照してください。
新しいウィンドウやタブで、 Microsoft.com などの Web ページに移動します。タブは空でなく、[拡張機能の管理] ページにすることはできません。
アドレスバーの横にある [ 拡張機能 ] () ボタンをクリックします。または、[ 設定など] を選択します (...) >拡張機能。
デイビューアー拡張機能の NASA 画像のアイコンまたは名前をクリックします。

拡張機能のポップアップが開きます。
[ 表示 ] ボタンをクリックします。 stars.jpeg は現在のタブの現在の Web ページの上部に挿入され、Web ページのコンテンツが画像の下にプッシュされます。
Web ページの stars.jpeg 上部に表示されている画像をクリックします。その image 要素は DOM ツリーと Web ページから削除され、現在の Web ページが復元され、そのコンテンツがタブの上部に戻されます。

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

次の方法で共有

チュートリアルパート 2: JavaScript を使用して Web ページに画像を挿入する

手順 1: ボタンを含むように popup.html を更新する

手順 2: Web ページを更新して、画像を上部に挿入する

手順 3: メッセージを送信するポップアップ JavaScript を作成する

手順 4: 任意のブラウザータブから使用できるようにする`stars.jpeg`

手順 5: 新しいコンテンツと Web アクセスを更新する`manifest.json`

jQuery を追加する

スレッドについて

手順 6: コンテンツスクリプトメッセージリスナーを追加する

手順 7: 拡張機能をインストールしてテストする

関連項目

フィードバック

その他のリソース

次の方法で共有

チュートリアル パート 2: JavaScript を使用して Web ページに画像を挿入する

手順 1: ボタンを含むように popup.html を更新する

手順 2: Web ページを更新して、画像を上部に挿入する

手順 3: メッセージを送信するポップアップ JavaScript を作成する

手順 4: 任意のブラウザー タブから使用できるようにするstars.jpeg

手順 5: 新しいコンテンツと Web アクセスを更新するmanifest.json

jQuery を追加する

スレッドについて

手順 6: コンテンツ スクリプト メッセージ リスナーを追加する

手順 7: 拡張機能をインストールしてテストする

関連項目

フィードバック

その他のリソース

チュートリアルパート 2: JavaScript を使用して Web ページに画像を挿入する

手順 4: 任意のブラウザータブから使用できるようにする`stars.jpeg`

手順 5: 新しいコンテンツと Web アクセスを更新する`manifest.json`

手順 6: コンテンツスクリプトメッセージリスナーを追加する