1

我正在开发 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
4

1 回答 1

7

内容脚本在称为孤立世界的特殊环境中执行。他们可以访问被注入页面的 DOM，但不能访问页面创建的任何 JavaScript 变量或函数。它查看每个内容脚本，就好像它正在运行的页面上没有执行其他 JavaScript。反过来也是如此：在页面上运行的 JavaScript 不能调用任何函数或访问由内容脚本定义的任何变量。

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

我建议尝试共享 DOM在内容脚本和页面或消息传递之间进行通信。

页面上的代码示例如下：

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

于 2013-02-05T11:21:09.750 回答