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

Question

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

我看到一些方法使用XMLHttpRequest从内容脚本获取代码，但是否有其他方法避免这种情况？我尝试使用chrome.fileSystem，但那是用于Chrome应用而不是扩展。

- Tommz

---

我明确表示不想使用XMLHttpRequest的Ajax请求。有没有一种方法可以从popup.js加载另一个HTML，而不是内容脚本？ - Tommz

Answer 1

如一条评论所述，只需向chrome.runtime.getURL("myfile.html")发出GET请求即可，其中"myfile.html"是您想要的文件的相对路径（从扩展程序的根目录开始）。

您可以使用原始XHR或者如果您正在使用jQuery，则使用$.ajax。

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

---

如果您不想这样做，是的，还有另一种方法（内容脚本无法使用）。

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

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请求复杂得多。只有当需要列出文件时才可能使用此方法。

- Xan

---

让我感到困惑的是，内容脚本是插入在浏览页面中的，但其他的JavaScript文件（比如与扩展弹出窗口一起运行的文件）并不是，并且它们应该有一种访问扩展内其他文件的方式，是这样吗？这些脚本是否也需要进行ajax调用？ - Tommz

很抱歉，我晚了看到您的需求。我正在编辑回答。 - Xan

是的，没错。这确实更加复杂。感谢您提供的这些解释。 - Tommz

路径是否始终以“/crxfs/”开头？ - Winand