加载html文件从文件系统与chrome扩展名

Load html file from file system with chrome-extension

本文关键字:chrome 扩展名 文件系统 html 文件 加载      更新时间:2023-09-26

我开发了一个Google Chrome扩展,通过REST(在ajax中)在web存档中发送一些url。不幸的是,我需要加载一些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

你需要声明文件为web可访问的:

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