拡張機能のチュートリアルを作成する(パート 2)
チュートリアルのこの部分の完成した拡張機能パッケージ ソースを確認するには、 MicrosoftEdge-Extensions リポジトリ > extension-getting-started-part2 に移動します。
このチュートリアルでは、次の拡張機能について説明します。
- JavaScript ライブラリを拡張機能に挿入する。
- 拡張機能アセットをブラウザー タブに公開する。
- 既存のブラウザー タブにコンテンツ ページを含めます。
- コンテンツ ページでポップアップからのメッセージをリッスンし、応答する。
静的な星の画像をタイトルと標準の HTML ボタンに置き換えるために、ポップアップ メニューを更新する方法について説明します。 このボタンを選択すると、その星の画像がコンテンツ ページに渡されます。 このイメージは拡張機能に埋め込まれており、アクティブなブラウザー タブに挿入されます。手順を次に示します。
これらの手順では、「拡張機能 の作成チュートリアルパート 1」の初期拡張機能パッケージの手順を完了する必要があります。
手順 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>
拡張機能を更新して開くと、表示ボタンが表示されたポップアップが開きます。
手順 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
イベントを追加します。これにより、ユーザーはイメージ上の任意の場所を選択でき、そのイメージはページから削除されます (イベント リスナーと共に)。
- 選択時に表示されるイメージを削除する機能を追加する
次に、任意のページを参照して 拡張機能 アイコンを選択すると、ポップアップ メニューが次のように表示されます。
[ Display
] ボタンを選択すると、以下の内容が表示されます。
stars.jpeg
イメージ上の任意の場所を選択すると、その image 要素が削除され、タブ ページが折りたたまれ最初に表示されていたものに戻ります。
おめでとうございます! 拡張機能アイコンのポップアップからメッセージを正常に送信し、ブラウザー タブのコンテンツとして実行されている JavaScript を動的に挿入する拡張機能を作成しました。挿入されたコンテンツは、静的な星 .jpeg
ファイルを表示する image 要素を設定します。
関連項目
- 拡張機能のチュートリアルを作成する(パート 1)
- MicrosoftEdge-Extensions リポジトリ > extension-getting-started-part2 - チュートリアルのパート 2 の完成した拡張機能パッケージ ソースです。