Troubleshooting Google Chrome Extension: chrome.storage.sync.get malfunctioning

Could anyone help me troubleshoot my code issue? I successfully save the data, but when trying to load it, the saved data cannot be found:

Here is the code snippet:

$('#SaveSet').click(function() {
    var theValue = $('#col').val();
    if (!theValue) {
        alert('Error: No value specified');
        return;
    }
    chrome.storage.sync.set({
        'ToSave': theValue
    }, function() {
        alert('Settings saved' + " " + theValue);
    });
});
$('#Get').click(function() {
    alert('working');
    chrome.storage.sync.get("ToSave", function(data) {
      alert("data" + data);
    });
});

After attempting to get the data, the alert shows "data[object Object]"

Answer №1

My understanding is that when you use chrome.storage.sync.get, it will always send back an object, even if you are only requesting the value of one key.

This means that instead of receiving just the value in your data parameter, you will actually get an object with a single key called 'ToSave'.

You can test this by updating your #Get handler like this:

$('#Get').click(function() {
    alert('working');
    chrome.storage.sync.get("ToSave", function(data) {
        alert("data: " + data.ToSave);
    });
});

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

Unique issue: Angular encountering a syntax error exclusively in Internet Explorer browser

Encountered an issue with a JavaScript code snippet within my angular project. It throws a syntax error in IE 11, but runs smoothly in Chrome. Interestingly, this particular function is not even called on the initial page load, yet the error persists. Upo ...

Find the location where the function is declared

Can anyone help me locate the definition of this function: http://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/S3.html#copyObject-property copyObject(params = {}, callback) ⇒ AWS.Request I'm struggling to find where it is defined. Any suggestio ...

"Utilizing JavaScript to filter JSON data at a deep nested

When working with a JSON data set, I often face the challenge of filtering based on specific child values. Take the following example: [ { "Date": "2017-03-02T00:00:00", "Matches": [ { "Id": 67, ...

"Concealed beneath the text is the link to return to the

I have implemented a back to top link in my MVC project. Layout: <a id="back-to-top" href="#" class="btn btn-primary btn-lg back-to-top" role="button" title="Click to return to the top of the page" data-toggle="tooltip" data-placement="left"><spa ...

Navigating the proper utilization of exports and subpaths in package.json with TypeScript

As a newbie in creating npm packages using TypeScript, I've encountered some issues that I believe stem from misinterpreting the documentation. Currently, I am working with Node 16.16.0 and npm 8.13.2. Here is the structure of my project: src/ ├─ ...

When the browser window is resized to mobile view, a div is overlapped by an image

I've encountered an issue with the image size and position when resizing to mobile view in the browser. .extension { display: table; padding: 50px 0px 50px; width: 100%; height: auto; color: #fff; background-color: #558C89; ...

Is there a way to convert HTML into a structured DOM tree while considering its original source location?

I am currently developing a user script that is designed to operate on https://example.net. This script executes fetch requests for HTML documents from https://example.com, with the intention of parsing them into HTML DOM trees. The challenge I face arise ...

Identify if the string refers to a local file or an external file

Is there a way to distinguish between a local path and a reference to another server using JavaScript? Given the list of URLs below, how can I identify which ones point to files on the local file system versus those leading to example.com? var paths = [ ...

The LinkedIn API encountered an error when attempting to retrieve historical follower data, resulting in a HTTP

I've scoured the depths of the internet in search of a solution to my problem, but none seem to fit what I need. My goal is to retrieve historical follower data from LinkedIn's API using this call: ${companyId}/historical-follow-statistics?time- ...

What is the process for obtaining a compilation of warnings from the next.js terminal?

While running my project on VScode, I noticed a series of warnings appearing in the terminal. One specific warning that caught my attention is: The `bg-variant` mixin has been deprecated as of v4.4.0. It will be removed entirely in v5. on line 8 ...

Issue with parent-child communication in React.js causing malfunction

I am facing an issue with maintaining state between two different JavaScript files using React. The parent class, break.js, is defined as follows: export default function AlertDialog(props) { const [demoOpen, setDemoOpen] = React.useState(true); ...

Challenges with the Task List Board

I'm facing a bit of a challenge with this task. As a newcomer to JavaScript, I've set out on a quest to create a task list board where users can input tasks along with dates and times. The goal is for these entries to appear inside a photo using ...

JavaScript exporting data to Excel and populating the top row with column

My code successfully exports a file via Excel without any errors. However, the issue I'm facing is that the exported Excel file contains a lot of unnecessary spaces. The problem is highlighted in the image provided: data from row 123 should be in col ...

What are some ways to postpone the execution of a function in React or NextJs?

How do I automatically redirect to the home page after 5 seconds of accessing a page in NextJS? I attempted to achieve this using the following code: useEffect(() => { const timer = setTimeout(() => { redirect('/home') ...

gulp-eslint struggles with interpreting optional chaining syntax

I'm attempting to use optional chaining syntax in my JavaScript code like this: let foo = bar?.property; When I run eslint directly on my JS files, it works without any issues. However, when I run gulp-eslint with the same configuration, I encounte ...

Issue with JavaScript executor: receiving an "Unexpected identifier" error when passing a single quote character

I am trying to pass the value below in a script using the Javascript executor. String value = "ac.saveDocket('CompanyRegistration','https://yyy.yyy',0);" JavascriptExecutor executor = ((driver) as JavascriptExecutor) WebEleme ...

Dilemma arises from conflicting javascript codes

Currently, I am developing a web application where the main page features a timeline that needs to update its content automatically. To achieve this, I am utilizing the setTimeOut function of JQuery to refresh the timeline every x seconds. In addition, th ...

Using jQuery ajaxPrefilter with Expression Engine

I'm struggling to implement a jQuery ajaxPrefilter with the following JavaScript code. This is how I am currently calling the ajax function. var $setallow = $(".show"); $setallow.click(function() { var $allow = $(this).closest("form"); var fo ...

Angular controller fails to fetch scope variable in subsequent view

I'm currently working on implementing a login feature that directs a validated user to a personalized HTML view that greets them with their name. The initial view is a login page. When the user clicks the "Log In" button, the ng-click function is sup ...

Utilize information stored in a database to automatically navigate to a different webpage

I am currently working with PHP, HTML, and a mySQL database. Here are my current project requirements: Retreive specific data from the database and output it. Compare this data with predetermined values. If the data falls outside of the specified range, ...