Unable To Execute Callback of chrome.storage.local.set In popup.js
Question
I am writing a simple chrome extension that contains an HTML popup ( popup.html ) with an associated popup.js file. When a user clicks a button in popup.js , I would like to retrieve and set a value using chrome.storage.local.get and chrome.storage.local.set . After this process, I would like to notify the user that the update is complete (with some simple jQuery). However, I placed this jQuery update code inside the callback of my chrome.storage.local.set , and when the button is clicked, the dynamic update never occurs, thus, I suspect that the callback never executed. I believe this is so because I placed the notification snippet inside the chrome.storage.local.get callback, and was able to display the proper message:
popup.html :
<html>
<head>
<title>Test Extensio</title>
<script src='jquery.min.js'></script>
<script src='popup.js'></script>
</head>
<body>
<button class='get-notified'>Run Test</button>
<div class='update-display'></div>
</body>
</html>
popup.js :
$(document).ready(function(){
$('body').on('click', '.get-notified', function(){
chrome.storage.local.get(['counter'], function(result){
var new_count = result.counter === undefined ? 1 : parseInt(result.counter)+1
chrome.storage.local.set({'counter':new_count}, function(){
$('.update-display').html(`The count is: ${new_count}`)
//this is never executed
});
});
});
});
With the code sample above, the counter message is never displayed. However, when I remove chrome.storage.local.set and run the update inside the callback of chrome.storage.local.get , it does work:
chrome.storage.local.get(['counter'], function(result){
var new_count = result.counter === undefined ? 1 : parseInt(result.counter)+1
$('.update-display').html(`The count is: ${new_count}`)
//this works
});
Why is it that $('.update-display').html(...) works in the first callback, the callback of chrome.storage.local.get , but not the inner callback of chrome.storage.local.set ?
My manifest.json file:
{
"manifest_version": 2,
"name": "Test extension",
"description": "A Description coming soon",
"version": "2.0",
"browser_action": {
"default_icon": "/images/icon.png",
"default_popup": "popup.html"
},
"background" : {
"scripts" : ["jquery.min.js", "popup.js"]
},
"permissions": [
"storage",
"activeTab",
"declarativeContent",
"webNavigation",
"unlimitedStorage",
"tabs",
"cookies",
"webRequest",
"webRequestBlocking",
"http://*/",
"https://*/",
"http://fonts.googleapis.com/",
"https://fonts.googleapis.com/"
],
"web_accessible_resources": ["popup.html"],
....
}
Does anyone know why this baffling behavior might occur? Thank you very much!
2 answers
solution1
0 2020-06-19 19:42:19
.set doesn't accept a callback , it returns a Promise.
You just need to do:
chrome.storage.local.set({'counter':new_count}).then(function(){
$('.update-display').html(`The count is: ${new_count}`)
});
solution2
0 2020-06-19 19:58:43
For those interested, I discovered the problem: I added a window.close() above my chrome.storage.local.get that would inevitably close the popup after the user clicked the button a certain number of times. I simply moved the window.close inside my original callback, and the chrome.storage.local.set worked fine:
/*this did not work
if (somecondition){
window.close();
}
*/
chrome.storage.local.get(['counter'], function(result){
var new_count = result.counter === undefined ? 1 : parseInt(result.counter)+1
chrome.storage.local.set({'counter':new_count}, function(){
$('.update-display').html(`The count is: ${new_count}`)
//this worked
if (somecondition){
window.close();
}
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.