Converting JavaScript into a Greasemonkey script
I'm very new to programming and I've read through a lot of the examples in the "Diving into Greasemonkey" book (by Mark Pilgrim), but I can't get this to work.
I basically need the following code turned into a Greasemonkey script that can run on a given website. I saw this code posted elsewhere, what it does is create a toggle-able URL bar on any page.
So basically you can use this JavaScript URL bar instead of your browser's URL bar. You typically run it by doing http://www.site-with-script.com/?url=www.google.com (in which case it would put the toggable URL bar at the top of Google's page).
I tried some of the innerHTML and CSS stuff in Greasemonkey, but I couldn't get it to work. The JavaScript code works 100%. I'm just not sure how to get it to work as a Greasemonkey script. I'd like the Greasemonkey script to put the same URL bar on every page when the script is loaded:
<head>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
min-height: 100%;
background: #BBB;
color: #222;
text-shadow: 0 1px 0 rgba(255,255,255,0.5);
-moz-text-shadow: 0 1px 0 rgba(255,255,255,0.5);
-webkit-text-shadow: 0 1px 0 rgba(255,255,255,0.5);
overflow: hidden;
}
#div_frameHolder {
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: #FFF;
border: none;
z-index: 100;
}
iframe.iframe_tab {
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: #FFF;
border: none;
z-index: 100;
}
.toolbar {
display: none;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 22px;
background: rgba(0,0,0,0.8);
border: none;
border-bottom: 1px solid rgb(0,0,0);
box-shadow: 0 -3px 10px #000;
-moz-box-shadow: 0 -3px 10px #000;
-webkit-box-shadow: 0 -3px 10px #000;
overflow: hidden;
z-index: 600;
}
.toolbar .bottom {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
background: #777;
border: none;
overflow: hidden;
font-size: 1px;
}
#btn_showToolbar, #btn_hideToolbar {
position: absolute;
left: 0;
top: 0;
display: block;
width: 22px;
height: 22px;
background: url('img/show-toolbar.png') center no-repeat;
border: none;
cursor: pointer;
z-index: 500;
}
body #btn_hideToolbar {
position:relative;
float: left;
clear: none;
}
#text_locationBar {
position: relative;
display: block;
width: 400px;
height: 18px;
float: left;
clear: none;
padding: 0;
margin: 1px 2px 0;
background: rgba(150,150,150,0.8);
border: 1px solid rgba(255,255,255,0.5);
color: #FFF;
text-shadow: 0 -1px 0 rgba(0,0,0,0.5);
-moz-text-shadow: 0 -1px 0 rgba(0,0,0,0.5);
-webkit-text-shadow: 0 -1px 0 rgba(0,0,0,0.5);
text-indent: 1px;
}
#btn_locationGo {
position: relative;
display: block;
width: 22px;
height: 22px;
float: left;
clear: none;
padding: 0;
margin: 0 2px;
background: url('img/go.png') center no-repeat;
border: none;
cursor: pointer;
opacity: 0.7;
filter: alpha(opacity=70);
}
#btn_locationGo:hover {
opacity: 1;
filter: alpha(opacity=100);
}
</style>
<script type="text/javascript">
window.urlbar = (function() {
var self = {},
initialized = false,
showing = false,
tabs = [],
tabMaxId = 0,
homeUrl = null,
toolbar,
showBtn,
hideBtn,
locationBar,
locationGo,
frameHolder;
function el(id) {
return document.getElementById(id);
}
function vis(el, visible) {
el.style.display = visible===false ? "none" : "block";
}
function addEvent(obj, type, fn) {
if ( obj.attachEvent ) {
obj['e'+type+fn] = fn;
obj[type+fn] = function(){obj['e'+type+fn]( window.event );}
obj.attachEvent( 'on'+type, obj[type+fn] );
} else
obj.addEventListener( type, fn, false );
}
function removeEvent( obj, type, fn ) {
if ( obj.detachEvent ) {
obj.detachEvent( 'on'+type, obj[type+fn] );
obj[type+fn] = null;
} else
obj.removeEventListener( type, fn, false );
}
function stopEvent(e) {
e = e || window.event;
if (e.preventDefault) {
e.preventDefault();
}
if (e.cancelBubble) {
e.cancelBubble();
}
e.returnValue = false;
return false;
}
function init() {
if (initialized===true) {
return false;
}
initialized = true;
toolbar = el("urlbar_toolbar");
showBtn = el("btn_showToolbar");
hideBtn = el("btn_hideToolbar");
locationBar = el("text_locationBar");
locationGo = el("btn_locationGo");
frameHolder = el("div_frameHolder");
addEvent(showBtn, "mousedown", stopEvent);
addEvent(showBtn, "click", function() {
self.showToolbar();
return stopEvent.apply(this,arguments);
});
addEvent(hideBtn, "mousedown", stopEvent);
addEvent(hideBtn, "click", function() {
self.hideToolbar();
return stopEvent.apply(this,arguments);
});
addEvent(locationGo, "mousedown", stopEvent);
addEvent(locationGo, "click", function() {
var didNavigate = self.navigate(locationBar.value);
if (didNavigate) {
self.hideToolbar();
}
return stopEvent.apply(this,arguments);
});
addEvent(locationBar, "keydown", function(e) {
e = e || window.event;
var key = e.keyCode || e.which;
var rval = true;
switch (key) {
case 13: // enter
var didNavigate = self.navigate(locationBar.value);
if (didNavigate) {
self.hideToolbar();
}
rval = false;
break;
}
if (rval===false) {
return stopEvent.apply(this,arguments);
}
});
var getHomeUrl = window.location.href.match(/[\?&](url|location)\=(.+)$/);
homeUrl = (getHomeUrl && getHomeUrl[2]) || null;
if (homeUrl) {
self.navigate(homeUrl);
}
else {
self.showToolbar();
}
tabs.push({
navigate : function(url) {
this.iframe.src = url;
},
iframe : el("iframe_tab_0")
});
}
function doResize() {
var w = window.innerWidth || (document.documentElement||document.body).offsetWidth;
if (showing===true) {
locationBar.style.width = (w - locationGo.offsetWidth - hideBtn.offsetWidth - 20) + "px";
}
}
function openTab(options) {
options = options || {};
var iframe = document.createElement("iframe");
iframe.setAttribute("frameborder", "0");
iframe.className = "iframe_tab";
if (options.url || options.location) {
iframe.setAttribute("src", options.url || options.location);
}
if (options.focus===true || options.focussed===true) {
iframe.style.zIndex = "200";
}
var tab = {
id : tabMaxId++,
iframe : iframe,
navigate : function(url) {
if (url) {
this.iframe.src = url;
}
},
stop : function() {
this.iframe.contentWindow.stop();
},
back : function() {
this.iframe.contentWindow.back();
},
forward : function() {
this.iframe.contentWindow.forward();
}
};
tabs.push(tab);
frameHolder.appendChild(iframe);
return tab;
}
self.navigate = function (url, options) {
options = options || {};
url = url || options.url || options.location;
if (!url) {
return false;
}
if (url.indexOf("://")<0) {
url = "http://" + url;
}
var tab = Math.round(options.tab) || 0;
if (tabs[tab]) {
tabs[tab].navigate(url);
}
else {
openTab({
url : url,
focus : true
});
}
return true;
};
self.showToolbar = function () {
vis(toolbar, true);
vis(showBtn, false);
showing = true;
doResize();
};
self.hideToolbar = function () {
vis(toolbar, false);
vis(showBtn, true);
showing = false;
};
addEvent(window, "load", function() {
init();
});
addEvent(document, "load", function() {
init();
});
addEvent(window, "resize", function() {
doResize();
});
return self;
}());
<开发者_开发技巧/script>
</head>
<body>
<div id="urlbar_toolbar" class="toolbar">
<a id="btn_hideToolbar" class="toolbar_closebutton" href="#hide-tooblar" title="Hide Toolbar"></a>
<input id="text_locationBar" type="text" value="" />
<a id="btn_locationGo" href="#go" title="Go to the location in the address bar"></a>
</div>
<a id="btn_showToolbar" class="floating_button" href="#show-toolbar" title="Show Toolbar"></a>
<div id="div_frameHolder"></div>
<!--<iframe id="iframe_tab_0" class="webview" src="" frameborder="0"></iframe>-->
</body>
</html>
Only thing, that makes difference if comparing standard JavaScript and Greasemonkey one, is the point of origin, or callback function.
The standard JavaScript code origin is the current browser window, but Greasemonkey scripts work in "another dimension". To work with the browser window in a Greasemonkey script, you need to use callback for it, that is called as unsafeWindow in Greasemonkey. So, if you want to use jQuery code that is loaded in browser, call it by unsafeWindow.jquery.stuff().
You can read more about it in their wiki page.
加载中,请稍侯......
精彩评论