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

Question

我有 popup.html，其中 popup.js 在通过单击浏览器操作加载弹出窗口时被调用。我正在以编程方式使用chrome.tabs.executeScript() 注入内容脚本。我需要将一个元素附加到页面的正文中。如何在扩展名中插入来自不同 .html 文件的 HTML 代码，因为这样维护代码要容易得多。我正在考虑在 popup.js 中访问它（是否有一些 API 调用？），然后在 code 属性中插入带有检索到的 HTML 代码字符串的内容脚本代码。

我在内容脚本中看到了一些使用XMLHttpRequest 的方法，但有没有办法避免这种情况？我尝试使用 chrome.fileSystem，但这是针对 chrome 应用程序而不是扩展程序。

Answer 1

正如评论所述，这只是向chrome.runtime.getURL("myfile.html") 发出GET 请求的问题，其中"myfile.html" 是您想要的文件的相对路径（从扩展的根目录）。

您可以使用原始 XHR 来做到这一点，或者，如果您使用的是 jQuery，则可以使用 $.ajax。

要从内容脚本执行此操作，您需要在 "web_accessible_resources" 中声明它。

---

既然您不希望这样，是的，还有另一种方法（内容脚本不可用）。

您可以通过chrome.runtime.getPackageDirectoryEntry 获得对扩展文件的只读HTML5 Filesystem 访问权限：

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 请求复杂得多。可能只有在想list the files 时才会使用它。