0

I'm creating a chrome extension to make a time schedule table.

I have two HTML pages:

  • popup html page where where schedule appears
  • options html page where user can configure the schedule details (no. hours, time periods, days to show, etc..).

At the beginning, I was going to simply save all schedule settings as a json in local storage and dynamically render the table based on it using jQuery each time user checks the schedule..

// When user saves settings, store options to localStorage 
localStorage["preferences"] = JSON.stringify(preferences)

// then later use it to render the table using jQuery
savedPreferences = JSON.parse(localStorage["preferences"]);
$("ScheduleDiv").html("<table id="Schedule"></table>)
for (i = 0; i < savedPreferences.timePeriods ; i++){
$("#Schedule").insertRow(0) ...
// and so on

but then I thought, what if I just dynamically render the table into HTML file for one time, and then each time user opens the popup it will load the saved file:

jQuery $("#ScheduleDiv).load('SavedSchedule.html)

instead of creating the table from zero each time? 1- Is this possible for a chrome extension? 2- Is it better from a performance perspective to load an external file each time?

Thank you

Heila Al-Mogren
  • 171
  • 10
  • Saving a file to the user local file system is *possible* as you can read on this [quite old answer](https://stackoverflow.com/a/2158074/2159528)... Now it may be harder than it looks. Using the simple `download` attribute will make the user save the file wherever and your extention will not be able to load it back. Saving it on a server brings new challenges like authentication. But if you do that, then you should save a json as small as possible. – Louys Patrice Bessette Jan 10 '21 at 05:17
  • If the file is small the difference will be negligible. Anyway, someone - you actually - will have to measure the performance by using the built-in devtools profiler. – wOxxOm Jan 10 '21 at 07:01
  • 1
    If you are worried about performance, [don't modify the DOM inside a loop](https://learn.jquery.com/performance/append-outside-loop/), as the code you've shown does. Build up your string/elements in the loop, and then insert it into the DOM once, when done. – Don't Panic Jan 10 '21 at 09:50

0 Answers0