javascript - Chrome Extensions - Saving Settings - Stack Overflow

admin管理员组

文章数量:1187505

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!

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!

• javascript
• google-chrome
• google-chrome-extension

Share Improve this question Follow asked Feb 2, 2015 at 12:00 user2783652user2783652 21711 gold badge44 silver badges1212 bronze badges 7

• 1 I don't see any code to retrieve the saved value? – Dan Smith Commented Feb 2, 2015 at 12:02
• 3 In addition, chrome.storage.sync.set takes a JSON object, not a simple string value: developer.chrome.com/extensions/storage – Dan Smith Commented Feb 2, 2015 at 12:04
• The last set of code has an insertText(txtValue). The txtValue is supposed to be the saved value. – user2783652 Commented Feb 2, 2015 at 12:19
• I have storage in the permissions in my JSON file. Should I be adding something else? – user2783652 Commented Feb 2, 2015 at 12:20
• Sorry friend you're not really close to understanding the storage system right now - I'd suggest some more research. Have a look at this for instance: stackoverflow.com/questions/14531102/… – Dan Smith Commented Feb 2, 2015 at 12:26

 |  Show 2 more comments

1 Answer 1

Sorted by: Reset to default 30

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/

本文标签： javascriptChrome ExtensionsSaving SettingsStack Overflow