javascript 将 html 加载到页面元素中（chrome 扩展）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5643263/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Loading html into page element (chrome extension)
提问by Colin
I'm trying to write a Chrome extension that will have a bar at the top of certain webpages. If I have my content script like this:
我正在尝试编写一个 Chrome 扩展程序，它会在某些网页的顶部有一个栏。如果我有这样的内容脚本：
$('body').prepend('<div id="topbar"><h1>test</h1></div>');
everything looks good, but what I ultimately want is something like this:
一切看起来都不错，但我最终想要的是这样的：
$('body').prepend('<div id="topbar"></div>');
$('#topbar').load('topbar.html');
where topbar.html is:
topbar.html 在哪里：
<h1>test</h1>
When I change it to this, though, the webpage is clobbered. Most of the content disappears, and I just end up seeing some of the ads. I can't even see the 'test' header. I've checked to make sure there's no other 'topbar' id on the page. What's wrong?
但是，当我将其更改为此时，网页被破坏了。大部分内容都消失了，我只看到了一些广告。我什至看不到“测试”标题。我已经检查以确保页面上没有其他“顶栏”ID。怎么了？
回答by serg
URL of a file inside an extenion folder has the following format:
扩展文件夹内文件的 URL 具有以下格式：
chrome-extension://<ID>/topbar.html
You can get this path by running:
您可以通过运行获得此路径：
chrome.extension.getURL("topbar.html")
Now if you try to do:
现在，如果您尝试执行以下操作：
$('#topbar').load(chrome.extension.getURL("topbar.html"));
it wouldn't let you because of cross-origin policy. Background pages don't have this limitation, so you would need to load HTML there and pass result to a content script:
由于跨域政策，它不会让你。后台页面没有此限制，因此您需要在那里加载 HTML 并将结果传递给内容脚本：
content_script.js:
content_script.js：
chrome.extension.sendRequest({cmd: "read_file"}, function(html){
$("#topbar").html(html);
});
background.html:
背景.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
});
}
})
In a real world you probably would read topbar.html only once and then reuse it.
在现实世界中，您可能只会阅读 topbar.html 一次，然后再使用它。
回答by spider T
While the above solution does work, one thing to pay attention to is that you need to return true from the event handler so that the communication port can still be available after the $.ajax call succeeds.
虽然上述解决方案确实有效，但需要注意的一件事是您需要从事件处理程序返回 true，以便在 $.ajax 调用成功后通信端口仍然可用。
see below for more information. https://code.google.com/p/chromium/issues/detail?id=307034
请参阅下面的详细信息。 https://code.google.com/p/chromium/issues/detail?id=307034
回答by Noah Friedman
FYI, now in 2020, chrome.extension.onRequestis deprecated and causes an error when loading the extension. Instead, chrome.runtime.sendMessageshould be used. For content.js, the code would now be:
仅供参考，现在在 2020 年，chrome.extension.onRequest已弃用，并在加载扩展程序时导致错误。相反，应该使用chrome.runtime.sendMessage。对于content.js，代码现在是：
chrome.runtime.sendMessage({cmd: "read_file"}, function(html){
$("#topbar").html(html);
});
and for background.jsthe code would now be:
对于background.js，代码现在是：
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
if(request.cmd == "read_file") {
$.ajax({
url: chrome.extension.getURL("topbar.html"),
dataType: "html",
success: sendResponse
});
return true;
}
})
be sure to note the 'return true' after the ajax, that tripped me up
一定要注意 ajax 之后的“return true”，这让我很困惑
