javascript - How to read file from chrome extension?

Question

I have popup.html where popup.js is invoked when popup is loaded by clicking on browser action. There I'm programmatically injecting content scripts with chrome.tabs.executeScript(). I need to append one element to page's body. How can I insert HTML code from different .html file within extension, because it's much easier to maintain the code like that. I was thinking of accessing it within popup.js (is there some API call for that?) and then within code attribute to insert content script code with string of retrieved HTML code.

I saw some methods using XMLHttpRequest from content script, but is there to avoid that? I tried with chrome.fileSystem, but that's for chrome apps and not extensions.

Answer 1

As a comment mentioned, it's just a question of making a GET request to chrome.runtime.getURL("myfile.html"), where "myfile.html" is the relative path (from the root of the extension) to the file that you want.

You can do that with raw XHR or, if you're using jQuery, using $.ajax.

To do it from a content script, you need to declare it in "web_accessible_resources".

---

Since you don't want that, yes, there is another way (not available to content scripts).

You can obtain a read-only 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);
});

As you can see, this is vastly more complicated than an XHR request. One would probably use this only if one wants to list the files.