Chrome extensions sind im allgemeinen recht einfach zu Programmieren. Besonders interessant dabei ist natürlich die Möglichkeit, dem User die Möglichkeit zu geben, über das Kontextmenü bestimmte Aktionen auszuführen.
Wie das ganze aussieht, kann man am Beispiel meiner Chrome Extension d3coder sehen.
Die erstellung der Menüeinträge ist dabei recht einfach – dazu reicht ein wenig JavaScript:
Weiterlesen
Chrome extensions sind im allgemeinen recht einfach zu Programmieren. Besonders interessant dabei ist natürlich die Möglichkeit, dem User die Möglichkeit zu geben, über das Kontextmenü bestimmte Aktionen auszuführen.
Wie das ganze aussieht, kann man am Beispiel meiner Chrome Extension d3coder sehen.
Die erstellung der Menüeinträge ist dabei recht einfach - dazu reicht ein wenig JavaScript:
var menu =
{
"title": "Hello world!",
"contexts":["selection", "editable"]
};
var id=chrome.contextMenus.create(menu);
Zuerst wird dabei ein Objekt mit den gewünschten Informationen erstellt. Das Attribut "title" Gibt dabei den Titel an, der später im Kontextmenü erscheint, das Attribut "context" in welchen Situationen der Eintrag angezeigt wird - in diesem Fall immer dann, wenn Text auf der Seite selektiert wurde und/oder man sich in einem veränderbarem Textfeld( z.B. input oder textarea) befindet.
Weitere erlaubte contexts wären
'all', bei dem der Eintrag immer angezeigt wird
'page', dies ist der Standardwert und trifft immer dann zu, wenn keiner der anderen Werte(außer 'all') zutrifft
'link', welcher immer dann aktiv ist, wenn man einen Rechtsklick auf Links macht
'image', wie der Name bereits verrät erscheint dieser Eintrag immer bei Bildern
'video' / 'audio', erscheint bei den HTML5-Elementen video und audio
Natürlich ist dieser Eintrag im Moment noch nutzlos. Um ihn dazu zu bringen, eine Aktion auszuführen, muss man ihn noch ein wenig abändern:
var menu =
{
"title": "Hello world!",
"contexts":["selection", "editable"],
"onclick" : function(info, tab)
{
alert('Hello World!');
}
};
var id=chrome.contextMenus.create(menu);
Wie man sieht, wird hier dem Attribut "onclick" eine Funktion zugewiesen, die im Falle eines Klicks etwas ausgibt.
Nun haben wir angegeben, das unser Menüeintrag immer dann erscheint, wenn etwas selektiert wurde - das kann man natürlich auch nutzen, in dem man den selektierten Text weiterverarbeitet.
Dabei könnte die onclick-Funktion etwa so aussehen:
"onclick" : function(info, tab)
{
alert( info.selectionText );
}
Damit wird jedes mal, wenn man etwas selektiert und dann den Kontextmenüeintrag anklickt der selektierte Text per alert() ausgegeben.
Es gibt natürlich auch noch die Möglichkeit, Menüs zu verschachteln - dazu muss man nur die ID, die bei der Erstellung zurückgeliefert wird, dem nächste Punkt als parent übergeben. Das ganze sieht dann etwa so aus:
var menu =
{
"title": "Hello world!",
"contexts":["selection", "editable"]
};
var parentId=chrome.contextMenus.create(menu);
var secondMenu =
{
"title": "Your title",
"contexts":["selection", "editable"],
"parentId": parentId
};
var id=chrome.contextMenus.create(secondMenu);
Jetzt sollte, sobald man im Kontextmenü über den ersten Menüeintrag fährt, der zweite als Unterpunkt aufklappen.
Doch was ist wenn man einen Menüeintrag nicht mehr braucht? Auch dafür gibt es eine einfache Variante - man benötigt nur die ID des Menüeintrags und eine der API-Funktionen:
chrome.contextMenu.remove(id);
