2013-01-10 26 views
8

Czy istnieje metoda Greasemonkey dołączająca podstawową zawartość HTML na końcu strony tuż po tagu <body> lub tuż przed nim?Podstawowa metoda dodawania treści html do strony za pomocą Greasemonkey?

znalazłem przed/po metod, ale muszę wiedzieć, nazwy elementów, które mogą zmienić stronę do strony ..

+1

użycie 'document.body.insertBefore (newElement, document.body.firstChild)' aby umieścić coś na początku –

Odpowiedz

18

Szybki i brudny sposób: Należy używać tylko innerHTML dla brand- nowego treści.

var newHTML   = document.createElement ('div'); 
newHTML.innerHTML = '    \ 
    <div id="gmSomeID">    \ 
     <p>Some paragraph</p>  \ 
     etc.      \ 
    </div>       \ 
'; 

document.body.appendChild (newHTML); 


Kompletny skrypt pokazując nieco lepsze jQuery sposób (iz nowym, ECMAScript 6, multiline string):

// ==UserScript== 
// @name  YOUR_SCRIPT_NAME 
// @include http://YOUR_SERVER.COM/YOUR_PATH/* 
// @require http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js 
// @grant GM_addStyle 
// ==/UserScript== 
//--- The @grant directive is used to restore the proper sandbox. 

$("body").append (` 
    <div id="gmSomeID"> 
     <p>Some paragraph</p> 
     etc. 
    </div> 
`); 


Zarówno metody umieści nową treść w następujący sposób:

<!-- NEW STUFF INSERTED HERE --> 
</body> 

Co jest dobrym miejscem na to.

Choć HTML jest na końcu strony można użyć CSS do wyświetlaczu to nigdzie czegoś podobnego:

GM_addStyle ("       \ 
    #gmSomeID {       \ 
     position:  fixed;   \ 
     top:   0px;   \ 
     left:   0px;   \ 
    }         \ 
"); 
+0

Oh wait, który działa przez dołączanie nowego elementu do końca ciała. Wygląda ładnie pomimo nieco mylącej nazwy. '=]' –

+0

@ FabrícioMatté: Tak, tytuł pytania i tekst były trochę sprzeczne. Edytowane, aby wyjaśnić. Dołączanie nowej treści do '' jest najlepszą domyślną lokalizacją. –

+0

Tak, kiedy po raz pierwszy przeczytałem tę odpowiedź, nie zdawałem sobie sprawy, że 'newHTML' jest tak naprawdę elementem, który służy jako kontener dla nowego html zamiast zwykłego łańcucha html, zauważyłem to zaraz potem. Twoja odpowiedź jest całkiem jasna +1 ': P' –

1

Jeśli nie chcemy mieć do syf wokół z koniecznością ucieczki z twojego wielo-liniowego html - możesz umieścić swój HTML w lokalnych plikach i załadować go za pomocą GM_getResourceText. Upewnij się, że masz enabled your Greasemonkey/Tampermonkey to use local files.

np

// ==UserScript== 
// @name   Tamper Test 
// @namespace http://tampermonkey.net/ 
// @version  0.1 
// @description try to take over the world! 
// @author  You 
// @match  file:///C:/david/sandbox/tampermonkey/tamper.html 
// @require http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js 
// @resource html  file:///C:/david/sandbox/tampermonkey/foo.html 
// @resource style  file:///C:/david/sandbox/tampermonkey/style.css 
// @grant  GM_addStyle 
// @grant GM_getResourceText 
// ==/UserScript== 


(function() { 
    'use strict'; 

    $("body").append('<div id = "dwj-tamper">new content from tamper script</div>'); 

    GM_addStyle(GM_getResourceText("style"));  
    $("body").append(GM_getResourceText("html")); 

})(); 

Rozwiązanie to jest w porządku, jeśli tamperscript tylko dla siebie. Możesz również zapisać zasób online. Na przykład:

// @resource pastebin http://pastebin.com/raw/9WfbN24i 

//... 

$("body").append(GM_getResourceText("pastebin")); 

działa również

enter image description here

+0

@BrockAdams Dzięki za wskazanie tego. Zmodyfikuje to teraz. – dwjohnston

+0

Wygląda dobrze. –