Question

我开发了一个Google Chrome扩展程序，用于通过REST（在ajax中）在网络存档中发送一些网址。不幸的是我需要加载一些html模板（位于我的扩展名中）以注入我的模态窗口，而且我找不到任何解决方案！

这是我的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"]
    }
  ]
}

在我的代码中我尝试了

//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/*"
  ],

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

1 个答案: