次の方法で共有

拡張機能のチュートリアルを作成する(パート 2)

  • [アーティクル]

チュートリアルのこの部分の完成した拡張機能パッケージ ソースを確認するには、 MicrosoftEdge-Extensions リポジトリ > extension-getting-started-part2 に移動します。

ソース コードがマニフェスト V2 からマニフェスト V3 に更新されました。

このチュートリアルでは、次の拡張機能について説明します。

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

静的な星の画像をタイトルと標準の HTML ボタンに置き換えるために、ポップアップ メニューを更新する方法について説明します。 このボタンを選択すると、その星の画像がコンテンツ ページに渡されます。 このイメージは拡張機能に埋め込まれており、アクティブなブラウザー タブに挿入されます。手順を次に示します。

これらの手順では、初期拡張機能パッケージの手順を完了する必要があります。 チュートリアルについては、「 MicrosoftEdge-Extensions リポジトリ > extension-getting-started-part1」を参照してください。

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

チュートリアルの最初の部分からpopup.html ファイルを作成したポップアップ フォルダーに、タイトルとボタンを表示するタグ付けを追加します。 後で別の手順でそのボタンをプログラムしますが、ここでは空の JavaScript ファイル popup.jsへの参照を含めます。

更新された 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>(select the image to remove)</h2>
        <button id="sendmessageid">Display</button>
        <script src="popup.js"></script>
    </body>
</html>

拡張機能を更新して開くと、ポップアップが開き、表示ボタンが表示されます。

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

手順 2: ブラウザー タブの上部に画像を表示するように popup.html を更新する

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

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

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

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

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

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

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

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

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

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

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 を使用できるようにする

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

注: Manifest V2 を使用している場合は、代わりに chrome.extension.getURLを使用します。 その追加のプレフィックスは、イメージがアタッチされた getURL によって返され、次のようになります。 httpextension://inigobacliaghocjiapeaaoemkjifjhp/images/stars.jpeg

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

manifest.json ファイルに別のエントリを追加して、イメージがすべてのブラウザー タブで使用可能であることを宣言します。 このエントリは次のとおりです (コンテンツ スクリプト宣言を追加すると、以下の完全な manifest.json ファイルに表示されます)。

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

現在アクティブなタブ ページに埋め込まれているコンテンツ ページにメッセージを送信するために、 popup.js ファイルにコードを記述しましたが、そのコンテンツ ページを作成して挿入していません。 今すぐ行います。

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

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

{
    "name": "NASA picture of the day viewer",
    "version": "0.0.0.1",
    "manifest_version": 3,
    "description": "An extension to display the NASA picture of the day.",
    "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を追加しました。 これは、セクションの上部に記載されているダウンロードから含めることができます。

jQuery を追加する

挿入するコンテンツ スクリプトで、jQuery ($) の使用を計画します。 縮小版の jQuery を追加し、 lib\jquery.min.jsとして拡張機能パッケージに配置しました。 これらのコンテンツ スクリプトは個々のサンドボックスで実行されます。つまり、 popup.js ページに挿入された jQuery はコンテンツと共有されません。

スレッドについて

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

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

manifest.json content-scripts セクションに基づいて、すべてのブラウザー タブ ページに挿入される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 では、chrome.runtime.onMessage.addListener Extension API メソッドを使用してlistenerを登録する必要があることに注意してください。 このリスナーは、chrome.tabs.sendMessage Extension API メソッドで前述したpopup.jsから送信したようなメッセージを待機します。

addListener メソッドの最初のパラメーターは、最初のパラメーター request が渡されるメッセージの詳細である関数です。 popup.jsから、sendMessage メソッドを使用すると、最初のパラメーターの属性がurlされ、imageDivIdされます。

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

  • 最初のスクリプト行は、ブラウザー タブのbodyのすぐ下に、slide-image クラスが割り当てられているimg要素と、その image 要素の ID としてimageDivIdを追加します。

  • 2 番目のスクリプト行は、img 要素に slide-image クラスとして割り当てる必要がある <style> セクションを DOM ヘッダーに動的に挿入します。

  • 3 番目のスクリプト行は、イメージ全体をカバーする click イベントを追加します。これにより、ユーザーはイメージ上の任意の場所を選択でき、そのイメージはページから削除されます (イベント リスナーと共に)。

  1. 選択時に表示されるイメージを削除する機能を追加する

次に、任意のページを参照して 拡張機能 アイコンを選択すると、ポップアップ メニューが次のように表示されます。

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

[ Display ] ボタンを選択すると、以下の内容が表示されます。 stars.jpegイメージ上の任意の場所を選択すると、その image 要素が削除され、タブ ページが折りたたまれ最初に表示されていたものに戻ります。

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

おめでとうございます! 拡張機能アイコンポップアップからメッセージを正常に送信し、ブラウザー タブのコンテンツとして実行されている JavaScript を動的に挿入する拡張機能を作成しました。挿入されたコンテンツは、静的な星 .jpeg ファイルを表示する image 要素を設定します。