Load html file from file system with chrome-extension

Question

I've developed a Google Chrome extension for sending some url in a web-archive via REST (in ajax). Unfortunately i need load some html template (located in my extension) for inject into my modal window, and I don't find any solution!

This is my manifest.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"]
    }
  ]
}

and in my code I've tried

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

or

//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);
    [...]
}

or

//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);
    });
});

or

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

or using javascript FileReader library, but none of these attempts works.

I could solve by writing the html with javascript, but templates are very complex, so I'm looking at how to load it from the file system.

Tnx

Answer 1

You need to declare files as web-accessible :

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