Hinzufügen contextmenu-Elemente, um eine Chrome-Erweiterung, die browser action button

Einer G-Chrome-Erweiterung können haben Sie eine 'browser-action'. In der Regel wird die extern-Entwickler zeigt die Optionen, wenn Sie darauf klicken, was bedeutet, jede Aktion erfordert 2 Klicks, einmal die Standard-99% der Zeit handeln. Chrome fügt sich ein Kontext-Menü mit ein paar Optionen: deaktivieren Sie ext, deinstallieren ext, gehen Sie auf ext, homepage etc.

Kann ich als ext-Entwickler-Elemente hinzufügen, um das Kontext-Menü, so dass ich halten kann meine 1-Klick-Aktion, die im Rahmen der normalen/Links/primäre Maustaste klicken?

Ich kenne chrome.contextMenus aber das ist nur für Kontext-Menüs in der Seite (siehe Eigenschaft 'Kontexte').

Kann ich es nicht finden in der Erweiterung für Google Chrome dev-guide, aber Sie wissen mehr als ich.

InformationsquelleAutor Rudie | 2013-10-19

35

Es ist jetzt möglich, AdBlock chrome-Erweiterungen hat. Unten ist Beispiel für "Kontext-Menü im browser-Aktion".

manifestieren.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');
      }
});
```
Beachten Sie, dass wenn Sie eine Event-Seite, können Sie die onclick Attribut; Sie benötigen einen listener hinzufügen, um chrome.contextMenus.onClicked statt.
- Dass keine Antwort auf die Frage: die Frage ist speziell über browserAction Kontext-Menü. Aber Sie haben Recht, dass die Antwort ist "es ist nun möglich". Pflege zu beheben Ihre Antwort?
- es ist über browser_action
- Dein Beispiel ist allerdings nicht (browser_action ist nicht enthalten in all trotz allem, was die docs sagen). Lösen Sie das Beispiel, und ich werde glücklich sein, um upvote.
- Ich Feste Formatierung und fügte einen entsprechenden link zum chrome issue tracker. Gute Arbeit an der Aktualisierung dieser alten Frage. Möchten Sie vielleicht zu Holen ein besseres screen-name (sieht spammy)
- Nein danke, diese Seite hat zweite schlimmsten Kommentar-system (nach phpbb), wird nicht wieder kommen 🙁
- Aaaaaw heellz yeeaah! Das ist genial. Chrome komisches Zeug jedes neue update, aber es fügt awesome stuff zu! Tolle Antwort, die volle Punktzahl! Ich erinnere mich nicht, was ich machen wollte, mit diesem obwohl....
- Ein Hinweis auf den event-Seiten, da diese brachte mir ein paar, um herauszufinden. Als developer.chrome.com/extensions/event_pages Staaten, dass "persistent": false unter manifest.json machen background.js in eine event-Seite, vielleicht brechen Sie die Funktionsweise.
- Ich weiß nicht warum, aber "browser_action" hat nicht funktioniert für mich im Kontext-Eigenschaft. Ich habe "page_action" und es funktioniert.
InformationsquelleAutor asdjfiasd

Beispiel (fast patttern)
Es bietet auch eine Problemumgehung für die Verwendung ein einfacher onclick-Listener (hier kurze Eigenschaft "act"), jetzt, wenn Sie die "Event-Seite" können Sie nicht den Einsatz von nativen 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);
});

Sehen Sie einige Beispiel von «chrome-Erweiterung Kontextmenü im Baum-Muster»

InformationsquelleAutor redisko

-1

Ist es nicht möglich hinzufügen eigene Einträge in das Kontextmenü.

Können Sie, weisen jedoch dynamisch ein panel auf die Schaltfläche mit chrome.browserAction.setPopup. Sie können eine Optionen Seite, um dem Benutzer zu ermöglichen, wählen Sie Ihre bevorzugte option (single-Klick-Aktion, oder zwei-Klicks & mehrere Aktionen). Die Tatsache, dass die Seite Optionen ist nur zwei Klicks entfernt von der Schaltfläche ist auch ganz nett.

Hier ist Beispielcode zu veranschaulichen, das Konzept der Umschaltung zwischen panel und klicken Sie auf.

background.js (verwendet in Ihrem event /hintergrund-Seite):
```
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 nur für die demo (CSS verwenden, um es besser Aussehen):
```
<button>Click</button>
<script src="popup.js"></script>
```
popup.js nur für die demo. JavaScript muss in einer separaten Datei abgelegt, weil der CSP.
```
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();
};
```
Wie Sie sehen können, in diesem Beispiel, die chrome.browserAction.setPopup ist auch verfügbar in einer popup-Seite.

PS. manifest.json, so kann man copy-paste das Beispiel und spielen Sie mit dieser Antwort.
```
{
    "name": "Test badge - minimal example",
    "version": "1",
    "manifest_version": 2,
    "background": {
        "scripts": ["background.js"]
    },
    "browser_action": {
        "default_title": "Some tooltip"
    }
}
```
- Ich weiß nicht, wie die browser-action-popup. Es ist immer langsam. Geben Sie dem Benutzer die Wahl ist smart obwohl. Aber ich glaube, ich bin gonna verwenden chrome.contextMenus für die weniger verwendeten Optionen, so sind Sie immer verfügbar, aber die Standard-Aktion (die ist zu öffnen Sie die Optionen-Seite in meine ext) ist immer 1 Klick entfernt. Gute Idee, aber!
- Das ist nicht wahr, Sie KÖNNEN Elemente hinzufügen, um das contextMenu
InformationsquelleAutor Rob W

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.