时间戳

首页 > 解决方案 > 如何使用 Chrome.storage Chrome 扩展程序保存数据 [MV2]

javascript - 如何使用 Chrome.storage Chrome 扩展程序保存数据 [MV2]

问题描述

我正在学习如何开发 Chrome 扩展程序，并且我希望有用户输入并能够保存该输入数据。刷新后，“数据”被删除。

我曾尝试使用本地和同步的 chrome.storage，但尚未成功。我也有很多教程。

背景.js

async function userName() {
  try {
    const userName = setName();
    // Save the `image` object to chrome's local storage area
    // under the `nextImage` key
    console.log(userName);

    chrome.storage.local.set({ userName: userName });
  } catch (err) {
    console.log(err);
  }
}

main.js

const submit = document.querySelector("#submit");

submit.addEventListener("click", () => {
  // Set Name
  function userName(name) {
    const username = document.querySelector("#username");
    username.value = name;
  }
});

console.log(userName());
  // Retrieve the user name object
  chrome.storage.local.get("userName", (data) => {
    if (data.userName) {
      userName(data.userName);
    }
  });

main.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Chrome Storage</title>
</head>
<body>
  <h1>Chrome Storage</h1>
  
  <input id="username" type="text" placeholder="Name">
  <button id="submit" >Submit</button>
  <p id="name"></p>
</body>
  <script src="main.js"></script>
</html>

mainfest.json

{
  "manifest_version": 2,
  "name": "Chrome Storage",
  "description": "Chrome storage",
  "version": "1.0.0",
  "permissions": [
      "tabs",
      "storage"
  ],
  "browser_action" : {
      "default_popup": "popup.html"
  },
  "chrome_url_overrides" : {
      "newtab": "main.html"
  },
  "background": {
      "scripts": ["background.js"],
      "persistent": false
  },
  "content_scripts": [{
      "css": ["style.css"],
      "js": ["main.js"],
      "all_frames": true,
      "matches": ["http://*/*"]
  }]
}

标签： javascriptgoogle-chrome-extension

解决方案

推荐阅读