將HTML加載到頁面元素（擴展名爲Chrome）

我正在嘗試編寫一個Chrome擴展程序，該擴展程序將在某些網頁的頂部顯示一個欄。如果我有我的劇本的內容是這樣的：將HTML加載到頁面元素（擴展名爲Chrome）

$('body').prepend('<div id="topbar"><h1>test</h1></div>');

一切看起來不錯，但我最終要的是這樣的：

$('body').prepend('<div id="topbar"></div>'); 
$('#topbar').load('topbar.html');

其中topbar.html是：

<h1>test</h1>

但是，當我將其更改爲此時，網頁被破壞。大部分內容消失了，我最終看到了一些廣告。我甚至看不到'測試'標題。我已經檢查過，確保頁面上沒有其他「頂部」ID。怎麼了？

來源

2011-04-13 Colin

哪裏是'topbar.html'在什麼位置？ Chrome擴展程序或網絡端？ – mattsven 2011-04-13 01:12:34

它在鉻擴展的目錄中 – Colin 2011-04-13 01:13:38

好吧，'.load'使用AJAX將文件加載到元素，並且我非常確定您無法通過AJAX本地chrome文件加載。 – mattsven 2011-04-13 01:17:04

URL的extenion文件夾中的文件的格式如下：

chrome.extension.getURL("topbar.html")

現在，如果你嘗試做：：

chrome-extension://<ID>/topbar.html

可以通過運行得到這個路徑

$('#topbar').load(chrome.extension.getURL("topbar.html"));

它不會讓你因爲交叉來源的政策。背景的網頁沒有這個限制，所以你需要有加載HTML和傳遞導致的內容腳本：

content_script.js：

chrome.extension.sendRequest({cmd: "read_file"}, function(html){ 
    $("#topbar").html(html); 
});

background.html：

chrome.extension.onRequest.addListener(function(request, sender, sendResponse) { 
    if(request.cmd == "read_file") { 
     $.ajax({ 
      url: chrome.extension.getURL("topbar.html"), 
      dataType: "html", 
      success: sendResponse 
     }); 
    } 
})

在現實世界中，你可能會讀topbar.html只有一次，然後再用它。

來源

2011-04-13 02:22:30 serg

的$獲得（chrome.extension.getURL（「頂欄html的「），函數（topbarContent）{ ... \t}， 'HTML'）;對我來說工作正常 - 我在控制檯中看不到任何跨源錯誤。 – Vlad 2011-12-29 15:49:04

應該在清單中指定'web_accessible_resources'。請參閱：http://developer.chrome.com/extensions/manifest.html#web_accessible_resources – 2012-10-12 03:48:01

雖然上述方案沒有工作，有一點要注意的是，你需要從事件處理程序返回true，這樣的通信端口仍然可以提供的$就調用成功後。

見下文以獲取更多信息。 https://code.google.com/p/chromium/issues/detail?id=307034

來源

2014-09-17 13:32:40

如果您想擴展他人的答案，最好留下他們的答案評論，而不是第二個。 – ChargerIIC 2014-09-17 13:55:17

將HTML加載到頁面元素（擴展名爲Chrome）

回答

相關問題