Chrome拡張機能の右クリックメニューが、ページの背景以外で右クリックしても表示されるようにする。

前置き

chrome拡張機能を開発する際、manifest の permissions に contextMenus を追加し、

manifest.json

{
    ...
    "permissions": [..., "contextMenus"]
}

スクリプトで

*.js

chrome.runtime.onInstalled.addListener(() => {
    chrome.contextMenus.create({
        id: "parent",
        title: "サンプルのメニュー項目",
    });
});

とすれば右クリックメニューを追加できますが、ウェブページの背景で右クリックしたときのみ表示されます。

では、例えば画像などをクリックしたときに表示されるようにするにはどうすればよいのでしょうか？

解説

chrome.contextMenus.create する際の引数に contexts: ["image"] を追加すればよいです。

*.js

chrome.runtime.onInstalled.addListener(() => {
    chrome.contextMenus.create({
        id: "parent",
        title: "サンプルのメニュー項目",
        contexts: ["image"]
    });
});

使える ContextType は以下のとおりです。

"all"
"page"
"frame"
"selection"
"link"
"editable"
"image"
"video"
"audio"
"launcher"
"browser_action"
"page_action"
"action"

あとがき

↑このドキュメントを読めばすぐに分かることですが、日本語で解説したページが見当たらなかったため記事にしました。

おまけ

このノートの主題ではないですが右クリックしたときにスクリプトを実行するにはこうです。

*.js

chrome.contextMenus.onClicked.addListener((item) => {
    /** いずれかのメニュー項目がクリックされたときに実行される関数 **/
});

contextType が image のときの items の構造

{
    "editable": false,
    "frameId": 0,
    "mediaType": "image",
    "menuItemId": "parent",
    "pageUrl": "https://example.com/example.html",
    "srcUrl": "https://example.com/images/example.jpg"
}