使用Greasemonkey向页面添加可拖动窗口

我正在尝试创建一个Greasemonkey脚本，为每个网页添加一个可拖动的div。 出于某种原因，div根本没有显示。 可能是什么原因？

// ==UserScript== // @name Draggable box demo // @namespace http://use.iEyour.homepage/ // @version 0.1 // @description enter something useful // @match *://www.* // @copyright 2012+, You // @require http://code.jquery.com/jquery-latest.js http://code.jquery.com/ui/1.9.2/jquery-ui.js // ==/UserScript== //alert("Hi!"); $(document).ready(function() { $(document).append("
Drag here!
"); $('#dragZone').css('position', 'absolute'); var a = 3; $('.draggable').draggable({ start: function(event, ui) { $(this).css("z-index", a++); } }); $('#dragZone div').mousedown(function() { $(this).addClass('top').removeClass('bottom'); $(this).siblings().removeClass('top').addClass('bottom'); $(this).css("z-index", a++); }); }); 

Answer 1

第一次完全错误 – 问题是使用$(document).append 。 您不能直接附加到文档，您只能附加到节点。

所以要么

 $(document.body).append() 

要么

 $('body').append() 

这是certificate的小提琴。

这可能是缺乏@require，也许你的油脂已经过时了？

 // ==UserScript== // @name My Fancy New Userscript // @namespace http://use.iEyour.homepage/ // @version 0.1 // @description enter something useful // @match http://*/* // @require http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js // @copyright 2012+, You // ==/UserScript== jQuery(function($){ var _highest = 0; $("div").each(function() { var _current = parseInt($(this).css("zIndex"), 10); if(_current > _highest) { _highest = _current + 1; } }); $('body').append('
 Hello, This is an addon div from Greasemonkey. 
'); });​ 

Boilerplate模板。 应该工作正常的OOB。

Answer 2

我创建了一个工作用户脚本，为每个页面添加了一个可拖动的div。 这是源代码：

 // ==UserScript== // @name Div on top // @namespace http://use.iEyour.homepage/ // @version 0.1 // @description enter something useful // @match https://*/* // @match http://*/* // @match *.com* // @match *.net* // @require http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js // @require http://code.jquery.com/ui/1.9.2/jquery-ui.js // @copyright 2012+, You // ==/UserScript== jQuery(function($){ var _highest = 0; $("div").each(function() { var _current = parseInt($(this).css("zIndex"), 10); if(_current > _highest) { _highest = _current + 1; } }); $('body').append('
 Hello, This is an addon div from Greasemonkey.  
'); $( "#draggableDiv" ).draggable(); $('#draggableDiv').mouseup(function() { //alert('Set the x and y values using GM_getValue.'); var divOffset = $("#draggableDiv").offset(); var left = divOffset.left; var top = divOffset.top; GM_setValue("left", left); GM_setValue("top", top); //alert("Set left to " + left + " and top to " + top); }); });