Suchen und Markieren von Text auf der aktuellen Seite für eine Chrome-Erweiterung

Ich werde damit beginnen, den Zweck jeder Art von Seite / Skript klarer zu machen.

Zuerst ist background page/script . Der background script ist der Ort, an dem deine Erweiterung lebt. Es ist nicht erforderlich, aber um die meisten Erweiterungs-Dinge zu tun, brauchen Sie eine. In ihm können Sie verschiedene Ereignis-Listener und dergleichen einrichten, je nachdem, was Sie tun möchten. Es lebt in seiner eigenen kleinen Welt und kann nur mit anderen Seiten und Skripten interagieren, indem es chrome.* apis benutzt. Wenn Sie es als Ereignisseite einrichten, funktioniert es genauso, außer dass es entladen wird, wenn es nicht verwendet wird, und in den Speicher zurückgeladen wird, wenn es etwas zu tun gibt.

Content scripts bezieht sich auf Javascript und / oder CSS. Sie sind das wichtigste Werkzeug für die Interaktion mit Webseiten. Sie haben sehr begrenzten Zugriff auf chrome.* apis, aber sie haben vollen Zugriff auf das DOM der Seite, in die sie injiziert werden. Wir werden sie in einer Minute wieder benutzen.

Jetzt für Popup pages . Im Gegensatz zu background script und content script haben Popups sowohl HTML als auch JS . Der HTML -Teil ist wie jede andere Seite, nur klein und als ein Overlay-Popup, das aus dem Icon kommt. Der Skriptteil davon kann jedoch alle Dinge tun, die die Hintergrundseite tut, außer dass sie entladen wird, wenn das Popup geschlossen wird.

Nun, da die Unterschiede klarer sind, gehen wir zu dem über, was Sie tun möchten. Es klingt, als ob Sie das Popup öffnen möchten, der Benutzer muss Text eingeben, nach dem auf der aktuellen Registerkarte gesucht werden soll, und dann den Text auf der Seite markieren. Da Sie gesagt haben, dass Sie bereits wissen, wie Sie den Text hervorheben möchten, werde ich diesen Teil Ihnen überlassen.

Zuerst richten Sie unsere Manifest-Datei ein. Für diese spezielle Aktion benötigen wir kein Hintergrundskript. Was wir brauchen, sind die Berechtigungen "tabs" und "activeTab" . Dadurch können wir unser Skript später einfügen. Wir müssen auch die Browser-Aktion mit ihrem Popup definieren. Insgesamt würde es ungefähr so ​​aussehen:

Jetzt können wir in unserer popup.html -Datei nur Markup und CSS, überhaupt keinen Inline-Code haben. Wir werden alles in unsere Datei js einfügen und sie einschließen. So etwas sollte funktionieren:

Hier kommen wir auf das Inhaltsskript zurück. Es gibt zwei Möglichkeiten, ein Inhaltsskript zu injizieren: Zuerst müssen Sie es im Manifest definieren. Dies funktioniert am besten, wenn Sie es immer für einen bestimmten Satz von URLs injizieren möchten. Zweitens, um die Methode chrome.tabs.executeScript zu verwenden, um sie bei Bedarf zu injizieren. Das werden wir nutzen.

Damit haben wir unser Skript erfolgreich eingefügt und dann den Suchtext an dieses Skript gesendet. Stellen Sie nur sicher, dass das Skript wie folgt in einen onMessage Listener eingebettet ist:

Und das fasst es ziemlich zusammen. Damit sollten Sie in der Lage sein, es zum Laufen zu bringen. Wenn etwas noch nicht klar ist, lass es mich wissen und ich werde es beheben.

Ich denke, was dich verwirrt, ist das nicht existierende Konzept einer "Inhaltsseite". Es gibt keine solche Sache. Was Sie wahrscheinlich meinen, ist ein "Inhaltsskript". Lassen Sie mich die drei Hauptkomponenten einer Erweiterung erklären:

Hintergrundseite

Wie Sie bereits sagten, ist dies der beständige Aspekt einer Chrome-Erweiterung. Obwohl es HTML-Seite sein kann, wird es nie gerendert. Sie verwenden es einfach zum Ausführen von JavaScript und anderen Inhalten, die dauerhaft bleiben. Sie können die Hintergrundseite nur aktualisieren, indem Sie die Erweiterung im Erweiterungsmanager aktualisieren oder die Erweiterung erneut installieren.

Dies ist am nützlichsten für das Speichern von Informationen, die dauerhaft bleiben sollten, z. B. Anmeldeinformationen für die Authentifizierung oder Zähler, die sich im Laufe der Zeit aufbauen sollten. Verwenden Sie die Hintergrundseite jedoch nur, wenn dies unbedingt erforderlich ist, da sie Ressourcen verbraucht, solange der Benutzer Ihre Erweiterung ausführt.

Sie können ein Hintergrundskript wie manafest Datei wie folgt hinzufügen:

Oder so:

Fügen Sie background.js einfach über ein typisches Tag zu background.html hinzu.

Popup

Dies sehen Sie, wenn Sie auf das Symbol in der Symbolleiste klicken. Es ist einfach ein Popup-Fenster mit etwas HTML. Es kann HTML, JavaScript, CSS und alles enthalten, was Sie in eine normale Webseite einfügen würden.

Nicht alle Erweiterungen benötigen ein Popup-Fenster, aber viele tun es. Zum Beispiel benötigt Ihre Hervorhebungserweiterung möglicherweise kein Popup, wenn nur Text auf einer Seite hervorgehoben wird. Wenn Sie jedoch ein Suchergebnis sammeln müssen (was wahrscheinlich erscheint) oder dem Benutzer einige Einstellungen oder eine andere Benutzeroberfläche zur Verfügung stellt, ist ein Popup-Fenster eine gute Möglichkeit, dies zu tun.

Sie können der Manifestdatei ein Popup wie folgt hinzufügen:

Inhaltsskript

Wie ich bereits erwähnt habe, ist dies keine "Seite" an sich - es ist ein Skript oder eine Menge von Skripten. Ein Inhaltsskript ist das, was Sie verwenden, um JavaScript in Seiten zu integrieren, deren Browser der Benutzer ist. Zum Beispiel geht ein Benutzer zu Facebook und ein Inhaltsskript könnte den Hintergrund in Rot ändern. Das ist fast sicher das, was Sie verwenden müssen, um Text auf einer Seite hervorzuheben. Infizieren Sie einfach JavaScript und alle erforderlichen Bibliotheken, um die Seite zu durchsuchen oder das Dom zu crawlen und Änderungen an dieser Seite zu rendern.

Sie können Inhaltsskripte jedes Mal einfügen, wenn ein Benutzer eine URL wie folgt öffnet:

Das obige injiziert "content.js" in "alle URLs".

Sie müssen dies auch zu den Berechtigungen hinzufügen:

Sie können JQuery sogar zur Liste der Inhaltsskripts hinzufügen. Das Schöne an Erweiterungen ist, dass die Inhaltsskripts sandboxed sind, so dass die Version von JQuery, die Sie injizieren, nicht mit JQuery auf Seiten kollidiert, die der Benutzer besucht.