request_url_withoutHTTP=,canonical_url_withHTTP=,canonical_url_withoutHTTP=,request_url_withoutHTTP_realspaces=. Webbrowser (Seite 1 von 2) « Tags « Blog « Bernhard Häussner
Bernhard Häussner
Tags: Artikel mit dem Tag «Webbrowser» durchstöbern

Firefox-Tricks für Webentwickler

30.10.2009, 10:12
userContent.css

userContent.css

Der populäre Webbrowser Mozilla Firefox zeichnet sich unter anderem durch viele Add-Ons aus. Jedoch wird nicht jede persönliche Vorliebe durch ein Add-On abgedeckt. Doch wer sich etwas mit Javascript und CSS auskennt, kann auch selbst kleine Einstellungen machen, ohne viel Aufwand. Dazu gibt es mindestens diese vier Möglichkeiten:

Anpassen von userContent.css und userChrome.css

Diese beiden Dateien befinden sich im Unterordner chrome des Firefox-Profilordners und müssen meistens angelegt werden. Sie sind (fast) ganz normale CSS-Stylesheets; Die userChrome.css enthält CSS-Regeln, die auf das XUL-Interface des Browsers, also alle Menüs, Toolbars etc. angewendet werden. So ist es leicht, z.B. die Schriftgröße der Bedienelemente zu vergrößern, oder der Adressleiste eine Monospace-Schriftart zu verpassen. Auf mozilla.org gibt es weitere Beispiele für userChrome.css.

Die Datei userContent.css enthält CSS-Regeln, die auf die angezeigten Webseiten angewendet werden. Ich benutze die Datei, um mich vor gewissen Links zu warnen: Zum Beispiel mag ich es nicht von Google immer auf experts-exchange.com zu klicken. Darum habe ich diese kleine Regel eingebaut, die mittels CSS3-Attribut-Selektor alle Links zu dieser Seite durchstreicht und verblasst:

a[href^="http://www.experts-exchange.com/"] {opacity:0.3 !important; text-decoration: line-through ! important;  }

Das !important bewirkt, dass die Regel die bereits vom Webseitengestalter gesetzten Regeln überschreibt.

Die Regeln lassen sich glücklicherweise auf bestimmte Seiten beschränken, so wie hier:

