Ich hab heute mal versucht, mich etwas in die Programmierung von Userscripts in JavaScript für Greasemonkey einzuarbeiten, mit einem Teilerfolg. Mein Ziel war es, unter dem Container
Damit schaffe ich es schonmal, einen Text wie das
Das funktioniert auch, jedoch kommt es dann zu einem Darstellungsfehler:
Hat vielleicht jemand ne Idee, wie man das lösen könnte?
userMenu
, welcher sich im headerContainer
befindet, eine witere Reihe an Quicklinks hinzuzufügen. Ich hab dann etwas rumprobiert und mir den Aufbau angesehen, dabei ist folgendes rausgekommen: JavaScript-Quellcode
- function createQuickLinks()
- {
- //Das obere Panel finden
- var userPanel = document.getElementById('userPanel').getElementsByTagName('div')[0];
- //Text hinzufügen
- var pTitle = document.createElement('p');
- pTitle.setAttribute('id', 'userQuickLinkNote');
- pTitle.innerHTML = 'Quick Links: ';
- userPanel.appendChild(pTitle);
- //Menü erstellen
- var divMenu = document.createElement('div'); //Container für das Menü
- divMenu.setAttribute('id', 'userQuickLinkMenu');
- var ulMenu = document.createElement('ul'); //Die Auflistund für das Menü
- //Alles hinzufügen
- divMenu.appendChild(ulMenu);
- userPanel.appendChild(divMenu);
- }
Damit schaffe ich es schonmal, einen Text wie das
Angemeldet als...
zu erstellen und dann die Auflistung für die Elemente im userPanel
-Container zu erstellen. Für das Hinzufügen des Elements habe ich mir eine vorübergehend Funktion aus einem Userscript aus dem Forum hier geklaut (das, welches in der Titelleiste den unbeantwortet-Button anzeigt) und es so geändert, dass die Textanzeige funzt und auch anderen Menüs etwas hinzufügen kann. Dabei ist übrigens das rausgekommen:JavaScript-Quellcode
- function addItemToUserbar(ulMenu, text, targetUrl, imageUrl)
- {
- //var ul = document.getElementById('userMenu').getElementsByTagName('ul')[0];
- var ul = ulMenu
- var newLi = document.createElement('li');
- newLi.setAttribute('id', 'userMenuMentions');
- var link = document.createElement('a');
- link.setAttribute('href', targetUrl);
- var newImg = document.createElement('img');
- var newSpan = document.createElement('span');
- newSpan.innerHTML = text; //gefixt, von innerText zu innerHTML
- newImg.src = imageUrl;
- newImg.setAttribute('style', 'margin-right:4px;');
- link.appendChild(newImg);
- link.appendChild(newSpan);
- newLi.appendChild(link);
- ul.appendChild(newLi);
- }
Das funktioniert auch, jedoch kommt es dann zu einem Darstellungsfehler:
Hat vielleicht jemand ne Idee, wie man das lösen könnte?