Web 扩展脚本 jQuery load html div.

Question

我正在开发我的第一个网络扩展，我想将预定义的 html 加载到目标页面。

在清单中，我将"index.html"添加到web_accessible_resources。

在内容脚本中，我尝试将此 html 加载到其他一些div 中，如下所示：

$("#divTestRectangle").load("index.html", function (response, status, xhr) {
if (status == "error") {
var msg = "Sorry but there was an error: ";
alert(msg + xhr.status + " " + xhr.statusText);
console.log(response);
console.log(xhr);
}
});

我从xhr.statusText收到"URI格式不正确"错误。

我错过了什么？或者也许还有另一种选择？我不想使用"硬编码"字符串变量对象，因为它感觉不对和优雅。

编辑：

manifest.json：

{
"manifest_version": 2,
"name": "youtube-test",
"version": "1.0",
"permissions": [
"activeTab",
"contextMenus"
],
"web_accessible_resources": [
"index.html"
],
"content_scripts": [
{
"matches": [ "https://www.youtube.com/watch*" ],
"css": [ "style.css" ],
"js": [ "jquery-3.2.1.min.js", "jquery-ui.min.js", "main.js" ]
}
]
}

主.js：

$(function () {
var htmlRectangle = '<div id="divTestRectangle"></div>';
$("#ticker-content").prepend(htmlRectangle);
$("#divTestRectangle").load("index.html", function (response, status, xhr) {
if (status == "error") {
var msg = "Sorry but there was an error: ";
console.log(msg + xhr.status + " " + xhr.statusText);
console.log(response);
console.log(xhr);
}
});
$("#divTestRectangle").draggable({});
});

编辑：

答案如下

Answer 1

我的问题的解决方案是更改行

$("#divTestRectangle").load("index.html", function (response, status, xhr) {

自

$("#divTestRectangle").load(chrome.extension.getURL("index.html"), function (response, status, xhr) {

感谢@ChristosPapoulas和@Makyen的评论。