web-dev-qa-db-ja.com

コンテキストメニュー項目をChrome拡張ブラウザアクションボタンに追加します

AG Chrome拡張機能には ' ブラウザアクション 'を付けることができます。通常、ext開発者はクリックするとオプションを表示します。つまり、すべてのアクションには2回のクリックが必要です。 99％の時間のアクションChrome自体は、いくつかのオプションを含むコンテキストメニューを追加します：extを無効にする、extをアンインストールする、extホームページに移動するなど。

Ext開発者として、そのコンテキストメニューに項目を追加して、通常/左/主なマウスクリックの下でワンクリックアクションを維持できますか？

chrome.contextMenus を知っていますが、これはページ内のコンテキストメニュー専用です（プロパティ ' contexts 'を参照）。

Chrome拡張機能開発ガイド で見つかりませんが、私以上のことを知っています。

google-chromegoogle-chrome-extensioncontextmenu
17
Rudie

それは 現在可能、AdBlock chrome拡張機能はそれを持っています。以下はの動作例です「ブラウザアクションのコンテキストメニュー」。

マニフェスト.json：

{
    "name": "Custom context menu in browser action",
    "version": "1",
    "manifest_version": 2,
    "background": {
      "scripts": ["background.js"]
    },
    "browser_action": {
      "default_title": "Some tooltip",
      "default_popup": "popup.html"
    },
    "permissions": [
      "contextMenus"
    ],
    "icons": {
      "16": "icon16.png"
    }
}

background.js：

chrome.contextMenus.removeAll();
chrome.contextMenus.create({
      title: "first",
      contexts: ["browser_action"],
      onclick: function() {
        alert('first');
      }
});

イベントページ を使用する場合、onclick属性は使用できないことに注意してください。代わりに、リスナーをchrome.contextMenus.onClickedに追加する必要があります。

40
asdjfiasd

例（ほぼパターン）単純なonclickリスナー（ここでは短いプロパティ「act」）を使用するための回避策も提供します。現時点では、「イベントページ」を使用する場合、ネイティブのonclickを使用することはできません。

const menuA = [
  { id: 'ItemF', act: (info, tab) => { console.log('Clicked ItemF', info, tab, info.menuItemId); alert('Clicked ItemF') } },
  { id: 'ItemG', act: (info, tab) => { console.log('Clicked ItemG', info, tab, info.menuItemId); alert('Clicked ItemG') } },
  { id: 'ItemH', act: (info, tab) => { console.log('Clicked ItemH', info, tab, info.menuItemId); alert('Clicked ItemH') } },
  { id: 'ItemI', act: (info, tab) => { console.log('Clicked ItemI', info, tab, info.menuItemId); alert('Clicked ItemI') } },
];

const menuB = [
  { id: 'ItemJ', act: (info, tab) => { console.log('Clicked ItemJ', info, tab, info.menuItemId); alert('Clicked ItemJ') } },
  { id: 'ItemK', act: (info, tab) => { console.log('Clicked ItemK', info, tab, info.menuItemId); alert('Clicked ItemK') } },
  { id: 'ItemL', act: (info, tab) => { console.log('Clicked ItemL', info, tab, info.menuItemId); alert('Clicked ItemL') } },
  { id: 'ItemM', act: (info, tab) => { console.log('Clicked ItemM', info, tab, info.menuItemId); alert('Clicked ItemM') } },
];


const rootMenu = [
  //
  // In real practice you must read chrome.contextMenus.ACTION_MENU_TOP_LEVEL_LIMIT
  //
  { id: 'ItemA', act: (info, tab) => { console.log('Clicked ItemA', info, tab, info.menuItemId); alert('Clicked ItemA') }, menu: menuA },
  { id: 'ItemB', act: (info, tab) => { console.log('Clicked ItemB', info, tab, info.menuItemId); alert('Clicked ItemB') }, menu: menuB },
  { id: 'ItemC', act: (info, tab) => { console.log('Clicked ItemC', info, tab, info.menuItemId); alert('Clicked ItemC') } },
  { id: 'ItemD', act: (info, tab) => { console.log('Clicked ItemD', info, tab, info.menuItemId); alert('Clicked ItemD') } },
  { id: 'ItemE', act: (info, tab) => { console.log('Clicked ItemE', info, tab, info.menuItemId); alert('Clicked ItemE') } },
];


const listeners = {};

const contexts = ['browser_action'];

const addMenu = (menu, root = null) => {

  for (let item of menu) {

    let {id, menu, act} = item;

    chrome.contextMenus.create({
      id: id,
      title: chrome.i18n.getMessage(id),
      contexts: contexts,
      parentId: root
    });

    if (act) {
      listeners[id] = act;
    }

    if (menu) {
      addMenu(menu, id);
    }
  }

};

addMenu(rootMenu);

chrome.contextMenus.onClicked.addListener((info, tab) => {
  console.log('Activate „chrome.contextMenus -> onClicked Listener“', info, tab);
  listeners[info.menuItemId] (info, tab);
});

"chrome拡張ツリーのコンテキストメニューパターン" の例を参照してください。

0
redisko