Tim Tepaße: HTML-Eintrag von <title> mittels GreaseMonkey verändern

Beitrag lesen

Hallo,

Daher bin ich auf der Suche nach einer Möglichkeit den Inhalt des <title>-Tags per CSS in userContent.css (oder auch anderem) am Anfang zu kürzen.

„Im Prinzip“ gibt es mit CSS 3 und der Eigenschaft content die Möglichkeit, Inhalt von Elementen auszutauschen. Allerdings kann Firefox nur wie in CSS 2.1 content für die :before- und :after-Pseudo-Elemente. Und dazu kommt ist, dass der Titel eines Webseite im Browserchrome nicht wirklich CSS unterliegt.

Also was anderes: GreaseMonkey. Mit diesem kannst Du User-JS-Skripte beim Laden einer Seite laufen lassen. Und mit JS kannst Du alles verändern, zum Beispiel auch den Titel einer Seite.

Zum Beispiel haben Postings hier im Forum das Format "SELFHTML Forum: (CSS) HTML-Eintrag von <title> per CSS verändern?". Das "SELFHTML Forum: " steht zum einen an falscher Stelle und ist zum anderen überflüssig. Ein Userskript, das dieses wegkürzt, sähe dann so aus:

~~~javascript // ==UserScript==
  // @name           Forums-Titel
  // @description    Kürzt das "SELFHTML Forum" aus dem Titel
  // @namespace      http://localhost/
  // @include        http://forum.de.selfhtml.org/my/*
  // @exclude        http://forum.de.selfhtml.org/my/
  // ==/UserScript==

document.title = document.title.substring(16);

  
Die ganzen Sachen in Kommentaren sind Metadaten, wichtig sind die @include- und @exclude-Direktiven. @include sagt die URLs an, an denen das Skript gelten soll, @exclude die, an denen es nicht gelten soll. Ich hab hier die Forumshauptseite extra ausgeschlossen, weil die sonst von dem Wildcard-Zeichen "\*" mit erfasst würde. Der eigentliche Skript-Teil ist extrem billig; darin wird dem Titel einfach nur der Titel-String abzüglich der ersten 16 Zeichen zugewiesen und damit das unerwünschte rausgefiltert.  
  
Da man sämtliche Möglichkeiten von Javascript zur Verfügung hat, kann man auch sehr viel komplexere Dinge machen. Hier z.B. ein Userskript, das sich eine noch nicht bekannte Information – den Namen des Autors des Postings – aus dem DOM fischt und verwendet:  
  
  ~~~javascript
// ==UserScript==  
  // @name           Forums-Titel, Pimped  
  // @description    Ein noch besserer Postings-Titel  
  // @namespace      http://localhost/  
  // @include        http://forum.de.selfhtml.org/my/*  
  // @exclude        http://forum.de.selfhtml.org/my/  
  // ==/UserScript==  
  
  var author = document.getElementById("posting-author").firstChild.data,  
      title  = document.getElementById("posting-title").firstChild.data;  
  
  document.title = author + ": " + title;

Damit wird der Titel Deines Postings als "Ingo: HTML-Eintrag von <title> per CSS verändern?" dargestellt. Komplexeres Dinge wie Bearbeitungs mittels Regulärer Ausdrücke sind natürlich auch möglich.

Ein schon recht älteres, aber im Prinzip noch nettes Tutorial für Greasemonkey ist Mark Pilgrims Dive into Greasemonkey; aktuellere Dokumentation gibt es im Greasespot-Weblog bzw. in dessen Dokumentations-Wiki.

Tim