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.

Cacodemon

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? – Cacodemon

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.

Included

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? – Cacodemon

Sorry, I noticed your requirement late. I'm currently editing the answer. – Included

Yea, true. This really is much more complicated. Thanks for these explanations. – Cacodemon

do paths always start with /crxfs/? – Prosciutto

Answer 2

What I did in this situation to avoid publishing resources as web accessible resources was to create a background script and listen to specific message from the content script:

// background.js
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  (async () => {
    if (message.type === "gimmeHTML") {
      const data = await fetch(chrome.runtime.getURL(message.url));
      sendResponse(data);
    }
  })();

  // this is needed for async listeners be able to use `sendResponse` function
  return true;
});

// content.js
...
const data = await chrome.runtime.sendMessage({ type: "gimmeHTML", url: "static/index.html" });
console.log(data);
...

This way you incapsulate the data retrieval on your "backend" background script side and should not worry in your content script about any changes that might happen, like if you take the data not via file access, but via HTTP or other storage approaches.

Also notice that getPackageDirectoryEntry is not cross-browser, if you do care.

Baber