我正在尝试编写一个Greasemonkey脚本,以使使用我需要使用的所有工具的工作变得更容易。当我在菜单外单击或使用与打开菜单相同的按钮时,菜单应关闭或消失。
该脚本需要与现有页面进行交互,并保持简单,我只想使用Javascipt。
这是我目前拥有的:
// ==UserScript==
// @name Tool Linker
// @grant none
// @include https://en.wikipedia.org/*
// @include https://www.wikipedia.org/
// ==/UserScript==
function addCss(css) {
var head, style;
head = document.getElementsByTagName('head')[0];
if (!head) { return; }
style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = css;
head.appendChild(style);
}
addCss('button {position: fixed; z-index: 1000; bottom: 0.6%; height: 2.8%; width: 7%; border-radius: 3px; font-family: arial; background: #FFFAF0;}');
addCss('menu-ca {position: fixed; z-index: 1000; overflow: hidden; bottom: 3.2%; height: 60%; width: 30%; border-style: solid; border-color: #CCCCCC; border-width: 1px; border-radius: 1%; margin: 0.1%; font-family: arial; background: #F2F2F2;}');
var btn = document.createElement("button");
btn.innerHTML = "Tool Linker";
document.body.appendChild(btn);
var menu = document.createElement("menu-ca");
btn.addEventListener('click', function(){
document.body.appendChild(menu);
});
window.addEventListener('click', function(event){
if(event.target != menu){
document.body.removeChild(menu);
}
});
中间乱七八糟的是CSS,为了显示为代码:(我无法正确地张贴它,而最后一种方法是我试图关闭菜单的方法;它确实如果最后一种方法被删除,则当您单击按钮时,将显示菜单。