JavaScript can not call content script JS function

Question

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.

$(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");
});
});

Showdialog() is function in content script. It is as follow

function showdialog(url)
{
var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function()
{
    if (xhr.readyState==4 && xhr.status==200)
        {
        xmldoc=xhr.responseXML;
        var js=getfile(getjavascript(xmldoc));
        for(i=0;i<js.length;i++)
        {
            loadjscssfile(js[i],"js");
        }
        var css=getfile(getstylesheet(xmldoc))
        for(i=0;i<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();
}

But it gives error

Uncaught ReferenceError: showdialog is not defined (program):1
(anonymous function) (program):1
b.event.dispatch (program):3
v.handle (program):3

Answer 1

Content scripts execute in a special environment called an isolated world. They have access to the DOM of the page they are injected into, but not to any JavaScript variables or functions created by the page. It looks to each content script as if there is no other JavaScript executing on the page it is running on. The same is true in reverse: JavaScript running on the page cannot call any functions or access any variables defined by content scripts.

See http://developer.chrome.com/extensions/content_scripts.html#execution-environment

I would suggest trying shared DOM to communicate between the content script and the page or Message Passing.

An example of code on the page would be:

function showDialog(url) {
    window.postMessage({
        type: "FROM_PAGE",
        text: url
    }, "*");
}

And in the contentscript:

// This function will NOT collide with showDialog of the page:
function showDialog(url) {
    /* ... */
}

window.addEventListener("message", function (event) {
    // We only accept messages from ourselves
    if (event.source != window) { return; }

    // Make sure we're looking at the correct event:
    if (event.data.type && (event.data.type == "FROM_PAGE")) {
        showDialog(event.data.text);
    }
}, false);

I haven't tested the above, so please consider it to be pseudocode. A similar example is available here: http://developer.chrome.com/extensions/content_scripts.html#host-page-communication