How to read file from chrome extension?
google-chrome, google-chrome-extension, javascript
Solution
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.
Problem
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.