javascript - 使用 chrome-extension 从文件系统加载 html 文件

Question

我开发了一个 Google Chrome 扩展程序，用于通过 REST(使用 ajax)发送网络存档中的一些 url。不幸的是，我需要加载一些 html 模板(位于我的扩展中)以注入(inject)到我的模式窗口中，但我没有找到任何解决方案!

这是我的 list .json

{
  "name": "MyWebArchive",
  "version": "1.0",
  "manifest_version": 2,
  "description": "Aggiunge il pulsante per interagire su MyWebArchive",
  "icons": { "64": "img/logo.png" },
  "permissions": [
    "tabs",
    "storage",
    "declarativeContent",
    "https://test.mywebarchive.com/"
  ],
  "page_action": {
    "default_icon": "img/logo.png",
    "default_popup": "template/popup.html",
    "default_title": "Configura MyWebArchive Extension"
  },
  "background": {
    "scripts": ["develop/background.js"]
  },
  "content_scripts":
  [
    {
      "pages": ["template/playlist.html"],
      "matches": ["https://www.github.com/*","https://www.bitbucket.org/*","https://github.com/*","https://bitbucket.org/*","http://www.github.com/*","http://www.bitbucket.org/*","http://github.com/*","http://bitbucket.org/*"],
      "js":  ["develop/constant.js","vendor/jquery-1.11.1.min.js","vendor/bootstrap.js","develop/azioni.js","js/popup.js"],
      "css": ["css/bootstrap-modal.css", "css/style.css"]
    }
  ]
}

在我的代码中我已经尝试过

//Load using jQuery
$('.mwa').click(function () {
    $('#mwa-body').load(chrome.extension.getURL('template/login.html'));
    $('#mwa-btn').click();
}

或

//Load using webkitRequestFileSystem
$('.mwa').click(function () {
    window.webkitRequestFileSystem(window.PERSISTENT, 5 * 1024 * 1024, onInitFs, errorHandler);
    $('#mwa-btn').click();
}
function onInitFs(fs) {
    console.log('Opened file system: ' + fs.name);
    [...]
}

或

//Load via Ajax
$('.mwa').click(function () {
    var url = chrome.extension.getURL('template/playlist.html');
    $('#mwa-btn').click();
    $.get(url, function(html) {
        $(this).html(html);
    }).error(function(e) {
        console.log(e);
    });
});

或

//Insert with iframe
$('.mwa').click(function () {
    var url = chrome.extension.getURL('template/selectFolder.html');
    $("#mwa-body").html('<iframe src="' + url + '"></iframe>');
    $('#mwa-btn').click();
});

或使用 javascript FileReader 库，但这些尝试都不起作用。

我可以通过用 javascript 编写 html 来解决，但是模板非常复杂，所以我正在研究如何从文件系统加载它。

Tnx

Answer 1

您需要将文件声明为 web-accessible :

  "web_accessible_resources": [
    "template/*"
  ],