如何从 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" 中声明它。

既然你不想那样，是的，还有另一种方法（不适用于内容脚本）。

您可以获得只读HTML5 Filesystem access to your extension's files with 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 请求复杂得多。人们可能只有在想要 list the files.

时才会使用它

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

How to read file from chrome extension?

javascript

google-chrome

google-chrome-extension