【Chrome拡張機能】コンテキストメニュー

2022年3月26日2023年3月6日

satoshiii

対象読者

Chromeの拡張機能について知りたい
コンテキストメニューについて知りたい

何が書いてある

コンテキストメニューの使い方

コンテキストメニューとは？

右クリックで表示されるメニューのことです。

Chrome拡張機能のコンテキストメニューを使用すると、

メニュー一覧に項目が表示されクリックすると

自分が作成した処理を動かすことができるようになります。

サンプルと完成後の動作

拡張機能を読み込み、または再読み込みした時点で

コンテキストメニューを登録します。

登録したら、「コンテキストメニューが登録されました」のアラートが表示されます。

右クリックして、メニューを表示すると登録したコンテキストメニューが表示されます。

メニューをクリックすると、「クリック」とアラートが表示されます。

コードと解説

manifestファイル

{
  "manifest_version":2,
  "name":"Chrome ex page action",
  "version":"1",
  "permissions":["declarativeContent"],
  "background": {
    "scripts": ["background.js"]
  },
  "permissions": [
    "contextMenus"
  ]
}

マニフェストで「contextMenus」権限を許可するよう宣言する必要があります。

これを許可することで、メニュー一覧に表示できるようになります。

公式ページはこちら

background処理についてはこちらの記事を参照してください。簡単にまとめています。

2022年3月24日【Chrome拡張機能】バックグランドページ

JavaScriptファイル

chrome.contextMenus.create({title: "hoge", onclick: test}, function(){
    alert("コンテキストメニューが登録されました");
});

function test(){alert("クリック")};

ここでポイントになる処理は2つ！

1. バックグランド処理が動いたタイミングでコンテキストメニュー項目を作成します

つまり、ここで右クリックの中にあるメニュー項目を作ってるわけです。

作成が完了したタイミングで、「コンテキストメニューが登録されました」とアラートが出ます。

この処理は、バックグランドページで処理されるので拡張機能が読み込まれた時、リロードされた時に呼び出されます。

2. コンテキストメニューが登録された時の処理

onclickの部分に注目です。

testというメソッドが呼ばれています。

これは、作成したコンテキストメニューがクリックされた時の処理を登録してます。

なので、コンテキストメニューがクリックされるとtestメソッドが呼ばれ

「クリック」とアラートが出ます。

専用のイベントリスナーを仕様する

拡張機能に専用のイベントリスナーが用意されています。

それを使えば、上記の処理（testメソッドの部分）を書き換えることができます。

クリックしたら、メソッドの中の処理が呼ばれます

chrome.contextMenus.create({title: "hoge"}, function(){
    alert("コンテキストメニュー登録完了");
});

chrome.contextMenus.onClicked.addListener( function(){
    alert("クリック");
});