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"]
}