Skip to content

Instantly share code, notes, and snippets.

@IzumiSy
Last active November 6, 2022 20:29
Show Gist options
  • Star 62 You must be signed in to star a gist
  • Fork 10 You must be signed in to fork a gist
  • Save IzumiSy/765cfd6dc02c79de875e to your computer and use it in GitHub Desktop.
Save IzumiSy/765cfd6dc02c79de875e to your computer and use it in GitHub Desktop.
Chrome.storage.sync example
{
"name": "SyncExtension",
"version": "0.1",
"manifest_version": 2,
"description": "Storage Sync Extension",
"permissions": [ "storage" ],
"browser_action": {
"default_popup": "popup.html"
}
}
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
</head>
<body>
<div id="data"></div>
<input type="text" id="text"></input>
<button id="set">Set</button>
<script src="popup.js"></script>
</body>
</html>
// popup.js
document.body.onload = function() {
chrome.storage.sync.get("data", function(items) {
if (!chrome.runtime.error) {
console.log(items);
document.getElementById("data").innerText = items.data;
}
});
}
document.getElementById("set").onclick = function() {
var d = document.getElementById("text").value;
chrome.storage.sync.set({ "data" : d }, function() {
if (chrome.runtime.error) {
console.log("Runtime error.");
}
});
window.close();
}
@nisar799
Copy link

Thank you for this short & sweet example

@IzumiSy
Copy link
Author

IzumiSy commented May 18, 2017

@Cormaca18
chrome.storage.sync.set takes an Object as the first argument. You can probably add some more keys as you want.

chrome.storage.sync.set({ 
  "data1": data1,
  "data2": data2,
  "data3": data3
}, function() {
  ...
});

@Adetona
Copy link

Adetona commented Jun 11, 2017

Why is it that when I stored a new item the old one is removed?

Is there no way to retain the old entries?
@IzumiSy

@Adetona
Copy link

Adetona commented Jun 11, 2017

Also, is there a way to perform CRUD operation using the chrome storage API?

@IzumiSy
Copy link
Author

IzumiSy commented Jun 18, 2017

@Adetona

Is there no way to retain the old entries?

It looks no way to do that without writing your own update logic like renaming the key of the value in updating with a new key-value pair.

is there a way to perform CRUD operation using the chrome storage API?

No, there isn't. Chrome.storage.sync only provides simple set/get methods. If you want to do that, you need to write your own CRUD operation logics.

@graykode
Copy link

graykode commented Oct 7, 2018

Thanks! I solved my problem

@iletai
Copy link

iletai commented Jul 25, 2019

window.close(); this function had using method close to sync data? I have issues when user type in textarea and must sync without close popup.html of extension. Anyone has meet same issues? @IzumiSy

@IzumiSy
Copy link
Author

IzumiSy commented Jul 25, 2019

@iletai No, you don't have to put window.close(). That method is only for closing popup here, not for any finalizing.

@iletai
Copy link

iletai commented Jul 31, 2019

@iletai No, you don't have to put window.close(). That method is only for closing popup here, not for any finalizing.

Yes. Thank you.

@maskmanlucifer
Copy link

I am new in js i was trying to learn chrome storage api. I copy pasted exact your code but in console there was an error "can not read property sync of undefined" please help!.

@Gaetan07
Copy link

Gaetan07 commented Apr 1, 2021

I am new in js i was trying to learn chrome storage api. I copy pasted exact your code but in console there was an error "can not read property sync of undefined" please help!.

@maskmanlucifer I have trouble using chrome.storage, but maybe your issue comes from the fact that you didn’t write "permissions": ['storage'] in the manifest.json file

@klanpaia
Copy link

Thank u <3

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment