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

Posted 2023-02-19

【中文标题】如何从 chrome 扩展中读取文件？

【英文标题】：How to read file from chrome extension?

【发布时间】：2015-05-05 15:39:06

【问题描述】：

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

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

【问题讨论】：

我确实说过我不想将 Ajax 请求与 XMLHttpRequest 一起使用。有没有办法从 popup.js 加载另一个不是内容脚本的 HTML？

【参考方案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 时才会使用它。

【讨论】：

令我困惑的是 - 内容脚本是插入到查看页面中的脚本，但其他 javascript 文件（例如使用扩展弹出窗口运行）不是，它们应该有办法访问扩展名中的其他文件，不是这样吗？这些脚本是否也需要进行 ajax 调用？

抱歉，迟到才注意到您的要求。我目前正在编辑答案。

是的，没错。这确实要复杂得多。感谢您的解释。

路径是否总是以/crxfs/开头？