如何从chrome扩展程序中读取文件？

Question

我有popup.html,当点击浏览器操作加载弹出窗口时调用popup.js.我在那里以编程方式注入内容脚本chrome.tabs.executeScript().我需要在页面的主体上添加一个元素.如何在扩展中插入来自不同.html文件的HTML代码,因为这样维护代码要容易得多.我想在popup.js中访问它(是否有一些API调用？)然后在code属性内插入带有检索到的HTML代码字符串的内容脚本代码.

我看到了一些使用XMLHttpRequest内容脚本的方法,但有没有避免这种情况？我尝试过chrome.fileSystem,但那是Chrome应用而不是扩展.

Answer 1

如前所述评论,它只是一个做一个GET请求的问题chrome.runtime.getURL("myfile.html"),这里"myfile.html"是相对路径(从扩展的根目录)到你想要的文件.

您可以使用原始XHR执行此操作,或者,如果您使用的是jQuery,则可以使用$.ajax.

要从内容脚本执行此操作,您需要将其声明为"web_accessible_resources".

既然你不想要那个,是的,还有另一种方式(不适用于内容脚本).

您可以通过以下方式获取对扩展程序文件的只读HTML5文件系统访问权限chrome.runtime.getPackageDirectoryEntry:

chrome.runtime.getPackageDirectoryEntry(function(root) {
  root.getFile("myfile.html", {}, function(fileEntry) {
    fileEntry.file(function(file) {
      var reader = new FileReader();
      reader.onloadend = function(e) {
        // contents are in this.result
      };
      reader.readAsText(file);
    }, errorHandler);
  }, errorHandler);
});

如您所见,这比XHR请求复杂得多.只有当人们想要列出文件时,才可能使用它.