Chrome Extensions - Saving Settings

Question

I'm building my first Chrome extension. It's a very simple thing I'm trying to do at this point so I can try and gain an understanding of how it works and build off of that.

Anyway what I am trying to do right now is I have a extension button that opens up a page with a TEXTAREA. I want the user to be able to enter text into this textarea box and save this to be called later (this setting also needs to be available to be called again the next time Chrome is opened, whatever they enter into this textbox I want to keep that value permanently unless they save over it).

My TEXTAREA id=test1

Here's my JavaScript

function saveSettings() {
    var storage = chrome.storage.sync;

    // Get signature value from text box
    var txtValue = test1.value;

    // Save using Chrome storage API
    storage.set(txtValue, function() {
        console.log("Saved");
    });
}

function insertText(text) {
      document.getElementById("test1").value= text;
}

For testing purposes I have a addEventListener for inserting a set text value to make sure the insert function works. I have a button for a hard coded set of text, then another button to try to insert the "saved" text which should be the var txtValue.

The insert function that WORKS

document.addEventListener('DOMContentLoaded', function() {
    var temp = document.getElementById('template');
    temp.addEventListener('click', function() {
        insertText('Hard Coded Text');
    message('Template Inserted');

    });
});

The insert function that does NOT work that is trying to insert the value typed into and saved into the TEXTAREA field.

document.addEventListener('DOMContentLoaded', function() {
    var link = document.getElementById('insert');
    link.addEventListener('click', function() {
        insertText(txtValue);
    message('Saved Text Inserted');

    });
});

I'm not sure what I'm doing wrong. I've looked at a bunch of different examples and most of them are similar to what I've done using storage.sync but I can't seem to get it to work.

Any thoughts would be greatly appreciated.

Thank you!

Answer 1

to save

chrome.storage.sync.set({ mytext: txtValue });

to get

chrome.storage.sync.get('mytext', function(data) {
    yourTextArea.value = data.mytext;
});

I found a new library to call chrome storage with Promise, pretty cool.

https://github.com/Selection-Translator/chrome-call

import { scope } from 'chrome-call'

const storage = scope('storage.local')
storage('get', 'flows').then(data => initFlows(data.flows))

More information: https://developer.chrome.com/docs/extensions/reference/storage/