如何在某個網頁上添加我自己的圖層？

Question

我想向我的朋友展示一個概念，使用其他人的網頁。我怎樣才能將我自己的圖層添加到某個網頁上？ Greasemonkey會工作嗎？

Answer 1

你可以用greasemonkey做到這一點。您將不得不使用正確的z-index和position:fixed或position:absolute再創建一個div。

Answer 2

可能最簡單的方法是File -> Save As他們的工作和編輯結果文件。您可以創建一個GreaseMonkey腳本來動態執行此操作，但對於快速的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

要完成此操作。