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!
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))
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With