努力使用Chrome扩展的本地存储

zlwx9yxi 于 2023-02-14 发布在 Go

关注(0)|答案(1)|浏览(152)

我正在努力为我的"投资组合"开发一个简单的Chrome扩展。
我想做的事情其实很简单。我想我可以用两种不同的方式来做!第一种方式：

我在popup.html中有一个输入字段，我想做的是将提示的文本输入到这个输入字段中并保存到存储中，然后在contentScript中，我想读取保存到存储中的text/field并将其用于一些JS逻辑。

基本上，这是popup.html的输入：

<input class="custom-input-script-length" type="text" name="custom" id="values-input"/>

这是一个从输入中获取值作为参数的函数。它在我的popup.js中声明/调用：

function saveValue(value) {
     if(value !== '') {
         chrome.storage.local.set({'valuesInput': value}, function() {
             console.log("Values saved!");
         })
     }
}

现在，我已经尝试了很多方法直接从chrome标签读取值（不是从扩展名，我已经尝试进入contentScript），但它从来没有工作，它总是返回一个"未定义"。
我应该如何读取该值？
我的扩展必须做的就是获取整个responseHeader并从toString中搜索特定值（例如：如果它找到了它，它只会将值显示到一个新的div中，并添加到DOM中，仅此而已。
另一个解决方案是从弹出窗口内部的chrome标签中发送/读取整个responseHeader，但即使这样也不起作用。我得到的只是"未定义"或扩展上下文的responseHeader ...
你有什么建议吗？
我使用的是Manifest V3，并且已经将存储权限添加到其中。
感谢所有愿意回答的人!

google-chrome

来源：https://stackoverflow.com/questions/75421264/struggling-with-local-storage-for-a-chrome-extension

1条答案

按热度按时间

qkf9rpyu1#

这是对OP问题的答复，该问题太长，无法评论。*

唯一能重现这个问题的方法是在页面加载完成之前设置弹出窗口输入值。Chrome存储方法调用按预期工作。为了避免问题，初始化代码应该在页面末尾加载，或者 Package 在DOMContentLoaded事件中。
OP还询问如何在弹出页面和内容页面之间传递存储值。在这种情况下，内容页面可以直接从存储中读取值，存储在页面之间共享。内容页面还可以通过使用chrome. storage. onChanged事件在值更改时接收通知。
Chrome扩展程序的相关部分如下所示：

- 弹出窗口. html**

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Popup</title>
  </head>
  <body>
    <input class="custom-input-script-length" type="text" name="custom" id="values-input"/>
    <!-- script must load last -->
    <script src="scripts/popup.js"></script>
  </body>
</html>

- 弹出窗口. js**

let valuesInput = document.getElementById("values-input");

  valuesInput.addEventListener("change", (event) => {
    chrome.storage.local.set({valuesInput: valuesInput.value});
  })

  chrome.storage.local.get('valuesInput', function(obj) {
      if(obj.valuesInput !== undefined && obj.valuesInput !== '') {
          valuesInput.value = obj.valuesInput;
      }else {
          console.log("input field can't be empty.");
      }
  });

- 内容. js**

let valuesInput = null;

chrome.storage.local.get('valuesInput', (result) => {
  console.log('storage.get', result);
  valuesInput = result.valuesInput;
})

赞(0）回复(0）举报 2023-02-14

我来回答

努力使用Chrome扩展的本地存储

1条答案

相关问题

热门标签

最新问答