I would like to show a concept to my friends, using someones else webpage. How can I add my own layer over someones webpage? Greasemonkey would work?
You can do so with greasemonkey. You would have to create one more more div
s with the correct z-index
, and either position:fixed
or position:absolute
.
Yes, Greasemonkey can do this by adding (or deleting, or changing) page DOM elements.
Here is a starter script that "adds a layer" to Stack Overflow pages:
// ==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 () );
It uses:
to accomplish this.
Probably the easiest way is to File -> Save As
their work and edit the resulting files. You could create a GreaseMonkey script to do so dynamically, but it sounds like a lot of work for a quick hi-5.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.