Web 扩展脚本 jQuery 加载 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 得到 "The URI is malformed" 错误。

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

编辑：

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" ]
    }
  ]
}

main.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 的评论。

Web 扩展脚本 jQuery 加载 html div

Web Extension script jQuery load html div

jquery

firefox-addon-webextensions