Chrome 拡張機能を作って公開しよう⑥ 〜コンテキストメニューを作る〜
投稿: 2021年8月8日 (最終更新: 2023年12月10日) • 6 分 で読了 • 2,623 語1回15分でサクッと開発。今回は、拡張機能をコンテキストメニューからも起動できるようにします。
1回15分で拡張機能を作るシリーズ、第6弾!
拡張機能も完成に近づいてきました!今回は、更に利便性を向上させるため、コンテキストメニュー(右クリックで開けるメニュー)からも拡張機能を起動できるようにします。
開発用フォルダの一番上の階層に、background.js
を作成してください。
これは、バックグラウンドで動く JavaScript ファイルで、ここからコンテキストメニューを作成することができます。
また、これを使用するにあたって、manifest.json
の変更が必要になります。
manifest.json
の permissions
を以下のように書き換えてください。
"permissions": ["activeTab","scripting","contextMenus"],
scripting
は、background.js
が、表示しているページに対してスクリプトを実行するために必要な権限です。通常、background.js
は DOM にアクセスできないのですが、この権限を追加することにより、多少不便ではありますが、DOM にアクセスすることが可能になります。
contextMenus
は、コンテキストメニューを使用するために必要な権限です。
また、以下の内容を追記してください。background.js
を使用することを明示します。
"background": {
"service_worker": "background.js"
}
全体で以下のようになります。
{
"name": "タイトルとURLをコピー",
"description": "ページのタイトルとURLを簡単にコピーできます。",
"version": "1.0",
"manifest_version": 3,
"icons": {
"16": "icon_16x16.png",
"48": "icon_48x48.png",
"128": "icon_128x128.png"
},
"permissions": ["activeTab","scripting","contextMenus"],
"action": {
"default_title": "タイトルとURLをコピー",
"default_icon": "icon_48x48.png",
"default_popup": "popup.html"
},
"background": {
"service_worker": "background.js"
}
}
background.js
に以下の内容を記述してください。
/* コンテキストメニューを作成 */
const parent = chrome.contextMenus.create({
id: "share",
title: "ページを共有",
contexts: ["all"],
});
ここまでできたら、コードを保存して、chrome://extensions
を開き、更新ボタンをクリックしてください。
※以下、この操作を「拡張機能を更新する」と表現します。
下の画像のように、コンテキストメニューに「ページを共有」という項目が現れたでしょうか。
もしも現れない場合は、
chrome://extensions
の更新ボタンを押したかmanifest.json
の記述は正しいかを確認してみてください。
chrome.contextMenus.create
でコンテキストメニューを作成することができます。また、この時にコンテキストメニューの設定をオブジェクト形式で行います。
項目 | 説明 |
---|---|
id | 後で参照する時に用いる ID |
title | コンテキストメニューに表示する文字列 |
contexts | どこを右クリックした際のコンテキストメニューに追加するか。 詳細情報 |
それでは、コンテキストメニューの一つ下の階層を作っていきましょう。
やり方は簡単。先程のコードに parentId
プロパティを追加して、親コンテキストメニューを指定するだけです。
以下のコードを追加してください。
chrome.contextMenus.create({
parentId: parent,
id: "title",
title: "ページタイトルをコピー",
contexts: ["all"],
});
chrome.contextMenus.create({
parentId: parent,
id: "URL",
title: "URL をコピー",
contexts: ["all"],
});
chrome.contextMenus.create({
parentId: parent,
id: "both",
title: "ページタイトルと URL をコピー",
contexts: ["all"],
});
chrome.contextMenus.create({
parentId: parent,
id: "FB",
title: "Facebook でシェア",
contexts: ["all"],
});
chrome.contextMenus.create({
parentId: parent,
id: "tweet",
title: "ツイート",
contexts: ["all"],
});
chrome.contextMenus.create({
parentId: parent,
id: "LINE",
title: "LINE で送る",
contexts: ["all"],
});
(2021/08/28追記) インストール・更新時にのみ実行するようにしないとエラーが発生し、動作しなくなることが判明したため、このセクションを追加しました。記述するべきコードが抜けてしまっていたことをお詫び申し上げます。
コンテキストメニューを作成する処理を何度も行ってしまうと、エラーを引き起こすため、拡張機能をインストール / 更新したときのみ実行されるようにします。
background.js
を以下のように変更してください。
chrome.runtime.onInstalled.addListener(function (details) {
/* コンテキストメニューを作成 */
const parent = chrome.contextMenus.create({
id: "share",
title: "ページを共有",
contexts: ["all"],
});
// (中略)
});
ここまでできたら、拡張機能を更新してください。
下の画像のようなコンテキストメニューになったでしょうか。
background.js
に以下のコードを追加してください。
/* コンテキストメニューがクリックされた時の処理 */
chrome.contextMenus.onClicked.addListener((info, tab) => {
switch (info.menuItemId) {
case "title":
chrome.scripting.executeScript({
target: { tabId: tab.id },
function: title,
});
break;
case "URL":
chrome.scripting.executeScript({
target: { tabId: tab.id },
function: URL,
});
break;
case "both":
chrome.scripting.executeScript({
target: { tabId: tab.id },
function: both,
});
break;
case "FB":
chrome.scripting.executeScript({
target: { tabId: tab.id },
function: FB,
});
break;
case "tweet":
chrome.scripting.executeScript({
target: { tabId: tab.id },
function: tweet,
});
break;
case "LINE":
chrome.scripting.executeScript({
target: { tabId: tab.id },
function: LINE,
});
break;
}
});
function title() {
const element = document.createElement("textarea");
element.value = document.title;
document.body.append(element);
element.select();
document.execCommand("copy");
element.remove();
}
function URL() {
const element = document.createElement("textarea");
element.value = location.href;
document.body.append(element);
element.select();
document.execCommand("copy");
element.remove();
}
function both() {
const element = document.createElement("textarea");
element.value = document.title + "\n" + location.href;
document.body.append(element);
element.select();
document.execCommand("copy");
element.remove();
}
function FB() {
window.open(
"https://www.facebook.com/share.php?u=" + encodeURIComponent(location.href),
"tweetwindow",
"width=650, height=470, personalbar=0, toolbar=0, scrollbars=1, sizable=1"
);
}
function tweet() {
window.open(
"https://twitter.com/intent/tweet?text=" +
encodeURIComponent(document.title) +
"%0a&url=" +
encodeURIComponent(location.href),
"tweetwindow",
"width=650, height=470, personalbar=0, toolbar=0, scrollbars=1, sizable=1"
);
}
function LINE() {
window.open(
"https://social-plugins.line.me/lineit/share?url=" +
encodeURIComponent(location.href),
"tweetwindow",
"width=650, height=470, personalbar=0, toolbar=0, scrollbars=1, sizable=1"
);
}
chrome.contextMenus.onClicked.addListener((info, tab) => {})
で、コンテキストメニューがクリックされた際の処理を指定できます。
引数の info
にクリックされたコンテキストメニューの情報が、tab
に現在のタブの情報が格納されています。
info.menuItemId
に、先程コンテキストメニューを作成した際に指定した ID が格納されているので、それで処理を分けます。
switch
文は if ... else if ... else if ... else ...
と同じような処理が簡単に行える文です。
詳細情報
chrome.scripting.executeScript
で、指定したタブに指定した JavaScript のコードを挿入できます。
これを用いることで、background.js
から DOM を操作することができます。
タブを指定する際にはタブの ID を用いるのですが、これは chrome.contextMenus.onClicked.addListener((info, tab) => {})
の引数 tab
内に格納されているため、tab.id
で参照できます。
これが target: { tabId: tab.id }
の部分に当たります。
function:
で、挿入する JavaScript の関数を指定します。
これで、拡張機能を更新すると、コンテキストメニューからも各種操作が行えるようになります。
background.js
でコンテキストメニューを作成できる。background.js
から DOM を操作するには、scripting
権限が必要である。chrome.contextMenus.onClicked.addListener((info, tab) => {})
で JavaScript コードを指定のタブに挿入できる。今回扱ったコードは こちら から見られます。ぜひ参考にしてみてください。
次回はいよいよ、作成した拡張機能を Web ストアに出品していきます。
以下のものが必要になるので、次回までに用意しておいてください。
それでは、次回をお楽しみに!本日もお疲れさまでした!
問い合わせ用のメールアドレスが必要になります。これは公開されるので、本名を隠したい人は匿名の Google アカウントを用意しておいてください。 ↩︎
「Chrome 拡張機能を作ろう」の記事一覧
関連記事
2021年8月7日 • 3 分 で読了
Chrome 拡張機能を作って公開しよう⑤ 〜権限多すぎ問題を解決〜
1回15分でサクッと開発。今回は「権限多すぎ問題」を解決していきます。
2021年7月30日 • 3 分 で読了
Chrome 拡張機能を作って公開しよう① 〜環境構築〜
環境構築するほどのことでもないが。
2021年8月4日 • 14 分 で読了
Chrome 拡張機能を作って公開しよう④ 〜コピー機能の実装〜
1回30分でサクッと開発。要となるコピー機能の実装を行います
2021年8月3日 • 6 分 で読了
Chrome 拡張機能を作って公開しよう③ 〜形にする〜
1回15分でサクッと開発。いよいよ形にしていきます!
2021年8月2日 • 5 分 で読了
Chrome 拡張機能を作って公開しよう② 〜ポップアップの作成〜
1回15分でサクッと開発。今回はポップアップの作成。
2021年7月29日 • 2 分 で読了
Jekyll について
Jekyll について説明します。