Question

使用 Greasemonkey 向页面添加 html 内容的基本方法？

2013-01-10

44393

javascript html greasemonkey tampermonkey

Greasemonkey 是否有一个方法可以将基本 HTML 内容附加到页面末尾，紧接着 <body> 标签之后，或者紧接着页面结束之前？

我找到了 before/after 方法，但我需要知道可能在各个页面之间发生变化的元素的名称。

Answer 1

快速而肮脏的方法：请仅将 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>

这是放置它的好地方。

即使 HTML 位于页面的末尾，您也可以使用 CSS 将其显示在任何地方，例如：

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

Answer 2

如果您不想费力转义多行 html，您可以将 HTML 放在本地文件中，然后使用 GM_getResourceText 加载它。确保您已启用 Greasemonkey/Tampermonkey 以使用本地文件。

例如：

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

})();

如果 tamperscript 仅供您自己使用，则此解决方案很好。您也可以在线保存资源。例如：

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

//...

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

同样有效