The local data storage function in chrome does not effectively store data as intended

I'm currently working on developing a chrome extension that requires storing data locally. However, I am facing an issue with the code in my popup.html file as it is not setting values in local storage as expected. My manifest.json file has both "storage" and "tabs" permissions granted.

<script type="text/javascript">
function save() {
  var username = document.getElementById('username').value;
  var password = document.getElementById('password').value;
  chrome.storage.local.set({'username': username}, function(){});
  chrome.storage.local.set({'password': password}, function(){}); 
}
</script>
Roll Number
<input type="text" name="username" id="username"></input>
Password
<input type="password" name="password" id="password"></input>
<button onclick="save()" type="submit" name="submit">Save</button>

This snippet showcases my manifest.json configuration:

{
  "manifest_version": 2,

  "name": "Autologin",
  "description": "Blah blah.",
  "version": "1.0",
  "permissions": [
    "http://xxxxxxxxxxxxx/*",
    "storage"
  ],
  "content_scripts": [
    {
      "matches": ["http://xxxxxxxxxxxxx/*"],
      "js": ["autologin.js"]
    }
  ],
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "autologin.html"
  }
}

Answer №1

Give this a shot, it did the trick for me

let userData = {};
userData[uname] = uname;
userData[pwd] = pwd;
chrome.storage.local.set(userData, function() {});

Answer №2

To separate the script from the html code, you should create a file called popup.js and link it in your html.

The contents of popup.js should be as follows:

function save() {
  var username = document.getElementById('username').value;
  var password = document.getElementById('password').value;
  chrome.storage.local.set({
   'username': username ,
   'password': password
  }, function(){});

}

document.getElementByName("submit").onclick=save;

In popup.html

Instead of embedding multiple <script>...</script> tags, use

<script src=popup.js></script>
.

In manifest.json

"default_popup": "popup.html" //the name of your popup html file

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

Is Redux really the new trend in the world of action creators?

I am new to this. I'm a bit unsure, is it okay or silly to use the pattern below? import { createAction, handleActions } from "redux-actions"; const CHANGE_STATE = "appState/CHANGE_STATE"; export const changeState = createAction(CHANGE_STATE, (key, ...

Inform the user that an error has occurred when attempting to perform an invalid

While using redux promise middleware for my front end, I am wondering about the correct status code to throw from my backend in case of an error. I know that I can use res.status(500).json(something), but is 500 the appropriate code for all types of erro ...

Steps to refresh a .ejs page with updated information following an ajax request

I am in need of re-rendering my homepage.ejs with new data on the server side following an ajax request. Although I am aware that you can somehow re-render the elements in the ajax callback, I am interested in finding out if it is possible to simply re-ren ...

Encountered a TypeScript error: Attempted to access property 'REPOSITORY' of an undefined variable

As I delve into TypeScript, a realm unfamiliar yet not entirely foreign due to my background in OO Design, confusion descends upon me like a veil. Within the confines of file application.ts, a code structure unfolds: class APPLICATION { constructor( ...

What is the best method to customize CSS in ExtJS 5.0 by overriding a function?

Is there a way to dynamically add a rule to existing CSS using code, particularly in overrides? For example: var sheets = document.styleSheets; // Some code omitted for simplicity var sheet = sheets[sheets.length - 1]; sheet.insertRule('.overlay {flo ...

Saving resources with a promise in Angular

I am facing a challenge while trying to handle a promise from the angular $resource save function. According to the documentation, I should be able to access the raw $http promise by using the $promise property on the returned object. Here is an example: ...

The FuelUx scheduler forgets which day we've chosen when selecting weekly recurrence

When using the fuelUX scheduler, I noticed that after calling the method $('#myscheduler').scheduler("value","JSON VALUE") and selecting a weekly recurrence pattern, the information of the day gets lost. For example, if my input for the recurrenc ...

The issue with ng-change is causing the previously selected drop down option to be cleared

After successfully implementing live searching with ng-change, I encountered an issue with a pre-selected drop-down box. Despite setting the selected="selected" attribute to make option three the default selection, the drop-down box jumps to the top optio ...

Display loader while waiting for file to be loaded

I am utilizing ajax to retrieve a file. The loading animation is functioning properly with the ajax request, however, the file size is notably large. I am interested in implementing a preloader that will display until the file has finished loading. ...

Using Javascript to choose an option from a dropdown menu

const salesRepSelect = document.querySelector('select[name^="salesrep"]'); for (let option of salesRepSelect.options) { if (option.value === 'Bruce Jones') { option.selected = true; break; } } Can someone please ...

javascript design pattern - achieving unexpected outcome

In the code snippet provided, the variable a is turning out to be undefined. Are you expecting it to display the parameter value passed in the parent function? function test(a) { return function(a) { console.log('a is : ' + a); // Ou ...

Utilizing Angular Filters to Assign Values to an Object within a Controller

I have a JSON example with multiple records, assuming that each name is unique. I am looking to filter out an object by name in the controller to avoid constant iteration through all the records using ng-repeat in my HTML. { "records": [ { "Name" : ...

Utilizing a shared service for multiple JSON datasets in AngularJS: A beginner's guide

After successfully creating a service that retrieves data from a local JSON file and uses it in a controller to display it in the browser, everything seems to be working well. Here is the code snippet: JavaScript Code: var myApp = angular.module("myApp", ...

What is the process for adding information to a MongoDB collection?

Working with NodeJS using Mongoose, I have defined two tables in db.js: const mongoose = require('mongoose') const UserSchema = new mongoose.Schema( { username: { type: String, required: true, unique: true }, email: { type ...

No action when clicking JQuery-ui Dialog button on IE11

I created a form using the following HTML structure: <div id="dialogGlobal" title="About You"> <form> <fieldset style="border: none;"> <ul style="list-style-type: none; padding-left: 0px"> <li><lab ...

Receive a notification when the div element stops scrolling

I am attempting to replicate Android's expandable toolbar within an Angular component. My HTML code appears as follows: <div (scroll)="someScroll($event)"> <div class="toolbar"></div> <div class="body"></div> </d ...

What is the reason behind observing numerous post requests in the Firebug console after submitting a form through Ajax in jQuery?

I have integrated the jquery Form plugin for form submission and everything seems to be functioning properly. However, upon turning on the firebug console and clicking the submit button, I notice that there are 10 post requests being sent with the same da ...

What steps are involved in setting up a Typescript-based custom Jest environment?

Currently, I am attempting to develop an extension based on jest-node-environment as a CustomTestEnvironment. However, I encountered an error when trying to execute jest: ● Test suite failed to run ~/git/my-application/tests/environment/custom-test ...

What is the best way to rotate a cube when it is clicked on?

My current project involves rotating a cube by clicking on buttons either on the cube itself or floating next to it. At the moment, I have them floating for easier testing purposes, but placing them directly on the cube is not an issue. The main issue I&a ...

Having trouble getting OrbitControls to function properly in Object-Oriented Programming (OOP)

Exploring the world of THREE.js and Object-oriented JavaScript. Here's the code I'm working with: https://gist.github.com/BobWassermann/581492be11db361c39ee While my browser is showing the correct output, I'm having trouble getting the Orb ...