Chrome 扩展程序 - 保存设置

Chrome Extensions - Saving Settings

本文关键字：保存 设置 程序 扩展 Chrome      更新时间：2023-09-26

我正在构建我的第一个Chrome扩展程序。这是我在这一点上尝试做的一件非常简单的事情，所以我可以尝试了解它是如何工作的，并以此为基础。

无论如何，我现在要做的是我有一个扩展按钮，可以打开一个带有 TEXTAREA 的页面。我希望用户能够在此文本区域框中输入文本并将其保存以供以后调用（此设置也需要在下次打开 Chrome 时再次调用，无论他们在此文本框中输入什么，我都希望永久保留该值，除非他们保存它）。

我的文本区域 id=测试1

这是我的 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;
}

出于测试目的，我有一个addEventListener，用于插入设置的文本值以确保插入函数正常工作。我有一个用于硬编码文本集的按钮，然后是另一个按钮来尝试插入"保存"文本，该文本应该是 var txtValue。

有效的插入功能

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('insert');
    link.addEventListener('click', function() {
        insertText(txtValue);
    message('Saved Text Inserted');
    });
});
我

不确定我做错了什么。我看了一堆不同的例子，其中大多数都类似于我使用 storage.sync 所做的，但我似乎无法让它工作。

任何想法将不胜感激。

谢谢！

保存

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

要得到

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

我找到了一个新的库来调用 chrome 存储与 Promise，非常酷。

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))
相关文章：