CODEWITHSUNDEEP
javascripthtmlgoogle-chrome-extensionlocal-storage
Cripto
Cripto

Reputation: 3751

Chrome Extension local storage not working

I have written a simple html page that has one input and three links.

"OK" --> Stores whatever is in the filed to local storage

"WhoamI" --> Alerts with the value that was saved to local storage

"Check" --> if that value is "asd", it replys with "asd" or not "Asd"

Pretty simple and I have tested this as just a regular html page and it works. All of the functions behave as they should.

Here is index.html

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> System Information </title>
<script src="main.js"></script>
</head>
<body>
<input type="text" name="text" id="text">
<a href="#" onclick="saveChanges(); return false">OK</a>
<a href="#" onclick="who(); return false">WhoAmI</a>
<a href="#" onclick="check(); return false">check</a>

</body>
</html>

and here is the javascript main.js

function saveChanges() {
  var theValue = text.value;

localStorage["ChromeLogin"] = theValue;
}
function who() {
    alert(localStorage["ChromeLogin"]);
}
function check(){
    var test = localStorage["ChromeLogin"];
    if (test == "asd"){
        alert("it is asd");
    }else{
        alert("It is NOT asd");
    }
}

enter image description here

However, when I import the same exact code as a google chrome extension, everything stops working.

Here is my manifest.json code. 

{
  "name": "testLocalStorage",
  "version": "0.0.1",
  "description": "Capture a tab",
  "options_page": "index.html",

  "manifest_version": 2,

  "browser_action": {
  "default_title": "Capture tab"
  },
  "permissions" : ["tabs", "<all_urls>", "storage"]
}

I am assuming this is the issue: Issue Screen shot

I read throughout this but I could not figure it out.

Any help will be appreciated

Thanks

Upvotes: 4

Views: 4552

Answers (1)

Sudarshan
Sudarshan

Reputation: 18564

It seems you did not completely understand the link you referred to :), there is an inline script section in referenced link, which says inline script will not be executed.

Changes Made to index.html

1) Removed all INLINE JS of

<a href="#" onclick="saveChanges(); return false">OK</a>

<a href="#" onclick="who(); return false">WhoAmI</a>

<a href="#" onclick="check(); return false">check</a>

to

<a href="#" id="ok">OK</a>

<a href="#" id="who">WhoAmI</a>

<a href="#" id="check">check</a>

by assigning id's

Final index.html

<html>
<head>
<title> System Information </title>
<script src="main.js"></script>
</head>
<body>
<input type="text" name="text" id="text">
<a href="#" id="ok">OK</a>
<a href="#" id="who">WhoAmI</a>
<a href="#" id="check">check</a>

</body>
</html>

Changes made to main.js

1) Added Event handlers to all 3 functions on click of <a/> tags as shown here

window.onload = function () {

document.getElementById('ok').onclick = saveChanges;
document.getElementById('check').onclick = check;
document.getElementById('who').onclick = who;

}

Final main.js

function saveChanges() {
  var theValue = text.value;

  localStorage["ChromeLogin"] = theValue;
}
function who() {
    alert(localStorage["ChromeLogin"]);
}
function check(){
    var test = localStorage["ChromeLogin"];
    if (test == "asd"){
        alert("it is asd");
    }else{
        alert("It is NOT asd");
    }
}
window.onload=function (){
    document.getElementById('ok').onclick=saveChanges;
    document.getElementById('check').onclick=check;
    document.getElementById('who').onclick=who;
}

Changes Made to manifest.json

1) Eliminated un-necessary permissions section in manifest.json

Final manifest.json

{
  "name": "testLocalStorage",
  "version": "0.0.1",
  "description": "Capture a tab",
  "options_page": "index.html",

  "manifest_version": 2,

  "browser_action": {
  "default_title": "Capture tab"
  }
}

Final Output

enter image description here

Upvotes: 3

Related Questions