Alternative to chrome.storage.sync that can store more than 8kb in a key

user_16684702 0
Viewed 149

I built a chrome extension that takes information from a popup form, formats that in a certain way, and spits out that "card". See below for a picture.

https://i.stack.imgur.com/PkDU0.png

When it spits out the seperate "cards", it saves the innerHTML of the div containing all of the cards to storage. When the program loads, it takes that item from storage and changes the innerHTML of the div accordingly to what was saved. That way, when I refresh or exit and come back, the cards do not disapear.

However, I've ran into some problems because I intend to use this program on multiple computers, but I do not want to have different cards on one computer than I have another.

My goal: Be able to save two strings (likely massive in size, far exceeding 8kb) across multiple computers.

What I've tried:

  • I've attempted to use local.storage and chrome.local.storage but each do not provide the capability for use across multiple computers.
  • I've tried to use chrome.sync which showed the best possibility of success, but failed because there is a strict 8kb quota for keys and my keys are much larger than 8kb because they save the entire div.
  • Researching a way to store the strings in like google drive or something. I found some API that I think did similar but it was deprecated.
  • Looking for an exterior way to store data but I believe they all cost money.

Code:

function setOnLocalStorage(){
    chrome.storage.sync.set({'template': document.getElementById('cards').innerHTML})
    chrome.storage.sync.set({'groupTemplate': document.getElementById('listContainer').innerHTML})

chrome.storage.sync.get('template', function(data){   
    var z = data
    document.getElementById('cards').innerHTML = [Object.values(z)[0]]
    })

chrome.storage.sync.get('groupTemplate', function(data){   
    var y = data
    document.getElementById('listContainer').innerHTML = [Object.values(y)[0]]
    })

Other information: Each of the cards of seperate divs, if that helps. I have delete and copy functions on each card avaiable through an altered context menu.

google-chrome-extension html javascript
1 Answers

If the value to be stored is a little above 8 Kb you can use a js library which shrink the content (zip). You can also implement a tailored routine that splits the value in more smaller than 8kb keys and joins that keys when you'll need to retrieve the original value.
You can merge these two approaches together or...
...you can use supabase or firebase services.

user_92310130
Related