Add a draggable window to a page using Greasemonkey

Question

I\'m trying to create a Greasemonkey script that adds a draggable div to every web page. For some reason, the div isn\'t displaying at all. What might be the reason for this?

Answer 1

Completely wrong on the first go - the issue is the use of $(document).append. You cannot append directly to the document, you can only append to a node.

So Either

$(document.body).append()

or

$('body').append()

Here's the fiddle for proof.

It's probably the lack of the @require, maybe your greasemonkey is out of date?

// ==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>');
});
​

Boilerplate template. Should work fine OOB.

Answer 2

I've created a working userscript that adds a draggable div to every page. Here is the source code:

// ==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);
    });
});