Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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();
}
@Folyd
Copy link

Folyd commented Jan 5, 2016

what different between chrome.runtime.lastError and chrome.runtime.error? i only see chrome.runtime.lastError property in official docs.

@turbopixel
Copy link

turbopixel commented Apr 13, 2016

thank you!
for me it work just "window.onload = function()"

@phaistonian
Copy link

phaistonian commented May 17, 2016

Hello.

I have no used this API yet, so here's a super newbie-question.

Will sync "actually" sync the data between different systems? Or is it just a local thing?

@IzumiSy
Copy link
Author

IzumiSy commented Jun 10, 2016

@phaistonian
Hi, its exactly a sync among machines with the same Google account.

@vhmth
Copy link

vhmth commented Aug 19, 2016

@phaistonian it attempts to sync across other Chrome browsers and devices associated with the current user's account. If that person does not have an account linked to Chrome or they have not given Chrome sync permissions, it will store locally until they have given sync permissions or log in.

@Cormaca18
Copy link

Cormaca18 commented Feb 28, 2017

@IzumiSy Is there a way to extend this to have three fields? I'm struggling trying to do it!

@nisar799
Copy link

nisar799 commented Mar 15, 2017

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

maskmanlucifer commented Jun 2, 2020

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

klanpaia commented Mar 30, 2022

Thank u <3

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