将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）

回答

相关问题