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

內容腳本在一個特殊的環境中執行所謂的孤立 世界。他們可以訪問它們注入到的頁面的DOM， ，但不能訪問該頁面創建的任何JavaScript變量或函數。 它看起來像每個內容腳本一樣，沒有其他JavaScript 正在其上運行的頁面上執行。反過來也是如此： 頁面上運行的JavaScript不能調用任何函數，也不能訪問由內容腳本定義的任何 變量。

見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 
    }, "*"); 
} 

而在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); 

我沒有測試以上，所以請認爲它是僞代碼。一個類似的例子可以在這裏找到：http://developer.chrome.com/extensions/content_scripts.html#host-page-communication