web-dev-qa-db-ja.com

GreasemonkeyでページにHTMLコンテンツを追加する基本的な方法？

<body>タグの直後、または終了直前にページの最後に基本的なHTMLコンテンツを追加するGreasemonkeyメソッドはありますか？

Before/afterメソッドを見つけましたが、ページごとに変わる要素の名前を知る必要があります。

javascripthtmlgreasemonkeytampermonkey
15
bushdiver

手っ取り早い方法：innerHTMLは、ブランド-newのコンテンツにのみ使用してください。

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がページのendにある場合でも、CSSを使用してdisplay次のようなものでどこでも：

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

複数行のhtmlをエスケープする必要がないようにする必要がない場合は、ローカルファイルにHTMLを配置し、GM_getResourceTextを使用してHTMLを読み込むことができます。ローカルファイルを使用するために、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"));

})();

改ざんスクリプトが自分専用である場合、このソリューションは問題ありません。同様にリソースをオンラインで保存できます。例えば：

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

//...

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

も動作します

enter image description here

3
dwjohnston