@-moz-document url(http://twitter.com/), url(http://twitter.com/home)
{
.latest-status {background-color:#FFFFC9;}
}

Diese Regel hinterlegt z.B. die letzte selbst geschriebene Nachricht im Stream von twitter.com mit einem leichten Gelb. Das erleichtert zu sehen, was wann passiert ist.

Eigene Sidebars

Wer Plattform-übergreifende Widgets basteln will, kann auf die Firefox-Sidebar zurückgreifen. In dieser lassen sich beliebige Webseiten anzeigen. Dazu muss man lediglich ein besonderes Lesezeichen erstellen, dass dann immer in der Sidebar geöffnet wird:

Sidebar Lesezeichen

Sidebar Lesezeichen

Man kann also wenn man etwas Bildschirmplatz opfern will, selbst gemachte Widgets anzeigen lassen. Der Link im Screenshot verweist auf eine Seite, die nur ein Textfeld enthält, um schnell Notizen zu machen oder als erweiterte Zwischenablage. Doch die Möglichkeiten sind nahezu unbegrenzt (Monitoring, Feeds, ...?).

Bookmarklets

Bookmarklets führen auf Knopfdruck bestimmte Javascript-Schnippsel auf einer Webseite aus, und funktionieren dabei nicht nur im Firefox. Dazu muss man den JS-Code von Zeilenumbrüchen befreien, alle Leerzeichen mit %20 kodieren und das Ganze dann umschließen mit:

javascript:(function(){/*here goes the code*/})();

So wird das Script zu einem Javascript-Link, der dann als Lesezeichen gespeichert werden kann. Ich habe mir z.B. ein Twitter Bookmarklet gebastelt. Außerdem einen DOM-Performance-Tester:

javascript:(function(){var%20d=0,l=500,n=document.getElementsByTagName('*').length;for(var%20i=0;i<l;i++){document.body.style.display='none';var%20s=Number(new%20Date());document.body.style.display='';var%20h=document.body.clientHeight;d+=Number(new%20Date())-s;}alert('Reflow:%20'+(d/l)+'%20ms%20('+Math.round(1000/(d/l))+'%20fps)\nDOM-Nodes:%20'+n+'\nRewlow%20per%20node:'+Math.round(1000000*d/(l*n))+'%20ns');})()

DOM-Benchmark

Das Kurze Script ermittelt, wie lange der Browser für einen Seitenaufbau braucht und wie viele DOM-Knoten das Dokument enthält. Es ist praktisch, wenn man komplexere Javascript-Animationen oder ähnliches erstellt, die langsam wirken. Dann offenbart der Test, ob nicht zu viele DOM-Knoten oder komplizierte CSS-Regeln die Seite verlangsamen.

Faustregel: Je weiter hinten ein Selektor steht, desto weniger Elemente sollten auf ihn passen, also li #id ist schneller als #id li, wobei sich das besonders in Verbindung mit CSS-Expressions bemerkbar macht.

Greasemonkey

Um auf bestimmten Seiten JS-Code auszuführen, gibt es das Firefox-Plugin Greasemonkey. Zu diesem Add-On gibt es nicht nur ein großes Repositorium existierender sog. Userscripts, sondern man kann auch schnell ein eigenes Script erstellen, um auf bestimmten Webseite irgendetwas anzupassen. Außerdem kann man jQuery benutzen mit folgender Zeile im Header:

// @require http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js

Ich habe z.B. ein Quick Search-Userscript gebastelt, welches beim Auswählen von Text ein kleines Menü öffnet, sodass ich den Text z.B. googlen, übersetzen oder twittern kann.

Es gibt also mehr effektive Möglichkeiten Firefox anzupassen, als das installieren von Add-Ons.

Kommentare: keine

SchülerVZ Buschfunk verstecken Firefox Add-On

07.05.2009, 18:28

Vor kurzem hat Schülerverzeichnis eine neue „Funktion“ namens „Buschfunk“ auf die Startseite hinzugefügt, die irgendwie jeden zu nerven scheint, mich eingeschlossen. Wozu gibt es Twitter. Deshalb von mir ein Firefox-Add-On um den Buschfunk zu verstecken.

Bisher ist das Add-On noch im Sandkasten, aber falls es sich bewährt (und kompatibel mit den ganzen Mozilla-Richtlinien ist) wird es vielleicht offiziell...

Technisches

Eigentlich ist das Add-On nur ein Greasemonkey-Script, dass mit dem User Script Compiler in ein Add-On umgewandelt wurde. Für alle, die sowieso die Greasemonkey-Erweiterung installiert haben, recht es auch das User-Script zu installieren:

Viel Spaß mit der Erweiterung. Oder viel Spaß ohne Buschfunk und vielleicht mit Twitter.

Edit:

Das Add-On ist obsolet, da es inzwischen das Feature schon auf der Seite gibt.

Kommentare: 4 Einträge

Greasemonkey Quick Search

21.04.2009, 20:10
Greasemonkey Quick Search

Greasemonkey Quick Search

Man muss ja nicht immer gleich eine Firefox-Erweiterung basteln, wenn man Firefox nur ein bisschen erweitern will. Wesentlich einfacher und schneller geht das (natürlich nur bei bestimmten Dingen) mit Bookmarklets, wie meinem Twitter Bookmarklet. Oder mit Greasemonkey, einer Firefox-Erweierung, die bestimmte Javascripts auf bestimmten Seiten ausführen kann. Ich habe mir ein kleines „Userscript“ gebastelt, dass, wann immer ich Text auf einer Webseite markiere, eine Reihe von Suchoptionen anzeigt.

Das Script registriert einen mouseup-Event-Handler und wenn Text auf der Webseite selektiert ist, öffnet dieser ein kleines Menü mit dem man dann den Text z.B. Googeln kann. Es unterstützt auch noch Google Maps, Wikipedia, und das Leo-Wörterbuch. (Ich hasse es nämlich ganze Texte mit Google zu übersetzen, wenn ich nur ein Wort nicht kenne, weil sich Englisch doch besser liest als Googles Deutsch.)

Um das Script zu benutzen muss man die Greasemonkey-Erweiterung installiert haben. Dann kann man das Script hier installieren:

Wer sich etwas mit HTML auskennt kann auch eigene Funktionen leicht nachrüsten.

Es gibt übrigens ein Verzeichnis vieler Greasemonkey-Scripte auf http://userscripts.org/

Changelog

  • 23.04.2009 - Updated to support twitter search too.
  • 09.07.2009 - Updates: tweet selected quotes and use selected text as URL.

If you're really missing something else and you think others do so too, let me know in the comments.

Kommentare: keine

ShortURL Auto-Discovery Twitter Bookmarklet

07.04.2009, 17:44
Tweet-this-Bookmarklet

Tweet-this-Bookmarklet

Recently I've created a boomarklet to post links quickly to twitter using URL-shortening. The main feature was that you don't have to login on 3rd party web sites because it takes you to twitter. But now there's some more improvement: The new bookmarklet looks for a tiny url on the website itself in a <link rel="short_url"-Tag> (thanks to Snaplog).

To install just drag this link in your bookmark toolbar and you're done:

tweet this

Since there are not too many pages that implement the short_url tag, it falls back to is.gd shortening if it couldn't find one. To test it navigate to a page that offers a short_url for example: http://robert.snaplog.com/:E39/brooklyn_not_ark

Edit 2009-10-22: New Version

The new major version Twitter Bookmarklet III is available.

New in Version 0.9.3.5:

Since the short_url could lead to confusion with URL/URI and has the underscore I've updated the bookmarklet again to support rel="shortlink" too, which seems like a better term. There was of course some discussion.

New in Version 0.9.2:

The bookmarklet has been updated again to allow the short_url keyword to be one of a space separated list. This means it works now on arstechnica.com.

New in Version 0.9.1:

I had to update the bookmaklet to support relative URLs as used by http://www.geograph.org.uk/photo/19. In Javascript element.href returns the full, absolute url like http://e.com/absolute etc. while l.attributes[x].nodeValue may return something like /relative.

Kommentare: 2 Einträge

No login tweet-this Twitter Bookmarklet

31.03.2009, 16:43
Tweet-this-Bookmarklet

Tweet-this-Bookmarklet

Tipp: There's a newer version of the bookmarklet available.

Today I added a "follow me at twitter" button to my blog. And then I considered to include a "tweet this" button somewhere on all pages. But I realized that I would maybe have to add delicious, digg etc. too. But nobody really uses these buttons because they have delicious toolbar, bookmarklet or something similar that works on all web sites. I came to the result that I need a twitter bookmarklet. But although there are some on the net, I couldn't fine one, where you don't have to give away your twitter account data. So I created one:

tweet this

Just drag the link to your toolbar and klick the button whenever you wan to tweet a page. It will open twitter.com on your /home-page with a is.gd-shortened link to the page and the title of the page pre-filled in the textarea. If you are not logged in, Twitter will ask you for your account data, so you're never giving away your password to 3rd party apps.

Let me know if something doesn't work in the comments.

You could of course include this link in any web page as quick and dirty tweet this button, to spare you trouble with server-side URL shortening. But keep in mind it won't work without javascript.

Deutsch:

Heute habe ich einen „follow me at twitter“-Button auf meinen Blog gesetzt. Dann habe ich mir überlegt einen „tweet this“-Button irgendwo in alle Seiten einzubringen. Aber ich stellte fest, dass ich vielleicht delicious, digg etc. auch hinzufügen müsste. Aber niemand benutzt diese Icons, da jeder die Delicious-Toolbar, ein Bookmarklet oder ähnliches hat, das auf allen Webseiten funktioniert. Ich kam zu dem Schluss, dass ich ein Twitter-Bookmarklet brauche. Obwohl es einige im Internet gibt, konnte ich keines finden, wo man seine Twitter-account-Daten nicht hergeben muss. Also habe ich eines erstellt:

tweet this

Einfach den Link in die Toolbar ziehen und dann den Butten klicken, wenn Sie eine Webseite twittern wollen. Er wird twitter.com auf ihrer „home“-Seite öffnen mit einem is.gd-gekürztem Link zu der Seite und dem Titel der Seite vor ausgefüllt in der Textarea. Wenn Sie nicht eingeloggt sind, wird Sie Twitter nach ihrem Passwort fragen, also müssen Sie niemals Ihr Passwort an Anwendungen von Dritten weitergeben.

Lassen Sie mich via Kommentarfunktion wissen, falls etwas nicht funktioniert.

Man könnte natürlich diesen Link auch in jede Webseite einfügen als „quick and dirty“ tweet this-Button, um sich den Aufwand von Server seitigem URL-Kürzen zu sparen. Aber der Button kann natürlich nicht ohne Javascript funktionieren.

Kommentare: 4 Einträge
[ Seite 1 2 ] Nächste Seite »
 
Χρόνογραφ
© 2008-2017 by Bernhard Häussner - Impressum - Login
Kurz-Link zur Homepage: http://1.co.de/