So erstellen Sie ein Text-Search-Bookmarklet mit JavaScript

Bookmarklets sind JavaScript-Anwendungen das kann als abgerufen werden Browser-Lesezeichen. Sie werden verwendet, um Benutzern zu ermöglichen verschiedene Aktionen ausführen auf Webseiten. Mit diesem Bookmarklet von FontShop können Sie beispielsweise FontShop-Webfonts auf jeder Webseite in der Vorschau anzeigen.

In diesem Artikel werden wir sehen, wie schnell und einfach das geht ein Bookmarklet zusammenstellen indem Sie eines erstellen führt eine Wikiwand durch (besser aussehende Wikipedia) Suche für einen ausgewählten Text auf einer beliebigen Webseite.

Wie Bookmarklets funktionieren

Die URI eines Bookmarklets verwendet die Javascript: Protokoll das zeigt an, dass es ist bestehend aus JavaScript-Code. Wenn Sie auf ein Bookmarklet klicken, können Sie dies tun Führen Sie JavaScript aus auf einer Webseite, und führen Sie Aufgaben aus, z. B. das Erscheinungsbild einer Seite ändern, auf eine andere Seite umleiten oder neue Informationen darauf anzeigen.

Da sind Lesezeichen im Wesentlichen Mengen von JavaScript-Code, Sie sind mit wenig JavaScript-Kenntnissen einfach zu erstellen, entweder für den persönlichen Gebrauch oder um sie Ihren Benutzern anzubieten, wie dies WordPress mit seinem Press This Bookmarklet tut.

Beginnen Sie mit dem JavaScript-Code

Das URL-Struktur Wikiwand verwendet für einen englischsprachigen Artikel https://www.wikiwand.com/de/articleTitle. Wir müssen ein Skript schreiben, das auf die Wikiwand-Seite mit welcher URL springt endet mit der Zeichenfolge, die der Benutzer gerade ausgewählt hat - Der ausgewählte Text muss an die Stelle gesetzt werden Artikelüberschrift.

Zuerst werden wir Holen Sie sich den Text Der Benutzer hat auf der Seite den folgenden Code ausgewählt:

 getSelection (). toString () 

Wir müssen Besetzung das Objekt zurückgegeben von getSelection () als Schnur mit der toString () Methode, um es zu machen den ausgewählten Text ausgeben.

Als nächstes müssen wir einen Besuch durchführen zur Wikiwand-Artikelseite. Dies erreichen wir mit der folgenden Logik, wo newURL wird sein URL der Wikiwand-Artikelseite (das die ausgewählte Zeichenfolge am Ende enthält):

 location.href = newURL 

Wenn wir diese beiden Codeausschnitte zusammenfügen, erhalten wir das folgende Skript:

 location.href = 'https://www.wikiwand.com/en/'+getSelection () .toString () 

Jetzt müssen wir nur noch das hinzufügen Javascript: Protokoll nach vorne, und wir haben das endgültiger Code Wir werden in unserem Bookmarklet verwenden:

 // füge eine Zeile ohne Zeilenumbrüche ein javascript: location.href = 'https://www.wikiwand.com/en/' + getSelection (). toString (). replace (/ \ n / g, '% 20') ) 

Die Wahl ersetzen (/ \ n / g, '% 20') Am Ende ersetzt ein neues Zeilenzeichen (\ n) im Text mit einem einzigen Leerzeichen (% 20).

Der JavaScript-Code ist fertig. Beachten Sie, dass der Code platziert werden muss in einer einzigen Zeile ohne Zeilenumbrüche, da wird es später sein einem Texteingabefeld hinzugefügt.

Erstellen Sie das Lesezeichen

Öffnen Sie das Lesezeichenfenster Ihres Browsers und füge ein neues Lesezeichen hinzu:

• Feuerfuchs: Drücken Sie Strg + Umschalttaste + B / cmd + Umschalttaste + B, klicken Sie mit der rechten Maustaste auf "Lesezeichen-Symbolleiste" und wählen Sie "Neues Lesezeichen"..
• Chrom: Drücken Sie Strg + Umschalttaste + O / cmd + Alt + B, klicken Sie mit der rechten Maustaste auf "Lesezeichenleiste" und wählen Sie "Seite hinzufügen ...".

Im URL-Feld Kopieren Sie den JavaScript-Code von vorhin. Sobald das Lesezeichen erstellt wurde, kann es verwendet werden. Gehen Sie zu einer beliebigen Webseite, wähle ein Wort aus Sie möchten in Wikiwand suchen, und Klicken Sie auf das Bookmarklet - Die Wikiwand-Artikelseite wird sofort geöffnet.

Schneller Zugang

Anstatt jedes Mal nach dem Lesezeichen-Menü zu suchen, wenn Sie das Bookmarklet benötigen, können Sie wählen direkt anzeigen in Ihrem Browser für schnellen Zugriff.

• Feuerfuchs: Klicken Sie in der oberen Menüleiste auf "Ansicht> Symbolleisten" und wählen Sie "Lesezeichen-Symbolleiste"..
• Chrom: Drücken Sie Strg + Umschalttaste + B / cmd + Umschalttaste + B.

Erstellen Sie einen Bookmarklet-Link

Sie können Ihr Bookmarklet zu einer Website hinzufügen als Hyperlink auch welche Besucher kann ein Lesezeichen setzen Ziehen Sie den Link einfach in die Lesezeichen-Symbolleiste, oder klicken Sie mit der rechten Maustaste auf den Link und wählen Sie die Option zum Lesezeichen aus.

Um aus Ihrem Bookmarklet einen Hyperlink zu erstellen, erstellen Sie ein HTML-Tag mit dem Bookmarklet-Skript wie der Wert seiner href Attribut:

   Wikiwand Search Bookmarklet  

So speichern Sie Bookmarklets separat

Du kannst auch Verwenden Sie eine separate JavaScript-Datei Zum Speichern des Bookmarklet-Codes, der wahrscheinlich nicht erforderlich ist, wenn Sie ein kurzes Skript haben - wie das, das wir gerade in diesem Lernprogramm gesehen haben -, kann es jedoch nützlich sein, wenn der JavaScript-Code zu lang ist, um ihn in die Lesezeichenleiste einzufügen von Ihrem Browser.

Die Datei myscript.js werden enthalten den wichtigsten JavaScript-Code für das Bookmarklet, und Sie müssen den folgenden Code hinzufügen als Lesezeichen-URL (entweder in die Lesezeichenleiste des Browsers oder als Wert des Browsers href Attribut in der HTML-Datei):

 // füge in einer Zeile ohne Zeilenumbrüche Javascript hinzu: (() => mit (document) let s = createElement ('script'); s.src = 'myscript.js'; head.appendChild (s) ) (); 

Der Code-Snippet oben ist mit einer selbstaufrufenden Pfeilfunktion umwickelt, und verwendet Funktionen von ECMAScript 6, wie z Lassen Schlüsselwort, um die Codelänge zu reduzieren. Es fügt ein > Tag zeigt auf das myscript.js Datei an die Abschnitt des Dokuments Wenn der Benutzer auf das Bookmarklet klickt (Beachten Sie, dass Sie möglicherweise einen absoluten Pfad für das verwenden müssen myscript.js Datei).