0
프로그래밍에 익숙하지 않고 "Diving into Greasemonkey"북 (Mark Pilgrim)의 예제를 많이 읽었지만 제대로 작동하지 않습니다.자바 스크립트를 그리스 몽키 스크립트로 변환
기본적으로 다음 코드가 주어진 웹 사이트에서 실행할 수있는 그리스 몽키 스크립트로 바뀌어야합니다. 이 코드가 다른 곳에 게시 된 것을 보았습니다. 어떤 페이지에서든지 전환 가능한 URL 표시 줄을 만드는 것입니다.
기본적으로 브라우저의 URL 표시 줄 대신이 JavaScript URL 표시 줄을 사용할 수 있습니다. 일반적으로 http://www.site-with-script.com/?url=www.google.com을 실행하여 실행합니다 (이 경우 전환 가능한 URL 표시 줄을 Google 페이지 상단에 놓습니다).
Greasemonkey에서 innerHTML과 CSS 항목 중 일부를 시도했지만 제대로 작동하지 못했습니다. JavaScript 코드는 100 % 작동합니다. Greasemonkey 스크립트로 작동시키는 방법을 모르겠습니다.
<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>
아하! 감사! 나는 실제로이 작업을 거의 끝내고있다. =) –