The issue with the Alert function not working in chrome.storage.sync.get

I successfully saved this setting:

function save_options() {
  var tbColor = document.getElementById('Color').value;
  chrome.storage.sync.set({
    'tbColor': Color
  }, function() {
    var status = document.getElementById('status');
    status.textContent = 'Settings were saved.';
    setTimeout(function() {
      status.textContent = '';
    }, 750);
  });
}

However, when I try to retrieve the setting using:

alert(chrome.storage.sync.get({'tbColor'}));

No alert is displayed. Surprisingly, alert("Hello"); works perfectly fine.

Can someone please guide me on what I might be doing wrong with retrieving these settings? Being new to all of this, I would appreciate gentle assistance :)

Answer №1

{'bgColor'} is not a valid syntax, causing it to throw an error initially.

Furthermore, chrome.storage.local.get operates asynchronously, making it impossible to utilize the returned value directly.

One possible solution is:

chrome.storage.local.get("bgColor", function(sync) {
  alert(sync.bgColor);
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to retrieve the ID of the clicked element from the child up to the parent

I currently have a Parent component and a Child component. The Child component contains inner elements called notes, with "delete" being one of them. My goal is to have the Child component return an ID to the Parent component when the delete element is cl ...

Maintain course focus when updating

I'm currently working on a to-do list where clicking on an item adds the "checked" class. However, when I refresh the page, everything reverts back to its original state without the checked class. How can I maintain the state of the checked items? I& ...

Guide on creating an autonomous select-all checkbox to show table columns

How can I create checkboxes with a "Select all" option and the following functionality: Check one or more checkboxes to show specific table columns. Uncheck them to hide the columns (toggle). Select the "Select all" checkbox to display all table columns. ...

Tips for incorporating external AMD modules with Angular2 using WebPack

In my current project using Angular2, TypeScript, and WebPack, I am looking to incorporate the Esri ArcGIS JavaScript API. The API can be accessed from the following URL: By importing Map from 'esri/Map';, I aim to import the corresponding modul ...

"Exploring the capabilities of Rxjs ReplaySubject and its usage with the

Is it possible to utilize the pairwise() method with a ReplaySubject instead of a BehaviorSubject when working with the first emitted value? Typically, with a BehaviorSubject, I can set the initial value in the constructor allowing pairwise() to function ...

Issues with the functionality of Angular JS services

Hey everyone, I'm relatively new to AngularJS and running into some issues with services. I've been working on a TO DO app in AngularJS using services but I just can't seem to get it to work correctly. Here is my controller: .controller("my ...

The mobile button bar on iPhone is shown when scrolling or jumping up to the anchor, but it doesn't actually scroll or jump to the

My goal is to include a back-to-top button that remains fixed at the bottom of the browser window. Surprisingly, when clicked, it successfully scrolls to the top in desktop and Android browsers but fails to do so on iPhones. On an iPhone, clicking the butt ...

Is it possible to selectively execute functions using Hashmap in Javascript with Node.js?

I have a JSON file called preferences.json that contains a list of preferences. For each preference, I have a corresponding function in a module called functions.js. These functions should be selectively executed based on the preferences, and the result of ...

Error encountered when attempting to assign a value of the original data type within the Array.reduce function

I am in the process of developing a function that takes a boolean indicator object like this: const fruits = { apple: false, banana: false, orange: false, mango: false, }; Along with an array such as ['apple', 'orange']. The go ...

Adding an element to the second-to-last position in a list

In the context of a HTML unordered list <ul id = "master_key_list"> <li id="master_key_23" class="available_element">Fix the Peanut Butter</li> <li id="master_key_24" class="available_element">Focus on Price Sensitivity</li& ...

Why does the sub-function not recognize the await keyword in Node.js with asynchronous operations?

As a student learning Node.js, I have been working on a brief example. The GET request on /org is functioning as expected. When attempting to segregate the server "fetch data" logic from the controller by using the GET request on /orgg, I encountered an i ...

Performing file downloads through AJAX in AngularJS

Recently, I developed an AngularJS program to facilitate file downloads from the server. Below is the code: HTML Code <a download="fullList.csv" ng-href="{{ fullListUrl }}" type="button" class="btn btn-success btn-xs exec-batch" ng-click="exportCSVBu ...

Struggling to get Print.js to work properly for printing, as nothing seems to be happening when I try to print

I recently started using a new tool called PrintJS. However, after going through the documentation, I realized that it is not displaying a printer preview window when I try to print. What's intriguing is that there are no JavaScript errors showing up ...

How to set up scroll restoration for the Angular Standalone Router?

The Angular Router provides the option to restore scrolling functionality, with documentation on how to implement it when loading data. Is there a way to configure the standalone router to automatically scroll back to the top of the router outlet? A demo ...

Removing a key from an index signature in Typescript - a step-by-step guide

In my web application built with Angular, we encountered a need for a data type to store translations of strings in different languages. To address this requirement, a team member defined the following type: export class TranslatedString { [language: str ...

How to use Angular filter to sort through an array and select multiple items based

Looking to implement a filter that, when clicked on a specific name, displays only that name: {'username': 'julio', 'status': 'created'}, {'username': 'julio', 'status': 'running&a ...

Enlarge the picture using just a singular image

My objective is simple: I want to magnify an image. Most JavaScript scripts I've found online require two images (one for thumbnail size and one for the zoomed-in size). But what if I only have one image? Is it still possible to achieve the zoom effec ...

I'm facing an issue with binding keyboard events in Vue - any suggestions on how to resolve

Hello everyone! I'm a newcomer to the world of Vue. Recently, I encountered an issue with keyboard-event binding that has left me puzzled. Let me share the relevant code snippet below: ...other code... <template v-for="(ite ...

jQuery is successfully manipulating pagination on CodeIgniter, however, the link is being updated as well

I've been working on a HTML page called view_closing.php. It includes a table with pagination, and my aim is to ensure that the table can move to another record without refreshing the entire page, all while remaining at the same address: http://localh ...

Enhance this piece of code with JavaScript features

I recently implemented a scrolling script on my website that I found at this link: http://blog.waiyanlin.net/example/jquery/flyingtext.html. However, the animation currently scrolls from left to right and I would like it to scroll from right to left inst ...