Chrome扩展程序 - 保存设置 [英] Chrome Extensions - Saving Settings

问题描述

我正在构建我的第一个Chrome扩展程序。这是一件非常简单的事情，我现在要做的就是试着去了解它是如何工作的，以及如何发挥它的作用。

无论如何，我现在要做的是我有一个扩展按钮，用TEXTAREA打开一个页面。我希望用户能够在文本框中输入文本并保存，以便稍后调用（此设置还需要在下次打开Chrome时再次调用，无论它们输入到我想保留的文本框中这个值永久存在，除非它们保存在它之上）。

My TEXTAREA id = test1

这是我的JavaScript

p>

  function saveSettings（）{
 var storage = chrome.storage.sync; 
 
 //从文本框中获取签名值
 var txtValue = test1.value; 
 $ b $ //使用Chrome存储API保存
 storage.set（txtValue，function（）{
 console.log（Saved）; 
}）; 
 
 
函数insertText（text）{
 document.getElementById（test1）。value = text; 
 
 
 
 
 
 $ b 
出于测试的目的，我有一个addEventListener插入一组文本值以确保插入功能起作用。我有一个用于硬编码文本集的按钮，然后是另一个尝试插入应该是var txtValue的保存文本的按钮。
 
 
 
插入函数WORKS  
 
 
  document.addEventListener（'DOMContentLoaded'，function（）{
 var temp = document.getElementById（'template '）; 
 temp.addEventListener（'click'，function（）{
 insertText（'Hard Coded Text'）; 
 message（'Template Inserted'）; 
 
}）; 
}）; 
  
插入函数不起作用，它尝试将输入的值插入并保存到TEXTAREA中 
 
 
  document.addEventListener（'DOMContentLoaded'，function（）{
 var link = document.getElementById（'插入'）; 
 link.addEventListener（'click'，function（）{
 insertText（txtValue）; 
 message（'保存的文本插入'）; 
 
 }）; 
}）; 
  
我不确定我做错了什么。我看了一堆不同的例子，其中大部分与我使用storage.sync完成的类似，但我似乎无法完成它。
 
 $ b 
 
 
解决方案
 保存 
 
 
  chrome.storage.sync.set（{mytext：txtValue}）; b 
 
 
 
 $ b 
 code> chrome.storage.sync.get（'mytext'，function（data）{
 yourTextArea.value = data.mytext; 
}）; 
  
我发现了一个新库，用Promise调用chrome存储，非常酷。
 
 
 
  https://github.com/Selection-Translator/chrome -call  
 从'chrome-call'导入{scope} 
 
 const storage = scope（'storage.local'）
 storage（'get'，'flows'）。then（data => initFlows（data.flows））
  pre> 
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))


                        
这篇关于Chrome扩展程序 - 保存设置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！