2013-01-10 37 views
8

क्या <body> टैग के ठीक बाद या पृष्ठ समाप्त होने से ठीक पहले पृष्ठ के अंत में मूल HTML सामग्री को जोड़ने के लिए एक Greasemonkey विधि है?Greasemonkey के साथ पृष्ठ पर एचटीएमएल सामग्री जोड़ने के लिए मूल विधि?

मैंने पहले पाया/तरीकों के बाद, लेकिन मैं तत्व है जो पृष्ठ दर पृष्ठ बदल सकते हैं के नाम जानने की जरूरत ..

+1

उपयोग' शुरू –

उत्तर

18

त्वरित और गंदी तरह से: कृपया केवल ब्रांड नई सामग्री के लिए innerHTML का उपयोग करें।

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

document.body.appendChild (newHTML); 


एक पूरी स्क्रिप्ट कुछ बेहतर jQuery रास्ता दिखाते हुए (और नए के साथ, ECMAScript 6, बहु स्ट्रिंग):

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


दोनों विधियां नई सामग्री रखेगी इस तरह:

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

जो इसके लिए एक अच्छी जगह है।

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

ओह प्रतीक्षा करें, कि से काम करता है पर कुछ डाल करने के लिए शरीर के अंत में एक नया तत्व जोड़ना। थोड़ा भ्रामक नामकरण के बावजूद अच्छा लग रहा है। '=]' –

+0

@ FabrícioMatté: हाँ, सवाल शीर्षक और पाठ एक छोटे से विरोधाभासी था। साफ़ करने के लिए संपादित किया गया। ' 'पर नई सामग्री को जोड़ना सबसे अच्छा डिफ़ॉल्ट स्थान है। –

+0

हाँ, जब मैं पहली बार इस जवाब मुझे नहीं पता था स्किम पढ़ने के लिए 'newHTML' वास्तव में एक तत्व है कि एक सादे HTML स्ट्रिंग के बजाय नई एचटीएमएल के लिए कंटेनर के रूप में कार्य करता है था, मुझे लगता है कि सही है, हालांकि बाद देखा। आपका जवाब काफी स्पष्ट +1 'है: P' –

1

के आसपास गंदगी करने के लिए आप नहीं चाहते हैं:

हालांकि एचटीएमएल अंत पेज के पर है, तो आप सीएसएस प्रदर्शन करने के लिए इसे की तरह कुछ के साथ कहीं भी उपयोग कर सकते हैं अपने बहु लाइन एचटीएमएल से बचने के साथ - आप अपने एचटीएमएल को स्थानीय फाइलों में डाल सकते हैं, और इसे GM_getResourceText का उपयोग करके लोड कर सकते हैं। आप enabled your Greasemonkey/Tampermonkey to use local files.

जैसे सुनिश्चित करें: यदि tamperscript खुद के लिए ही है

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

})(); 

यह समाधान ठीक है। आप संसाधन को ऑनलाइन सहेज सकते हैं। उदाहरण के लिए:

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

//... 

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

भी `document.body.insertBefore (newElement, document.body.firstChild) काम करता है

enter image description here

+0

@ ब्रॉकएडम्स आपके लिए यह इंगित करने के लिए धन्यवाद। अब इसे संशोधित करेंगे। – dwjohnston

+0

अच्छा लगता है। –