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.
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);
}
}
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);
}
});
<!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>
{
"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://*/*"]
}]
}