javascript - html5 を使用した単純なドラッグ可能なポップアップ ウィンドウがクロム拡張で移動しない

Question

外部ライブラリに依存しない単純なドラッグ可能なフラウティングウィンドウを実装しようとしていますが、問題はウィンドウが作成されていることですが、静的でドラッグ可能ではないことです。 javascript/dragablelayer.html :

これはすべて、charom 拡張機能のコンテンツ スクリプトで行われています。

var s = document.createElement('script');
s.src = chrome.extension.getURL('client.js');
s.onload = function() {
    s.parentNode.removeChild(s);
};

try{
(document.head||document.documentElement||document.body).appendChild(s);
}catch(e){
  console.log("exception in appendChild");
}  

client.js:

isIE=document.all;
isNN=!document.all&&document.getElementById;
isN4=document.layers;
isHot=false;

function ddInit(e){
  topDog=isIE ? "BODY" : "HTML";
  whichDog=isIE ? document.all.theLayer : document.getElementById("theLayer");  
  hotDog=isIE ? event.srcElement : e.target;  
  while (hotDog.id!="titleBar"&&hotDog.tagName!=topDog){
    hotDog=isIE ? hotDog.parentElement : hotDog.parentNode;
  } 

  if (hotDog.id=="titleBar"){
    offsetx=isIE ? event.clientX : e.clientX;
    offsety=isIE ? event.clientY : e.clientY;
    nowX=parseInt(whichDog.style.left);
    nowY=parseInt(whichDog.style.top);
    ddEnabled=true;
    document.onmousemove=dd;
  }
}

function dd(e){
  //console.log("Starting draging");
  if (!ddEnabled) 
  {
    //console.log("continue draging !ddEnabled");
    return;
  }
  whichDog.style.left=isIE ? nowX+event.clientX-offsetx : nowX+e.clientX-offsetx; 
  whichDog.style.top=isIE ? nowY+event.clientY-offsety : nowY+e.clientY-offsety;
  return false;  
}

function ddN4(whatDog){
  if (!isN4) return;
  N4=eval(whatDog);
  N4.captureEvents(Event.MOUSEDOWN|Event.MOUSEUP);
  N4.onmousedown=function(e){
    N4.captureEvents(Event.MOUSEMOVE);
    N4x=e.x;
    N4y=e.y;
  }
  N4.onmousemove=function(e){
    if (isHot){
      N4.moveBy(e.x-N4x,e.y-N4y);
      return false;
    }
  }
  N4.onmouseup=function(){
    N4.releaseEvents(Event.MOUSEMOVE);
  }
}

function hideMe(){
  if (isIE||isNN) whichDog.style.visibility="hidden";
  else if (isN4) document.theLayer.visibility="hide";
}

function showMe(){
  if (isIE||isNN) whichDog.style.visibility="visible";
  else if (isN4) document.theLayer.visibility="show";
}

try{
    console.log("Starting to create tabel");
    var layerNode= document.createElement('div');
    layerNode.setAttribute('id','theLayer');
    layerNode.style.position="absolute";
    layerNode.style.width="250px";
    layerNode.style.left="100";
    layerNode.style.top="100";
    layerNode.style.visibility="visible";

    var tableNode= document.createElement('table');
    tableNode.setAttribute('border','0');
    tableNode.setAttribute('width','250');
    tableNode.setAttribute('bgcolor','#424242');
    tableNode.setAttribute('cellspacing','0');
    tableNode.setAttribute('cellpadding','5');  
    var newRow = tableNode.insertRow();
    var oCell = newRow.insertCell();
    oCell.setAttribute('width','100%');
    oCell.innerHTML =  "<table border='0' width='100%' cellspacing='0' cellpadding='0' height='36'><tr>"+
                      "<td id='titleBar' style='cursor:move' width='100%'>"+
                      "<ilayer width='100%' onSelectStart='return false'>"+
                      "<layer width='100%' onMouseover='isHot=true;if (isN4) ddN4(theLayer)' onMouseout='isHot=false'>"+
                      "<font face='Arial' color='#FFFFFF'>Layer Title</font></layer></ilayer></td>"+
                      "<td style='cursor:hand' valign='top'>"+
                      "<a href='#' onClick='hideMe();return false'><font color=#ffffff size=2 face=arial  style='text-decoration:none'>X</font></a></td></tr><tr>"+
                      "<td width='100%' bgcolor='#FFFFFF' style='padding:4px' colspan='2'>"+
                        "This is where your content goes.<br>"+
                        "It can be any html code or text.<br>"+
                        "Remember to feed the reindeer.<br>"+
                        "Avoid chewable giblet curtains."+
                      "</td></tr></table>";




    layerNode.appendChild(tableNode);
    document.body.appendChild(layerNode);

    document.onmousedown=ddInit;
    document.onmouseup=Function("ddEnabled=false");
    console.log("Ending to create tabel");
}
catch(e){
  console.log("script in page exception in appendChild"+e);
  //alert(e);
}