Help us understand the problem. What is going on with this article?

Chrome拡張機能で右クリックメニューを作る方法

この記事では下記のメニュー作成のコードとクリック時のログ出力を載せています。

2020-05-16_18h40_53.png
フォルダ構造
フォルダ
 ├ manifest.json
 └ event.js
manifest.json
{
  "manifest_version": 2,
  "name": "context menus",
  "version": "1.0",

  "background": {
    "scripts": ["event.js"],
    "persistent": false
  },

  "permissions": [
    "activeTab",
    "contextMenus"
  ]
}
event.js
'use strict';

{
  chrome.runtime.onInstalled.addListener(() => {
    const parent = chrome.contextMenus.create({
      id: 'parent',
      title: '親メニュー'
    });
    chrome.contextMenus.create({
      id: 'child1',
      parentId: 'parent',
      title: '子メニュー1'
    });
    chrome.contextMenus.create({
      id: 'child2',
      parentId: 'parent',
      title: '子メニュー2'
    });
    chrome.contextMenus.create({
      id: 'child3',
      parentId: 'parent',
      title: '子メニュー3'
    });
    chrome.contextMenus.create({
      id: 'grandchild1',
      parentId: 'child1',
      title: '孫メニュー1'
    });
    chrome.contextMenus.create({
      id: 'grandchild2',
      parentId: 'child1',
      title: '孫メニュー2'
    });
  });

  // メニューをクリック時に実行
  chrome.contextMenus.onClicked.addListener(item => {
    console.log(item);
    console.log(item.menuItemId);
  });
}

孫メニュー1、子メニュー2をクリックしたときのログ

2020-05-16_18h44_57.png
孫メニュー1のログ
{editable: false, frameId: 0, menuItemId: "grandchild1", pageUrl: "https://www.google.com/?hl=ja", parentMenuItemId: "child1"}
grandchild1
子メニュー2のログ
{editable: false, frameId: 0, menuItemId: "child2", pageUrl: "https://www.google.com/?hl=ja", parentMenuItemId: "parent"}
child2

この記事はChrome拡張機能の作り方の一部のコンテンツです。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away