Führen Sie das Skript jedes Mal aus, wenn Sie auf das Chrome-Erweiterungssymbol klicken


77

Wie schreibe ich eine Chrome-Erweiterung so, dass jedes Mal, wenn ein Benutzer auf das Symbol klickt, mein Skript ausgeführt wird, aber kein Popup geöffnet wird? (Ich würde dies selbst in den Dokumenten nachschlagen, aber aus irgendeinem Grund hörten sie plötzlich auf zu arbeiten und blätterten auf jeder Seite, bis ich an diesem Punkt angelangt war.)

Ich gehe davon aus, dass das Manifest nur korrekt eingerichtet wird. Folgendes habe ich jetzt:

{
  "name": "My Extension",
  "version": "0.1",
  "description": "Does some simple stuff",
  "browser_action": {
    "popup" : "mine.html",
    "default_icon": "logo.png"
  },
  "permissions": [
    "notifications"
  ]
}

Antworten:


103

Entfernen Sie das Popup aus Ihrem browser_action-Abschnitt des Manifests und verwenden Sie Hintergrundseiten zusammen mit browser Action im Hintergrundskript.

chrome.browserAction.onClicked.addListener(function(tab) { alert('icon clicked')});

9
Wo genau lege ich das hin? Ohne mine.html ist die einzige Datei in der Erweiterung das Manifest ... nun, und das Symbol.
Endophage

3
Schauen Sie sich die Hintergrundseiten an - code.google.com/chrome/extensions/background_pages.html . Hier platzieren Sie Ihren lang laufenden Code und Code, der auf verschiedenen Seiten gleich ist. Der Link zum obigen Dokument enthält ein Beispiel mit browserAction.onClicked
arunkumar

Ich habe es verstanden. Ich habe anfangs eine Hintergrundseite ausprobiert, war mir jedoch der browserAction.onClicked nicht bewusst.
Endophage

3
Wenn Sie in manifest.json keinen browser_action-Abschnitt haben, funktioniert dies nicht. Sie müssen leere browser_action in manifest.json hinzufügen: "browser_action": {}
Adam Faryna

64

Wenn Sie kein Popup anzeigen möchten, entfernen Sie es zunächst "popup" : "mine.html"aus Ihrem manifest.json(in Ihrer Frage angezeigten).

Ihr manifest.jsonwird ungefähr so ​​aussehen:

{
  "name": "My Extension",
  "version": "0.1",
  "manifest_version" : 2,
  "description": "Does some simple stuff",
  "background" : {
    "scripts" : ["background.js"]
  },
  "browser_action": {
    "default_icon": "logo .png"
  },
  "permissions": ["activeTab"]
}
  • Beachten Sie, dass manifest_versiones da sein muss und es muss sein 2.
  • Beachten Sie, dass die activeTabBerechtigung hinzugefügt wurde.
  • Beachten Sie, dass Sie nur eines tun können, wenn Sie auf die Aktionsschaltfläche des Browsers klicken: Entweder können Sie ein Popup anzeigen oder Sie können ein Skript ausführen, aber Sie können nicht beides tun.

Zweitens, um ein Skript auszuführen, wenn auf das Symbol geklickt wird, platzieren Sie den folgenden Code in Ihrer background.jsDatei (der Dateiname ist in Ihrer angegeben manifest.json):

chrome.browserAction.onClicked.addListener(function(tab) {
   chrome.tabs.executeScript(null, {file: "testScript.js"});
});

Schließlich testScript.jssollten Sie den Code eingeben, den Sie ausführen möchten, wenn Sie auf das Symbol klicken.


3
Ab Februar 2017 erreicht diese Lösung genau das, was in der ursprünglichen Frage gestellt wurde.
mjamore

3
Großartig, diese Arbeit für mich als Juni 2018. Die Abstimmung wert! @kerzek Wahrscheinlich so etwas:js function buttonClicked(tab) { var msg = { message: "user clicked!" } chrome.tabs.sendMessage(tab.id, msg); }
KF

1
Aus Gründen der Übersichtlichkeit wird der onClickedListener nur ausgelöst, wenn Sie das Popup entfernen. Es ist das eine oder andere, nicht beides.
HughHughTeotl

5

Verwenden Sie anstelle der Angabe einer Popup-Seite die hierchrome.browserAction.onClicked dokumentierte API .


3

Sie müssen eine Hintergrunddatei hinzufügen. Aber zuerst müssen Sie ein Attribut in manifest.json hinzufügen, wie z.

"background":{
    "scripts":["background.js"]
}

Benennen Sie jetzt eine Datei in Ihrem Erweiterungsordner als background.js. Es gibt eine Möglichkeit, Objekte aus dem Hintergrund an Ihre Inhaltsskripte zu senden. Angenommen, Ihr Inhaltsskript heißt content.js. Dann müssen Sie dieses Codefragment in die Datei background.js schreiben

chrome.browserAction.onClicked.addListener(sendfunc);
function sendfunc(tab){
    msg={txtt:"execute"};
    chrome.tabs.sendMessage(tab.id,msg);
}

Der obige Code sendet ein Objekt mit dem Namen msg an die Inhaltsseite, und dieses msg-Objekt hat die Eigenschaft txtt, die gleich "execute" ist. Als Nächstes müssen Sie die Werte im Inhaltsskript als vergleichen

chrome.runtime.onMessage.addListener(recievefunc);
function receivefunc(mssg,sender,sendResponse){
    if(mssg.txtt==="execute"){
      /*  
         your code of content script goes here
      */
    }
}

Wenn Sie jetzt auf das Erweiterungssymbol klicken, wird ein Objekt mit dem Namen msg vom Hintergrund zum Inhalt gesendet. Die Funktion "recievefunc ()" vergleicht ihre txtt-Eigenschaft mit der Zeichenfolge "execute", wenn sie mit dem Rest des ausgeführten Codes übereinstimmt.

Hinweis: msg, txtt, sendfunc, receivefunc, mssg sind Variablen und keine Chrome-Schlüsselwörter, sodass Sie alles verwenden können, was Sie möchten.

ich hoffe es hilft.

:) :)


0

Dies war genau das, was ich brauchte, aber ich sollte Folgendes hinzufügen: Wenn Sie nur ein einmaliges Ereignis benötigen, z. B. wenn ein Benutzer auf das Symbol der Erweiterung klickt, sind Hintergrundseiten eine Verschwendung von Ressourcen, da sie die ganze Zeit im Hintergrund ausgeführt werden . Verwenden Sie stattdessen Ereignisseiten:

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

Wenn dies zutrifft, sollten Sie content_scriptstattdessen das Skript verwenden und an Ihr DOM anhängen. Wenn Sie die Funktion "Nur im Hintergrund ausführen" verwenden, wird das Funktionskonzept der Verwendung des Hintergrunds von Anfang an zunichte gemacht. Nur ein Gedanke und das heißt nicht, dass diese Idee nicht funktionieren würde.
KF
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.