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.

I exactly said that I wouldn't like to use Ajax request with XMLHttpRequest. Isn't there a way to load another HTML from popup.js which is not a content script? — Tommz, Mar 04 '15 at 15:20

score 35 · Accepted Answer · edited May 23 '17 at 10:30

35

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.

edited May 23 '17 at 10:30

Community

1
1

answered Mar 04 '15 at 15:21

Xan

74,770
16
179
206

What's confusing me is that - content scripts are the ones which are inserted in viewing page, but the other javascript file (such as running with extensions popup windows) aren't and they should have a way to access the other files within extension, isn't that so? Do those scripts also need to make ajax calls? – Tommz Mar 04 '15 at 15:24
Sorry, I noticed your requirement late. I'm currently editing the answer. – Xan Mar 04 '15 at 15:25
Yea, true. This really is much more complicated. Thanks for these explanations. – Tommz Mar 04 '15 at 15:31
do paths always start with `/crxfs/`? – Winand Sep 30 '18 at 11:44

How to read file from chrome extension?

1 Answers1

Linked