Storing text Globally on a chrome extension, and Reusing it Onload

Question

I am trying to create a simple clipboard extension. I have 6 textarea objects that are used as copy/paste platforms. I want these objects to 'remember the text' for future uses (even after the extension is closed).

I this is how the textarea object was built like:

<table>
            <tr>
                <td>
                    <textarea id="container_1" class="container" rows="4" cols="50" value="" focusout="SetTextBoxString(1)"></textarea>
                </td>
                <td>
                    <textarea id="container_2" class="container" rows="4" cols="50" value="" focusout="SetTextBoxString(2)"></textarea>
                </td>
            </tr> 
(...)

notice that the id is container + the number of the object (goes on until 6)

in the JavaScript side, I use the onload event to loop through all of these objects and get from the data from the global storage and put it in the textareas. For the input, I use the SetTextBoxString() object to "send" whats in that field to the global storage. here is the js:

var texts = [];
Load_func()
{
    for (var i = 1; i <= 6; i++) {
        chrome.storage.sync.get(["Txt_" + index], function (items) {
            var obj = JSON.parse(items);
            var txt = "Txt_" + i
            texts.push(obj.txt)
            document.getElementById("container_" + i).innerHTML = texts[i]
        });
        if (!texts[i])
        {
            document.getElementById("container_" + i).value = "add"
        }
    }

}
SetTextBoxString(index)
{
    var sorcestring = "Txt_" + index;
    chrome.storage.sync.set({ sorcestring : document.getElementById("container_" + index).innerHTML }, function () {

    });
}

It's working fine, but when I refresh the page the text disappears. What have I done wrong?

I know it's a long question, I have done everything I can to make it shorter, no luck. I really appreciate if you will help me. thank you in advance!

sources:

How can I save information locally in my chrome extension?

Mister SirCode · Accepted Answer · 2019-08-01T12:23:16.923

You can move to using JQuery if you want, but some people believe its rather useless, I created this code in JQuery a while back for a similar project to yours, but more of a "notebook"

I cant seem to get this code to "successfully" work 100% if I use normal javascript, so unfortunately unless you want to hook big chunky ol' JQuery to your project, this answer isnt very useful.

Anyways, this code will auto adapt to how many "Inputs" you have, it saves their data and then binds it to a local storage. Im new to Extensions too, but if i had to guess why your current code isnt working, its possible your extension is trying to save the data so some unknown URL, as local storage is mostly based on websites alone, and cant be accessed by other websites (Security reasons obviously).

You can adjust this with your current code to allow it to autosave based on the change of the textarea, like you already have, but for now, its saved by the activation of a button, as seen below.

<button id="saveBtn">Save Text</button>

$(document).ready(function () {
    var savesbtn = document.getElementById("saveBtn");

    //FILL TEXT AREAS WITH NOTES
    for (var i = 1; i < 11; i++) {
      $("#container_" + i).val(localStorage.getItem("textCopy" + i)); /* Most of this simply adds a
1/2/3/4 etc if your ID is so, and saves it under that number, henceforth auto-adjusting per textarea,
henceforth only requiring 1 save, instead of many. */
    }

    function saveNotes() { // Saves the current value of the inputs.
      // Save data to localstorage
      for (var i = 1; i < 11; i++) {
        localStorage.setItem("textCopy" + i, $("#container_" + i).val());
      }
    };
    savesbtn.addEventListener("click", saveNotes);
});

If this still fails to load from local storage, your best bet is to try an alternate form of storage, be it, SQL or some other form.

Also heres a good example of how I used this (sorry if it doesnt turn out well, I havent set the dimensions correctly for every screen type, and so far it really only looks good on my screen.): https://codepen.io/SkylerSpark/pen/KjodVe

thank you for your answer! unfortunately, I did not manage to get your code working — , Aug 01 '19 at 14:24
@avivgood3 Its alright, Localstorage doesnt seem like it should function on an extension anyways, so yeah an alternate form of storage may be required. — Mister SirCode, Aug 01 '19 at 15:28
@avivgood3 for real? Wow. It must be saving the info on the local Chrome://extension#dsnfljhasdfhbasdfhadsf url or whatever... This is intriguing, considering my doubts, but it works! Interesting. — Mister SirCode, Aug 01 '19 at 15:35

Storing text Globally on a chrome extension, and Reusing it Onload

1 Answers1