20

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

外部開発者として、そのコンテキスト メニューに項目を追加して、通常/左/プライマリ マウス クリックの下に 1 クリック アクションを保持できますか?

私はchrome.contextMenusを知っていますが、それはページ内のコンテキスト メニュー専用です (プロパティ ' contexts ' を参照してください)。

Chrome Extension dev guideにはありませんが、あなたは私よりも多くのことを知っています.

4

3 に答える 3

50

それが可能になりました。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代わりにリスナーを追加する必要があります。

于 2014-11-05T15:21:09.613 に答える
1

例 (ほぼパターン) また、単純な 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 拡張ツリーのコンテキスト メニュー パターン»の例を参照してください。

于 2018-06-19T20:38:22.820 に答える
-1

コンテキスト メニューにカスタム エントリを追加することはできません。

ただし、 を使用してパネルをボタンに動的に割り当てることができますchrome.browserAction.setPopup。オプション ページを使用して、ユーザーが好みのオプション (シングルクリック アクション、または 2 回クリック & 複数アクション) を選択できるようにすることができます。オプション ページがボタンからわずか 2 クリックの距離にあるという事実も、非常に優れています。

パネルとシングルクリックの切り替えの概念を説明するサンプル コードを次に示します。

background.js(イベント/背景ページで使用):

chrome.browserAction.onClicked.addListener(function() {
    // Only called when there's no popup.
    alert('Next time you will see a popup again.');
    chrome.browserAction.setPopup({
        popup: 'popup.html'
    });
});

popup.html、デモ用です（CSSを使用して見栄えを良くします）：

<button>Click</button>
<script src="popup.js"></script>

popup.js、デモ用です。CSPのため、JavaScript は別のファイルに配置する必要があります。

document.querySelector('button').onclick = function() {
    chrome.browserAction.setPopup({
        popup: '' // Empty string = no popup
    });
    alert('Next time, you will not see the popup.');
    // Close panel
    window.close();
};

この例でわかるように、chrome.browserAction.setPopupはポップアップ ページでも使用できます。

PS。manifest.json、したがって、例をコピーして貼り付けて、この回答で遊ぶことができます。

{
    "name": "Test badge - minimal example",
    "version": "1",
    "manifest_version": 2,
    "background": {
        "scripts": ["background.js"]
    },
    "browser_action": {
        "default_title": "Some tooltip"
    }
}
于 2013-10-19T17:31:21.427 に答える