DIV Drag On Webpage (Chrome Extension) - html

Question

What I'm working on is I have a div with a black background and I wanna be able to click, and drag it. I'm using JQuery UI, and well I can't seem to figure out how to do it.
When the icon for the div is clicked it toggles to show/hide, and I wanna be able to click, and drag it over a web page. Later on this will be helpful for calculators, stopwatches, etc: but I can't seem to figure out how to have the div show/hide nor how to be able to drag it.
Any help would be much appreciated.
manifest:
{
"name": "DIV Drag Test",
"version": "0.0.1",
"description": "DIV Drag Test",
"background_page": "background.html",
"permissions": ["http://*/*", "tabs"],
"icons": {
"48": "logo.png"
},
"browser_action": {
"default_icon": "logo.png",
"default_title": "DIV Drag Test"
},
"content_scripts": [
{
"matches": ["http://*/*"],
"css": ["style.css"],
"js": ["js/jquery.js", "js/jquery-ui.js"]
}
]
}
css:
div#test8935 {
cursor:pointer;
width:320px;
height:240px;
background-color:#000;}
background.html
<script>
$(document).ready(function() {
$('div#test8935').draggable();
chrome.browserAction.onClicked.addListener(function(tab) {
$('div#test8935').toggle(350);
});
});

Answer 1

It has been a little while since I have done Chrome extension development, but these are my initial thoughts based on what I remember.
It looks like you are trying to manipulate a div on a website through background.html. Are you sure you don't want to be targeting a content script instead? Background has no interface and will never interact directly with a page.
So what I think you want to do is move your script from background.html into a new js file and include it with your contentscript js params.
"content_scripts": [
{
"matches": ["http://*/*"],
"css": ["style.css"],
"js": ["js/jquery.js", "js/jquery-ui.js", "contentscript.js"]
}