0

I learning how to develop Chrome extensions and at a point where I'd like to have user input and be able to save that input data. Upon refresh, the 'data' is deleted.

I have tried using chrome.storage, both local and sync, but have yet to succeed. I have also many tutorials.

background.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://*/*"]
  }]
}
Code with J
  • 3
  • 6
  • 1) What does setName return? 2) The click listener for `submit` defines `userName` function but it's not used anywhere because `});` closes the parent scope. 3) Such issues can be easily solved by properly using the built-in devtools debugger which allows setting breakpoints and observing the variables. Different parts of the extension have [different devtools](/q/38913799). 4) See also [Inspect extension's chrome.storage in devtools](https://stackoverflow.com/q/32435399) – wOxxOm Sep 19 '21 at 09:38

0 Answers0