I'd like to put a drag and drop canvas over every website I visit in Firefox. My Greasemonkey script puts a drag and drop canvas under every page:

kinetic.user.js:

// ==UserScript==
// @name          kineticjs_example

// @description   Canvas Drag and Drop
// @include       *
// @require       http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js
// @require       http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.2.min.js

// ==/UserScript==


var div = document.createElement( 'div' );
with( div ) {
    setAttribute( 'id', 'container' );


}

// append at end
document.getElementsByTagName( 'body' )[ 0 ].appendChild( div );





var stage = new Kinetic.Stage({
    container: 'container',
    width: 1000,
    height: 1000
});
var layer = new Kinetic.Layer();
var rectX = stage.getWidth() / 2 - 50;
var rectY = stage.getHeight() / 2 - 25;

var box = new Kinetic.Rect({
    x: rectX,
    y: rectY,
    width: 100,
    height: 50,
    fill: '#00D2FF',
    stroke: 'black',
    strokeWidth: 4,
    draggable: true
});

// add cursor styling
box.on('mouseover', function() {
    document.body.style.cursor = 'pointer';
});
box.on('mouseout', function() {
    document.body.style.cursor = 'default';
});


 layer.add(box);
    stage.add(layer);

How can I drag and drop this shape over the entire website?