html - JavaScript 无法调用内容脚本 JS 函数

Question

我正在开发 chrome 扩展。我成功加载了 JavaScript 文件，但问题是外部 JavaScript(我已加载)无法调用内容脚本文件的功能我的代码如下。

$(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() 是内容脚本中的函数。如下

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

但是报错

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.

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

我建议尝试共享 DOM 到 communicate between the content script and the page或 Message Passing .

页面上的代码示例如下:

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

在内容脚本中:

// 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);

以上我没有测试过，所以请认为它是伪代码。此处提供类似示例:http://developer.chrome.com/extensions/content_scripts.html#host-page-communication