Kontextmenüs in Chrome-Erweiterungen

Question

Ich habe nach einer Lösung für dieses Problem gesucht und gesucht und gesucht, aber jede Quelle, auf die ich stoße, scheint davon auszugehen, dass ich bereits über profunde Kenntnisse über Chrome-Erweiterungen verfüge, sogar die Hilfeseiten von Google

Ich kenne die Grundlagen von Chrome-Erweiterungen und habe eine mit einigen einfachen Inhaltsskripten erstellt. Doch jetzt bin ich auf der Suche nach einer, die Kontextmenüs beinhaltet machen.

Angenommen, Sie markieren Wörter und klicken mit der rechten Maustaste darauf, dann sehen Sie die Option Search '<highlighted words>' on Google und wenn Sie darauf klicken, öffnet es http://www.google.com/search?q=<highlighted words> in einer neuen Registerkarte. Ich weiß, dass dies in Chrome existiert und ich bin sicher, dass es eine Milliarde Erweiterungen gibt, die es replizieren, aber dies ist nur ein Beispiel für mich, auf dem ich aufbauen kann.

Wie kann ich das tun?

Answer 1

Das Skript sollte wie folgt aussehen:

function getword(info,tab) {
  console.log("Word " + info.selectionText + " was clicked.");
  chrome.tabs.create({  
    url: "http://www.google.com/search?q=" + info.selectionText
  });
}
chrome.contextMenus.create({
  title: "Search: %s", 
  contexts:["selection"], 
  onclick: getword
});

Und manifest.json:

{
    "name": "App name",
    "version": "1.0",
    "manifest_version": 2,
    "description": "Your description",
    "permissions": [
      "contextMenus"
     ],
    "background": { 
      "scripts": ["script.js"]
    }
}

Hier erfahren Sie, wie Sie die Erweiterung laden können: http://developer.chrome.com/extensions/getstarted.html

Answer 2

Die Antwort von Bartlomiej Szalach ist zu alt. Sie funktioniert nicht mit Chrome Version 80.0.3987.163 (April 2020).

In der Dokumentation heißt es dazu,

aufKlick: Eine Funktion, die aufgerufen wird, wenn der Menüpunkt angeklickt wird. Ereignisseiten können dies nicht verwenden; stattdessen sollten sie einen Listener für contextMenus.onClicked registrieren.

Die Datei background.js sollte wie folgt geändert werden:

const CONTEXT_MENU_ID = "MY_CONTEXT_MENU";
function getword(info,tab) {
  if (info.menuItemId !== CONTEXT_MENU_ID) {
    return;
  }
  console.log("Word " + info.selectionText + " was clicked.");
  chrome.tabs.create({  
    url: "http://www.google.com/search?q=" + info.selectionText
  });
}
chrome.contextMenus.create({
  title: "Search: %s", 
  contexts:["selection"], 
  id: CONTEXT_MENU_ID
});
chrome.contextMenus.onClicked.addListener(getword)

Answer 3

Verbesserung der Antwort von ahnquan so chrome.contextMenus.create nicht bei jedem Aufruf eines Hintergrundskripts aufgerufen wird, und auch die Codierung der highlighted text in den URI einfügen, damit er nicht abbricht, wenn er Sonderzeichen enthält, wie z. B. ;,/?:@&=+$ .

Ihre background.js sieht dann so aus:

chrome.runtime.onInstalled.addListener(function() {
    chrome.contextMenus.create({
        "title": 'Search Google for "%s"',
        "contexts": ["selection"],
        "id": "myContextMenuId"
    });
});

chrome.contextMenus.onClicked.addListener(function(info, tab) {
    chrome.tabs.create({  
        url: "http://www.google.com/search?q=" + encodeURIComponent(info.selectionText)
    });
})

Und manifest.json:

{
    "manifest_version": 2,
    "name": "App name",
    "version": "1.0",

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

Answer 4

Manifest v3 ist heraus, so dass auf Lucas Mendonca's Antwort zu verbessern, ändern Sie einfach die manifest.json zu:

{
    "manifest_version": 3,
    "name": "App name",
    "version": "1.0",

    "permissions": ["contextMenus"],
    "background": { 
        "service_worker": "background.js",
        "persistent": false
    }
}