拡張機能のチュートリアルを作成する(パート 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 、現在のブラウザー タブを見つけます。次に、Extension API を chrome.tabs.sendmessage 使用して、そのタブにメッセージを送信します。

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

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

  • 方法 1: コンテンツ挿入 JavaScript にそのイメージ ID を生成させる。 この方法は、後で明らかになる理由から、ここでは使用しません。
  • 方法 2: で一意の popup.jsID をここで生成し、その 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 ブラウザー タブから使用できるようにするには、API を使用する chrome.runtime.getURL 必要があります。

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

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

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

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

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

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

と web_accessible_resources を含むcontent-scripts更新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: コンテンツ スクリプト メッセージ リスナーを追加する

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

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 します。これにより、ユーザーはイメージ上の任意の場所を選択でき、そのイメージはページから削除されます (イベント リスナーと共に)。

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

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

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

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

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

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