Basic method to Add html content to the page with Greasemonkey?

Question

Is there a Greasemonkey method to append basic HTML content to the end of a page right after the <body> tag, or right before it ends?

I found before/after methods but I need to know names of elements which may change page to page..

use `document.body.insertBefore(newElement,document.body.firstChild)` to put something at the start — Dr.Molle, Jan 10 '13 at 02:12

Brock Adams · Accepted Answer · 2016-10-19T02:26:51.740

30

The quick and dirty way: Please only use innerHTML for brand-new content.

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

document.body.appendChild (newHTML);

A complete script showing the somewhat better jQuery way (and with new, 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>
` );

Both methods will place the new content like this:

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

Which is a good place for it.

Even though the HTML is at the end of the page, you can use CSS to display it anywhere with something like:

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

edited Oct 19 '16 at 02:26

answered Jan 10 '13 at 02:09

Brock Adams

90,639
22
233
295

oh wait, that works by appending a new element to the end of the body. Looks nice despite the slightly misleading naming. `=]` – Fabrício Matté Jan 10 '13 at 02:11
@FabrícioMatté: Yes, the question title and text was a little contradictory. Edited to clear up. Appending new content to the `` is the best default location. – Brock Adams Jan 10 '13 at 02:20
Yes, when I first skim-read this answer I didn't realize `newHTML` was actually an element that serves as container for the new html instead of a plain html string, I noticed that right after though. Your answer is quite clear +1 `:P` – Fabrício Matté Jan 10 '13 at 02:24
You should use Content Script Injection https://wiki.greasespot.net/Content_Script_Injection which is cleaner and will also prevent errors when using regular expressions if you forgot to double escape a slash character https://stackoverflow.com/questions/40191536/syntaxerror-expected-expression-got – baptx Oct 22 '16 at 12:59
@baptx, that is for javascript and will not work at all in this case. This question is about HTML. – Brock Adams Oct 22 '16 at 16:04

score 6 · Answer 2 · edited May 23 '17 at 12:09

If you don't want to have to muck around with having to escape your multi line html - you can put your HTML in local files, and load it using GM_getResourceText. Make sure you have enabled your Greasemonkey/Tampermonkey to use local files.

eg:

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

})();

This solution is fine if the tamperscript is for yourself only. You can similarly save the resource online. For example:

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

//...

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

also works

Basic method to Add html content to the page with Greasemonkey?

2 Answers2

Linked

Related