Heim >Web-Frontend >js-Tutorial >Schreiben Sie das Web mit Chickenfoot neu
Eine Reihe von Plugins und Erweiterungen steht dem Firefox -Browser zur Verfügung, damit Entwickler mit dem DOM und mit anderen exponierten Teilen einer Webseite interagieren können. Tools wie das JavaScript -Shell -Lesezeichen, Firebug, Greasemonkey und Platypus haben sich als nützlich erwiesen, um Entwicklern eine benutzerdefinierte Interaktivität zu einer Seite, Debug -DOM- und CSS -Problemen und Testideen zu ermöglichen.
Wenn ein Benutzer jedoch dynamisch mit mehreren Seiten interagieren, verschiedene Teile der Firefox -Schnittstelle automatisieren, auf Skriptaktivitäten über eine Reihe von Seiten hinweg oder um sowohl mit der Webseite als auch mit dem lokalen Dateisystem gleichzeitig zusammenzuarbeiten, wurden die Optionen in der Vergangenheit begrenzt. Dies hat sich jedoch in letzter Zeit mit Erweiterungen wie CoScripter und der Erweiterung, die das Thema dieses Artikels bildet: Chickenfoot, begonnen.
Chickenfoot ist eine Firefox -Erweiterung der MIT -Benutzeroberfläche. Es bietet die Möglichkeit,:
Chickenfoot ist ein äußerst leistungsfähiges Werkzeug für jeden Entwickler, der Aktionen automatisieren oder die Funktionalität der Webseiten, die er regelmäßig verwendet, erweitern.
Chickenfoot ist genauso installiert wie andere Firefox -Erweiterungen: Laden Sie einfach die XPI -Datei herunter und akzeptieren
Trotz der Tatsache, dass Firefox ein plattformübergreifender Browser ist, funktioniert die Erweiterung am besten unter Windows. Wenn Sie sich auf einem Mac befinden, können Sie immer noch Chickenfoot installieren und zusammen mit dem Code in diesem Artikel spielen. Möglicherweise sehen Sie möglicherweise inkonsistentes Verhalten. Leider, bis die Knicke ausgebügelt sind, ist die Warnung, die diese Dokschell nicht zu finden ist.
Sobald Sie die Erweiterung installiert und Ihren Browser neu gestartet haben, können Sie auf die Chickenfoot Interactive Shell zugreifen, indem Sie entweder F8 drücken oder die Option Ansicht> Seitenleiste> Hühnerfußmenü auswählen. Die Schale wird in einer Seitenleiste geöffnet und sehen ungefähr das Bild unten aus.
Das untere Feld enthält vier Registerkarten. Die standardmäßige Registerkarte, die standardmäßig ausgewählt wurde, wird mit der Ausgabe bezeichnet und zeigt eine Geschichte aller Ihrer Aktionen und aller Aktionen von Chickenfoot an, die auf den Browser angewendet wurden. Zunächst müssen wir Chickenfoot sagen, dass wir unsere Aktionen aufzeichnen sollen - klicken Sie auf die Registerkarte Aktionen und stellen Sie sicher, dass die Option "Datensatzaktionen" überprüft wird.
Lassen Sie uns testen, dass unsere Ausgabe erfasst wird. Öffnen Sie dazu eine neue Registerkarte Firefox und laden Sie die Google -Homepage. Sobald die Seite geladen hat, klicken Sie oben links auf der Seite auf den Link der Bilder, wodurch Sie zu Googles Bildsuche führen. Wenn Sie erneut die Registerkarte Chickenfoot -Ausgabe auswählen, sollten Sie den folgenden Text sehen:
click("Images")Dies ist mehr als nur eine Beschreibung dessen, was passiert ist - es ist in der Tat ein Ausschnitt aus Hühnerfußcode! Um diesen Code zu testen, klicken Sie auf den Pfeil zurück, um zur Google -Homepage zurückzukehren. Kopieren Sie und fügen Sie den Snippet ein, den wir in das Top -Chickenfoot -Panel erstellt haben. Klicken Sie oben im Panel auf den grünen Pfeil, und Ihr Code -Snippet wird ausgeführt. Die Seite navigieren erneut zur Seite von Google Image Such.
Ideen hinter Chickenfoot
Die Hauptidee hinter Chickenfoot besteht darin, Benutzern ein Tool zum Erstellen von Makros zu bieten, das jeder verwenden oder schreiben kann, ohne die Unterstützung eines Programmierers zu benötigen. Ich sollte hier beachten, dass ich der Meinung bin, dass dieses Ziel nicht erreicht wird, da immer eine Nachfrage nach Skripten mit komplexen Funktionen bestehen wird, die nur von einem Programmierer implementiert werden können. Die Tatsache, dass dieses idealistische Ziel die treibende Kraft hinter Chickenfoot ist, hat jedoch zu einem sehr nützlichen Werkzeug geführt.
Diese Ziele ähneln denen von CoScripter - in der Tat verwendet CoScripter einen Teil des Chickenfoot Version 0.9 Code. Ich werde in diesem Artikel keine Details zu Cocripter eingehen, aber wenn Sie mehr lesen möchten, siehe Alex Faaborgs Aufschreiben.
Schauen wir uns an, wie Chickenfoot -Skripte aufgenommen werden können, ähnlich wie ein Makro in MS Word oder Adobe Photoshop. In diesem Beispiel werden wir ein Skript erstellen, das nur etwas mehr involviert ist als der einzelne Befehl, den wir im vorherigen Abschnitt gesehen haben. Für diese Demo habe ich mich inspirieren, wenn ich mit CoScripter Tutorial begann.
Wenn wir fertig sind, führt unser Skript dazu, dass unser Browser:
Lassen Sie uns Scripting erhalten! Öffnen Sie Ihre Hühnerfuß -Seitenleiste, wenn Sie es noch nicht getan haben, und geben Sie den folgenden Befehl im oberen Feld ein:
click("Images")
Klicken Sie dann auf den grünen Pfeil. Wie Sie vielleicht erwarten, lädt Ihr Browser die Google -Startseite.
Um den Rest unseres Skripts aufzuzeichnen, werden wir im Grunde nur die oben beschriebenen Schritte ausführen. Klicken Sie auf den Link der Bilder, geben Sie den Text "Koalas" im Suchfeld ein und klicken Sie auf die Registerkarte, um das Feld zu beenden. Klicken Sie schließlich auf die Schaltfläche Suchbilder.
Ihre Ausgabe -Registerkarte sollte jetzt etwas ähnlich wie folgt anzeigen:
go("google.com")
Wenn Sie diese Schritte ausgeführt haben, während Sie in Ihr Google -Konto angemeldet wurden, sind einige der aufgeführten Textwerte möglicherweise unterschiedlich, die Aktionen sollten jedoch weiterhin identisch sein.
Nachdem wir unsere Aktionen aufgezeichnet haben, können wir aus dieser Codeausgabe auswählen und die gewünschten Zeilen in die obere Tafel unserer Hühnerfuß -Seitenleiste kopieren. Voila! Wir haben ein funktionierendes Skript!
Abgesehen von der ersten GO -Aktion sind die Befehle, nach denen wir befinden, die Befehle der Klick und Eingabetaste. Wir können auch die übergebenen Werte vereinfachen, damit unser Skript ungefähr so aussieht:
go("http://www.google.com/")
click("Images")
go("http://images.google.com/imghp?hl=en&tab=wi")
enter("Sign in", "koalas")
click("Search Images button")
go("http://images.google.com/images?hl=en&q=koalas&btnG=Search+Images
&gbv=2")
Eine Sache, die Sie aus dem obigen Beispiel bemerken, ist, dass Chickenfoot Syntax viel mit vielen C-basierten Sprachen wie JavaScript gemeinsam hat. Chickenfoot -Befehle sind in der Tat JavaScript.
Ein Konzept, das wichtig ist, ist, dass Chickenfoot in der normalen (x) HTML -Umgebung, mit der die meisten JavaScript -Benutzer vertraut sind, jedoch in der XUL -Umgebung von Firefox nicht ausgeführt werden. Diese Umgebung wurde für Chickenfoot erweitert, damit sie leichter mit dem Kontext einer Webseite interagieren kann.
Wenn Sie ein Objekt verweisen oder ändern, auf das JavaScript im Kontext einer normalen Seite Zugriff hat, verhalten Sie sich wahrscheinlich wie erwartet. Da die Chickenfoot JavaScript -Engine jedoch ein tieferes Maß an Zugriff hat, können Sie mehr Freiheiten als gewöhnlich einnehmen, z. B. auf Objekte außerhalb ihres Standardkontextes zugreifen.
Wenn Sie Chickenfoot weiter erforschen, können Sie Unterschiede zwischen den beiden Umgebungen und dem Verhalten von Objekten in ihnen begegnen. In den meisten Fällen liegt der Grund für diese Unterschiede auf native Funktionen aus der Browserumgebung, die in der Xul Chickenfoot -Umgebung zur Vertrautheit neu implementiert wurden.
Ein solches Beispiel ist die Warnungsfunktion; Betrachten Sie den folgenden Ausschnitt JavaScript -Code:
click("Images")
Wenn dieser Code in der HTML -Umgebung in Firefox ausgeführt wird, wird das folgende Dialogfeld angezeigt:
Wenn es in der Chickenfoot -Umgebung ausgeführt wird, erzeugt der gleiche Code jedoch das folgende Dialogfeld:
Zusätzlich zu den vielen gemeinsamen Funktionen gibt es einige zusätzliche Funktionen, die in der regulären Browser-basierten JavaScript-Implementierung nicht verfügbar sind, aber in der Chickenfoot-Umgebung verfügbar sind. Eine Liste dieser Funktionen finden Sie in der Chickenfoot API -Dokumentation.
Wie bei der Technologie gibt es bestimmte Teile von Chickenfoot, die nützlicher sind als andere, und Teile, die Sie unbedingt verstehen müssen, um das Beste aus Chickenfoot zu machen.
Folgende Teile, die ich am nützlichsten finde.
Der Muster -Datentyp
Die meisten Chickenfoot -Funktionen akzeptieren Muster für Parameter. In der API -Dokumentation wird ein Muster als „Vereinigung einer Reihe anderer Datenatypen“ beschrieben.
Es ist am einfachsten, ein Muster als Kurzsinn für den Zugriff auf Objekte auf einer HTML -Seite zu betrachten. Zum Beispiel bezieht sich das Muster „zweiter Hühnerfuß“ auf das zweite Ereignis des Wortes „Chickenfoot“ auf einer Seite. Wenn Sie die Chickenfoot API -Seite besuchen und den folgenden Code ausführen würden, wird das zweite Vorkommen des Wortes „Chickenfoot“ auf der Seite ausgewählt:
go("google.com")
Es gibt einige Variationen dieses Ansatzes, und Chickenfoot verwendet eine Logik, um zu versuchen, intelligent herauszufinden, welches Muster Ihre Phrase verwendet. Aus diesem Grund funktionieren bestimmte Funktionen (z. B. Klicken) nicht gut mit Mustern, da sie Fehler erzeugen, wenn sie ein Muster erhalten, das mehr als ein mögliches Ergebnis zurückgeben könnte.
Angenommen, wir sollten den obigen Code in Folgendes ändern:
go("http://www.google.com/")
click("Images")
go("http://images.google.com/imghp?hl=en&tab=wi")
enter("Sign in", "koalas")
click("Search Images button")
go("http://images.google.com/images?hl=en&q=koalas&btnG=Search+Images
&gbv=2")
Es ist wahrscheinlich, dass dies eine Fehlermeldung in dem Ausgangspanel erstellt, ähnlich wie folgt:
go("google.com")
click("Images")
enter("koalas")
click("Search Images button")
Um Muster effektiv zu verwenden, müssen Sie daher entweder Ihre Muster besonders präzise machen (beispielsweise durch Verwendung der XPath -Syntax oder der Lapis -Query -Syntax, wenn Sie die Lapis -Erweiterung installiert haben) oder die Fundfunktion verwenden und über das Array der Objekte iterieren, die diese Funktion zurückgibt. Wir werden uns diesen Ansatz als nächstes ansehen.
Ein Muster ist eine Vereinigung der folgenden Datentypen:
Die Find -Funktion
Die Find -Funktion nimmt ein Muster und gibt die Objekte zurück, die mit diesem Muster übereinstimmen. Platzieren Sie den folgenden Code in Ihrem oberen Bereich und führen Sie ihn auf dieser Seite aus:
click("Images")
Sie werden feststellen, dass ein Objekt in Ihrem Ausgangsfeld angezeigt wird. Wenn Sie auf dieses Objekt klicken, werden alle Instanzen des Wortes „Chickenfoot“ hervorgehoben.
Das Objekt, das diese Funktion zurücksetzt, ist leider kein JavaScript -Array. Als Faustregel müssen Sie die Ergebnisse der Fundfunktion von Chickenfoot in ein Array einleiten und dann durch das Array gehen, um das individuelle Objekt auszuwählen, nach dem Sie suchen.
Die Funktion
Mit der Einfügungsfunktion können Sie andere JavaScript -Dateien in Ihr Chickenfoot -Skript aufnehmen. Chickenfoot wird mit ein paar integrierten Bibliotheken ausgestattet (die meisten Namen sind selbsterklärend):
Wenn Sie die Funktionalität berücksichtigen, die jede dieser Bibliotheken in die Tabelle bringt, sollten Sie beginnen, das Potenzial zu schätzen, das Chickenfoot in das Web bringt.
Sie können eine Bibliothek in Ihr Chickenfoot -Skript auf eine von vier verschiedenen Arten einfügen:
Ein Hinweis zur Verwendung neuer Bibliotheken: Ich habe festgestellt, dass häufig die Arten von Bibliotheken, die am besten funktionieren Die Einfügungsfunktion nimmt auch einen optionalen Objektparameter vor, der sehr nützlich sein kann, um das zu überprüfen, was in einer bestimmten Bibliothek oder in einer bestimmten Bibliotheken verfügbar ist, obwohl diese Funktionalität in diesem Artikel nicht behandelt wird.
Chickenfoot verfügt auch über mehrere andere Sprachkonstrukte, z. Diese Funktionen ermöglichen es auch, den Inhalt dynamisch in dieses Element oder in ein umgebendes HTML -Element einzufügen.
nützliche Aufgaben wurden in Hühnerfeed
Beginnen wir! Hier sind ein paar handliche Hühnerfußskripte.
Erstens finden wir heraus, welche Variablen auf der oberen Ebene Ihres Firefox -Chroms gebunden sind:
Diese einzelne Zeile sollte Ihnen einiges an Informationen liefern. Sie können auch einen Haufen von Informationen zum aktuellen Dokument mit diesem Befehl anzeigen:
click("Images")
Nächst
go("google.com")
Schreiben wir jetzt die XHTML -Zeichenfolge oben auf Ihren Desktop. Es ist möglich, die XHTML -Ausgabe aus dem obigen Beispiel in eine Datei auf Ihrem Desktop zu schreiben. Ersetzen Sie den entkommenen Dateitrennzeichen in der letzten Zeile durch "//", wenn Sie sich auf einem Mac- oder Linux -Computer befinden:
go("http://www.google.com/")
click("Images")
go("http://images.google.com/imghp?hl=en&tab=wi")
enter("Sign in", "koalas")
click("Search Images button")
go("http://images.google.com/images?hl=en&q=koalas&btnG=Search+Images
&gbv=2")
Die obige Aufgabe kann tatsächlich mit einem noch einfacheren Code in der bald veröffentlichten Version von Chickenfoot ausgeführt werden, da das Standard-Firefox-Download-Verzeichnis (normalerweise den Desktop) verwendet wird.
go("google.com")Lassen Sie uns nun mit dem von Ihnen inspizierten Browserchrom interagieren.
click("Images")
enter("koalas")
click("Search Images button")
In Firefox kann auf Teile des Fensters Ihres Browsers zugegriffen werden, wenn Sie die ID des betreffenden Objekts haben. Dies kann mit der Funktion chromewindow.document.getElementById abgerufen werden. Beispielsweise ist die ID des Kontextmenüs, das angezeigt wird, wenn Sie mit der rechten Maustaste auf einer Seite klicken, contentAreAcontextMenu. Wenn wir das Skript aus Beispiel 3 oben nehmen, das das DOM auf dem Desktop speichert und es in eine Funktion einwickelte, können wir diese Funktion aus dem Kontextmenü aufrufen, wie SO:
click("Images")
Beachten Sie, dass die Funktion "Chickenfoot -Funktion angehängt" -Anhangfunktion ermöglicht, Daten an ein Dokument anzuhängen. Sie verwenden es so:
go("google.com")
Hoffentlich geben Ihnen diese Beispiele ein Gefühl für einige der einfachen, aber leistungsstarken Aufgaben, die durch Chickenfoot -Skript automatisiert werden können.
genug mit den einfachen Aufgaben - lass uns etwas mehr mit Chickenfoot weiterentwickeln!
Ich verwende das folgende Skript, um Google Mail -Funktionalität zu Funktionen hinzuzufügen - insbesondere, um nach einer Seite zu suchen und von den Gesprächen auszuwählen, die Text enthalten, die einem bestimmten Chickenfoot -Muster entsprechen. Es ist eine nützliche und leistungsstarke Verbesserung für den beliebtesten webbasierten E-Mail-Client aller.
Hier ist das Skript:
go("http://www.google.com/")
click("Images")
go("http://images.google.com/imghp?hl=en&tab=wi")
enter("Sign in", "koalas")
click("Search Images button")
go("http://images.google.com/images?hl=en&q=koalas&btnG=Search+Images
&gbv=2")
Dieses Skript fordert den Benutzer für einige Eingaben auf und übergibt diese Eingabe als Parameter an eine Chickenfoot -Find -Funktion. Denken Sie daran, dass Find ein Chickenfoot -Muster akzeptiert, sodass die möglichen Verwendungen für diese Art von Suche nahezu unbegrenzt sind, da Sie es bitten können, mehr als nur Strings zu entsprechen.
Sie können sich erinnern, als wir zum ersten Mal auf die Find -Methode gestoßen sind, dass es kein Array zurückgibt. Wir müssen daher die Ergebnisse in ein Array lesen. Sie werden wahrscheinlich das Codefragment finden, das diese Aufgabe ausführen, um in anderen Hühnerfußskripten nützlich zu sein, die Sie schreiben:
go("google.com")
click("Images")
enter("koalas")
click("Search Images button")
Danach schleifen das Skript durch das von der Find -Funktion zurückgegebene Array und versucht ein Chickenfoot -Muster zu konstruieren, das mit dem Text übereinstimmt, der unsere Suchzeichenfolge genau enthält. Wir verwenden dann die Chickenfoot Check -Funktion, um das Kontrollkästchen in diesem Abschnitt des Textes am nächsten zu umschalten, wodurch diese Nachricht ausgewählt wird.
Denken Sie daran, dass der Check in der Lage sein muss, sicherzustellen, dass er genau das Text hat, oder er macht einen Fehler. Deshalb können wir nicht einfach einen Scheck auf den Fund durchführen.Text.
Ein bemerkenswerter Aspekt des obigen Skripts ist seine geringe Größe relativ zu den Funktionen, die er erreicht. Die Funktionen von Chickenfoot bieten einfachere Möglichkeiten, mit einem Dokument dynamisch zu interagieren als solche Standard -APIs wie das DOM.
In diesem Artikel haben wir uns eine Reihe von Möglichkeiten angesehen, wie Sie Chickenfoot leicht verwenden können, um mit dem Browser zu interagieren. Wir haben uns nur an der Oberfläche zerkratzt, was in diesem Artikel mit Chickenfoot getan werden kann - das Potenzial ist riesig und ist nur durch Ihre Fantasie begrenzt!
Wenn Sie mehr erfahren möchten, lesen Sie die folgenden Ressourcen:
Wenn Sie ein Killer -Skript erstellen, ermutige ich Sie, es dem Chickenfoot Wiki zu senden. Happy Scripting!
Kann ich Web -Rewrite -Tools für akademische Zwecke verwenden? Stellen Sie immer sicher, dass Sie Ihre Quellen angemessen angeben.
Das obige ist der detaillierte Inhalt vonSchreiben Sie das Web mit Chickenfoot neu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!