使用 Greasemonkey 将可拖动窗口添加到页面答案

【问题标题】：Add a draggable window to a page using Greasemonkey使用 Greasemonkey 将可拖动窗口添加到页面
【发布时间】：2012-12-20 13:36:20
【问题描述】：

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

// ==UserScript==
// @name       Draggable box demo
// @namespace  http://use.i.E.your.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("<div id='dragZone'><div class='draggable'>Drag here!<input type = 'text'></input></div>");
    $('#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++);
    });
});

【问题讨论】：

还有另一个脚本可以做到这一点：userscripts.org/scripts/show/47608 我可以使用这个脚本的源代码，这将是一个相当好的解决方法。
@Ohgodwhy 我注意到下面的脚本仅适用于少数网站（例如 Stackoverflow.com）。您是否让它在其他网站（例如 google.com 和 jsfiddle.com）上正常工作？

标签： jquery greasemonkey

【解决方案1】：

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

要么

$(document.body).append()

或

$('body').append()

Here's the fiddle for proof.

可能是缺少@require，也许你的greasemonkey已经过时了？

// ==UserScript==
// @name       My Fancy New Userscript
// @namespace  http://use.i.E.your.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('<div style="position:absolute;top:50px;z-index:'+_highest+';left:100px;background:#ecebeb;border:1px solid #333;border-radius:5px;height:50px;width:300px;"> Hello, This is an addon div from Greasemonkey. </div>');
});

样板模板。 OOB 应该可以正常工作。

【讨论】：

您在哪个网页上进行了测试，您使用的是哪个浏览器？我正在使用 Google Chrome（它支持 Greasemonkey 脚本，例如 Firefox。）
另外，除了您在这篇文章中提到的错误之外，您是否进行了任何更改？
这是我所做的唯一更改。我使用 Tampermonkey。
您在哪个网页上运行了用户脚本？我不确定它是否适用于所有页面。
令人惊讶的是，这仅适用于某些网页，不包括google.com。需要对其进行修改，使其显示在页面中所有其他元素的顶部。

【解决方案2】：

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

// ==UserScript==
// @name       Div on top
// @namespace  http://use.i.E.your.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('<div id = "draggableDiv" class = "ui-widget-content" style="position:absolute;top:'+GM_getValue("top")+'px;z-index:'+_highest+';left:'+GM_getValue("left")+'px;background:#ecebeb;border:1px solid #333;border-radius:5px;height:50px;width:300px;"> Hello, This is an addon div from Greasemonkey. <input type = "text" value = "type something here"></input> </div>');
    $( "#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);
    });
});

【讨论】：