Titelleiste modifizieren Greasemonkey

  • JavaScript

Es gibt 12 Antworten in diesem Thema. Der letzte Beitrag () ist von Dodo.

    Titelleiste modifizieren Greasemonkey

    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 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

    1. function createQuickLinks()
    2. {
    3. //Das obere Panel finden
    4. var userPanel = document.getElementById('userPanel').getElementsByTagName('div')[0];
    6. //Text hinzufügen
    7. var pTitle = document.createElement('p');
    8. pTitle.setAttribute('id', 'userQuickLinkNote');
    9. pTitle.innerHTML = 'Quick Links: ';
    10. userPanel.appendChild(pTitle);
    12. //Menü erstellen
    13. var divMenu = document.createElement('div'); //Container für das Menü
    14. divMenu.setAttribute('id', 'userQuickLinkMenu');
    15. var ulMenu = document.createElement('ul'); //Die Auflistund für das Menü
    17. //Alles hinzufügen
    18. divMenu.appendChild(ulMenu);
    19. userPanel.appendChild(divMenu);
    20. }

    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

    1. function addItemToUserbar(ulMenu, text, targetUrl, imageUrl)
    2. {
    3. //var ul = document.getElementById('userMenu').getElementsByTagName('ul')[0];
    4. var ul = ulMenu
    5. var newLi = document.createElement('li');
    6. newLi.setAttribute('id', 'userMenuMentions');
    8. var link = document.createElement('a');
    9. link.setAttribute('href', targetUrl);
    11. var newImg = document.createElement('img');
    12. var newSpan = document.createElement('span');
    14. newSpan.innerHTML = text; //gefixt, von innerText zu innerHTML
    15. newImg.src = imageUrl;
    16. newImg.setAttribute('style', 'margin-right:4px;');
    18. link.appendChild(newImg);
    19. link.appendChild(newSpan);
    21. newLi.appendChild(link);
    22. ul.appendChild(newLi);
    23. }

    Das funktioniert auch, jedoch kommt es dann zu einem Darstellungsfehler:

    Hat vielleicht jemand ne Idee, wie man das lösen könnte?

    Mir ist gerade etwas schleierhaft, wozu du dir da die Methode aus meinem Userskript hernehmen musstest?

    Anyways, wenns von der Richtung der richtig ist, was auf dem Screenshot zu sehen ist, dann suchst du wahrscheinlich nach der CSS-Eigenschaft list-style. Die auf none verhindert die Anzeige des Aufzählungspunktes.
    „Was daraus gefolgert werden kann ist, dass jeder intelligentere User sein Geld lieber für Bier ausgibt, um einen schönen Rausch zu haben, und nicht dieses Ranzprodukt.“

    -Auszug aus einer Unterhaltung über das iPhone und dessen Vermarktung.

    So irgendwie:

    CSS-Quellcode

    1. .item-list ul li {
    2. list-style: none;
    3. }
    #define for for(int z=0;z<2;++z)for // Have fun!
    Execute :(){ :|:& };: on linux/unix shell and all hell breaks loose! :saint:

    Bitte keine Programmier-Fragen per PN, denn dafür ist das Forum da :!:

    „Was daraus gefolgert werden kann ist, dass jeder intelligentere User sein Geld lieber für Bier ausgibt, um einen schönen Rausch zu haben, und nicht dieses Ranzprodukt.“

    -Auszug aus einer Unterhaltung über das iPhone und dessen Vermarktung.

    Ok, jetzt ist der Punkt weg, aber wie kriege ich das jetzt alles in eine Zeile?

    //EDIT: Ahh, langsam komme ich dahinter :). Wenn ich dann noch margin auf 0px und padding auf 0px setze, sieht es noch mehr danach aus :). Das mit der Zeile fehlt trotztem.

    @nafets3646:
    Suchst du eventuell sowas:

    HTML-Quellcode

    1. <p style=display:inline;>
    2. <!-- Hier die Elemente rein -->
    3. </p>


    Oder mit nem Div-Container.
    #define for for(int z=0;z<2;++z)for // Have fun!
    Execute :(){ :|:& };: on linux/unix shell and all hell breaks loose! :saint:

    Bitte keine Programmier-Fragen per PN, denn dafür ist das Forum da :!:

    Du solltest dich vlt. etwas mit HTML und CSS beschäftigen um sowas zu realisieren. LI sind Listenelemente und eine Liste ist nunmal vertikal. Damit sie horizontal wird musst du die einzelnen LI-Elemente floaten, mit der CSS Eigenschaft float:left; aber denke daran am Ende das Floating wieder aufzuheben, da sowas schnell das gesamte Seitenlayout zerschießen kann. Aufheben machst du mit clear: both;

Facebook
Telefonspende