Best Practices for Storing Static JSON Data in a Chrome Extension

Question

Best Practices for Storing Static JSON Data in a Chrome Extension

In my extension, I have a collection of around 350 lines of static JSON data. This data is essential for the functioning of a content script, as it consists of key-value pairs that are checked upon user interaction to trigger specific actions. Here's an example snippet:

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

Now, I'm contemplating the best location to store this data. Three ideas come to mind:

Embedding it directly within the content script.
Loading it in an Event Page and utilizing Message Passing to access the information.
Storing it in a JSON file and finding a way to retrieve it using XHR. Although, I believe this option may not be feasible.

While I am aware of technologies like localStorage and various storage types provided by Chrome, they seem more suitable for data generated during user interactions with the extension.

This JSON data remains static once the extension is installed until potential updates modify it. Currently, the data resides within the content script which is loaded each time a page is opened despite its unchanging nature. Considering this, would an Event Page be a better choice or is there a purpose-built solution for managing this type of static data?

javascript google-chrome google-chrome-extension storage

Answer 1

Answer №1

To access the file, you can make use of XHR or fetch method. Simply utilize chrome.extension.getURL to obtain the URL of your specific file.

Here is an example of how it can be done:

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

Additionally, remember to include the file in your manifest.json like this:

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

Answer 2

To access the file, you can make use of XHR or fetch method. Simply utilize chrome.extension.getURL to obtain the URL of your specific file.

Here is an example of how it can be done:

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

Additionally, remember to include the file in your manifest.json like this:

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

Best Practices for Storing Static JSON Data in a Chrome Extension

Answer №1

Similar questions

What causes my React app menu to unexpectedly open while simply updating the state without any CSS modifications?

I am having trouble properly customizing the slotDuration in fullcalendar

Animating Card depth on hover with Material UI

Regular expression that can be used to extract information from a text file by filtering and returning only

Enhance Data3 Sankey to disperse data efficiently

Creating an AJAX request in PHP to send data from multiple input fields with the same name

Conceal descendant of list item and reveal upon clicking

Tips for maintaining an active Chrome browser using Selenium in Python

Scraping multiple websites using NodeJS

Is there a way to make res.render in node.js/express/mongo wait until the database search is finished before loading?

Ajax is able to fetch the URL without any issues, but the page is not being updated as expected. Instead,

The text remains static and does not adjust its size when the screen is

Is TypeScript being converted to JavaScript with both files in the same directory?

Issue with floating date and time not functioning properly in ICS file for Yahoo Calendar

Switch between different tables

Combining onmousedown and onchange for optimal event handling

The transition from material-ui v3 to v4 results in a redux form Field component error stating 'invalid prop component.'

What is the best way to incorporate multiple HTML buttons that utilize the same JavaScript function within looped results?

Attaching a JQuery Event to a Custom Control on Google Maps

What could be causing my React Router to display empty pages?