2013-01-10 6 views
8

Esiste un metodo Greasemonkey per aggiungere il contenuto HTML di base alla fine di una pagina subito dopo il tag <body> o appena prima che termini?Metodo di base per aggiungere contenuto html alla pagina con Greasemonkey?

ho trovato prima/dopo metodi, ma ho bisogno di sapere i nomi di elementi che possono cambiare una pagina all'altra ..

+1

uso 'document.body.insertBefore (newElement, document.body.firstChild)' per mettere qualcosa alla partenza –

risposta

18

Il modo più rapido e sporco: Si prega di utilizzare solo innerHTML per marchio- nuovi contenuti.

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

document.body.appendChild (newHTML); 


Uno script completo che mostra il po 'meglio modo jQuery (e con il nuovo, ECMAScript 6, stringa multilinea):

// ==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> 
`); 


Entrambi i metodi inseriranno il nuovo contenuto In questo modo:

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

Quale è un buon posto per questo.

Anche se l'HTML è alla fine della pagina, è possibile utilizzare i CSS per visualizzazione ovunque con qualcosa di simile:

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

Oh aspetta, che agisce aggiungendo un nuovo elemento alla fine del corpo. Sembra carino nonostante la denominazione leggermente fuorviante. '=]' –

+0

@ FabrícioMatté: Sì, il titolo della domanda e il testo erano un po 'contraddittori. Modificato per chiarire. L'aggiunta di nuovi contenuti allo '' è la migliore posizione predefinita. –

+0

Sì, quando prima di leggere questa risposta non mi sono reso conto che 'newHTML' era in realtà un elemento che funge da contenitore per il nuovo html invece di una semplice stringa html, l'ho notato subito dopo. La tua risposta è abbastanza chiara +1 ': P' –

1

Se non si desidera avere a impazzire con la necessità di sfuggire al codice HTML multi linea: è possibile inserire il codice HTML nei file locali e caricarlo utilizzando GM_getResourceText. Assicurarsi di avere enabled your Greasemonkey/Tampermonkey to use local files.

esempio:

// ==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")); 

})(); 

Questa soluzione va bene se la tamperscript è per te solo. Allo stesso modo puoi salvare la risorsa online. Per esempio:

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

//... 

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

funziona anche

enter image description here

+0

@BrockAdams Grazie per averlo indicato. Modificherà questo ora. – dwjohnston

+0

Sembra buono. –

Problemi correlati