title: JavaScript can not call content script JS function
body: <p>I am developing chrome extension. I loaded JavaScript file successfully but the problem is external JavaScript (which I have loaded) can not call the function of content script files my code is as follows.</p>
  
  <pre><code>$(document).ready(function() {
  $('.main_list').click(function()
  {
      $('.sub_list') .hide();
      $(this) .parent() .children('.sub_list') .slideToggle("normal");
  });
  
  
  $('#click') .click(function()
  {
      $('.sub_list') .hide();
      $(this) .parent() .parent() .children('.sub_list').slideToggle("normal");
  });
  
  
  $('#btnnewtask').click(function()
  {
      showdialog('http://localhost:51967/task.aspx');
  });
  $('#linknewtask').click(function()
  {
      showdialog('http://localhost:51967/task.aspx');
  });
  $('#btnnewcall').click(function()
  {
      showdialog('http://localhost:51967/call.aspx');
  });
  $('#linknewcall').click(function()
  {
      showdialog("http://localhost:51967/call.aspx");
  });
  $('#btnnewmeeting').click(function()
  {
      showdialog("http://localhost:51967/meeting.aspx");
  });
  $('#linknewmeeting').click(function()
  {
      showdialog("http://localhost:51967/meeting.aspx");
  });
  });
  </code></pre>
  
  <p>Showdialog() is function in content script. It is as follow</p>
  
  <pre><code>function showdialog(url)
  {
  var xhr=new XMLHttpRequest();
  xhr.onreadystatechange=function()
  {
      if (xhr.readyState==4 &amp;&amp; xhr.status==200)
          {
          xmldoc=xhr.responseXML;
          var js=getfile(getjavascript(xmldoc));
          for(i=0;i&lt;js.length;i++)
          {
              loadjscssfile(js[i],"js");
          }
          var css=getfile(getstylesheet(xmldoc))
          for(i=0;i&lt;css.length;i++)
          {
              loadjscssfile(css[i],"css");
          }
  document.file.push(
  {"url":url,"css":css,"js":js});
  document.getElementById("dialogcontainer3").
  innerHTML=gethtmldocument(xmldoc);
          document.getElementById("blacklayer").style.display="block";
          document.getElementById("dialogcontainer3").style.display=
  "inline-block";
          document.getElementById("dialogcontainer2").style.display="block";
          document.getElementById("dialogcontainer1").style.display="block";
          }
  }
  xhr.open("GET",url,true);
  xhr.send();
  }
  </code></pre>
  
  <p>But it gives error</p>
  
  <pre><code>Uncaught ReferenceError: showdialog is not defined (program):1
  (anonymous function) (program):1
  b.event.dispatch (program):3
  v.handle (program):3
  </code></pre>