I have about 350 lines of static JSON data in my extension. That data is used in a content script and all of it is needed. It's a list of key-value pairs. Whenever a user clicks on the page, all keys are checked if they match a condition and the appropriate action is performed. Something like:

{
    "ABC": 323.32,
    "BDS": 23.12,
    "GTO": 96.52
}

Where is it best to put it? I came up with three ideas:

• Include it directly in the content script.
• Load it in an Event Page and use Message Passing to retrieve the data.
• Store it in a JSON file and somehow retrieve it with XHR. I don't think that one's possible, though.

I know about localStorage and I've seen Chrome's various other types of storage. However, they seem to be intended for data that is generated while the user is doing stuff with the extension.

My data is static. Once the extension is installed, it doesn't change. That is, until the extension receives an update and modifies it eventually.

Right now, the data is inside a content script. I think that's not great because it's loaded every time a page is opened while it doesn't change at all. For that reason, an Event Page seems more suitable. However, is there something designed for this type of data?

I have about 350 lines of static JSON data in my extension. That data is used in a content script and all of it is needed. It's a list of key-value pairs. Whenever a user clicks on the page, all keys are checked if they match a condition and the appropriate action is performed. Something like:

{
    "ABC": 323.32,
    "BDS": 23.12,
    "GTO": 96.52
}

Where is it best to put it? I came up with three ideas:

• Include it directly in the content script.
• Load it in an Event Page and use Message Passing to retrieve the data.
• Store it in a JSON file and somehow retrieve it with XHR. I don't think that one's possible, though.

I know about localStorage and I've seen Chrome's various other types of storage. However, they seem to be intended for data that is generated while the user is doing stuff with the extension.

My data is static. Once the extension is installed, it doesn't change. That is, until the extension receives an update and modifies it eventually.

Right now, the data is inside a content script. I think that's not great because it's loaded every time a page is opened while it doesn't change at all. For that reason, an Event Page seems more suitable. However, is there something designed for this type of data?

• javascript
• google-chrome
• google-chrome-extension
• storage

Share Follow edited Oct 11, 2017 at 6:56 dodov asked Oct 10, 2017 at 12:47 dodovdodov 5,89444 gold badges4545 silver badges7979 bronze badges 7

• Is it actually JSON, or an Object literal? – Makyen ♦ Commented Oct 11, 2017 at 3:00
• This question is too broad. You haven't told us how you use the data. How much of the data do you actually need in each content script? Is it something which is loaded into a data structure and then you only access one piece of it in each content script? We need more information in order to be able to provide any evaluation of the good ways to store the data. Right now all we can do is toss out ideas for how it's possible to do it. – Makyen ♦ Commented Oct 11, 2017 at 3:03
• 1 If you always need all of it, every time the content script is loaded, then just keep it as an Object literal / Object initializer in the content script. Anything else just adds plexity and additional processing requirements. if your actual source for the data is JSON, then you could have it as a JSON string in your content script, which you parse with JSON.parse(), but even that adds a bit of overhead. – Makyen ♦ Commented Oct 11, 2017 at 7:08
• 1 No, that's not any better. That data is stored as JSON internally. it's more processing to load it. You've said that you need all of it, every time a user clicks on the page. That's close enough to always needing all of it in every content script such that any possible savings of not having the Object in the content script on the relatively few times the user doesn't click in a page is outweighed by the additional processing needed. – Makyen ♦ Commented Oct 11, 2017 at 14:22
• 1 If you wanted to perform the parisons in the background script (send the click info to the background page and get back a response), that might be more memory efficient, but, that's really going to depend on how often you are needing to make such parisons, and if you are willing to let the parison happen in the background script. And that may still not be more efficient for 350x a 3 character string and a number. Either way, you're doing a lot better than those extension developers who load 85kiB of jQuery into every page, just to save a few characters in their own script. – Makyen ♦ Commented Oct 11, 2017 at 14:28

 |  Show 2 more ments

1 Answer 1

Sorted by: Reset to default 7

You CAN retrieve it with XHR or fetch. Use chrome.extension.getURL to get URL of your file.

This should work:

fetch(chrome.extension.getURL('/data.json'))
    .then((resp) => resp.json())
    .then(function (jsonData) {
        console.log(jsonData);
    });

And you also have to add it to your manifest.json:

"web_accessible_resources": [
  "data.json"
],