誰かのウェブページに自分のレイヤーを追加するにはどうしたらいいですか？

Question

someones else webpageを使用して、私の友人にコンセプトを示したいと思います。誰かのウェブページに自分のレイヤーを追加するにはどうすればいいですか？ Greasemonkeyはうまくいくだろうか？

Answer 1

greasemonkeyで行うことができます。 z-indexとposition:fixedまたはposition:absoluteのいずれかをもう1つdivに作成する必要があります。

Answer 2

おそらく最も簡単な方法は、File -> Save Asの作業と結果のファイルの編集です。動的に行うためにGreaseMonkeyスクリプトを作成することもできますが、quick hi-5の作業のように思えます。

Answer 3

はい、GreasemonkeyはページDOM要素を追加（または削除または変更）することでこれを行うことができます。

// ==UserScript== 
// @name  _Add a "layer" to a webpage 
// @namespace Stack Overflow 
// @include  http://stackoverflow.com/* 
// @require  http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js 
// ==/UserScript== 

$("body").prepend (
     '<div id="gmLayerWrapper">' 
    + '<p>All your overflow are belong to us.<br>' 
    + '<img src="http://2.bp.blogspot.com/-hEJb82Ni7V8/TrnNc8Ljj3I/AAAAAAAABG4/Ow2GnJyDo74/s400/UnicornRainbow.jpg"' 
    + ' alt="They\'re everywhere!">' 
    + '</p>' 
    + '<div id="gmTransparentFilm"></div>' 
    + '</div>' 
); 
$("#gmLayerWrapper").width ($(window).width ()) 
        .height ($(window).height()) 
        ; 
//--- Fudge our text width for aesthetics. 
$("#gmLayerWrapper p").width ($(window).width()/2) 

GM_addStyle ((<><![CDATA[ 
    #gmLayerWrapper { 
     margin:     0; 
     padding:    0; 
     position:    fixed; 
     top:     0; 
     left:     0; 
     min-width:    200px; 
    } 
    #gmTransparentFilm { 
     margin:     0; 
     padding:    0; 
     background:    red; 
     opacity:    0.7; 
     height:     100%; 
     width:     100%; 
     position:    absolute; 
     top:     0; 
     left:     0; 
     z-index:    666; 
    } 
    #gmLayerWrapper p { 
     padding:    0.5em 1.5em; 
     margin:     1em auto; 
     background:    white; 
     border-radius:   2em; 
     font-size:    30px; 
     line-height:   2.5; 
     text-align:    center; 
     vertical-align:   middle; 
     min-width:    4em; 
     position:    relative; /*Required for z-index*/ 
     z-index:    888; 
    } 
]]></>).toString()); 

それは使用しています：

• CSS
• jQuery
• とGreasemonkey
ここ
はオーバーフローのページをスタックに "レイヤーを追加します" というスタータースクリプトです

これを行うには