Chrome Extension local storage not working

Question

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

Sudarshan · Accepted Answer · 2012-12-01 05:16:19Z

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

Thank you so much. This was great. Now I see what they mean "No inline" :D

Collectives™ on Stack Overflow

Chrome Extension local storage not working

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related