How to read & write contents of a div from localstorage in chrome extensions?
Posted
by
Minas Abovyan
on Stack Overflow
See other posts from Stack Overflow
or by Minas Abovyan
Published on 2014-05-31T01:27:11Z
Indexed on
2014/05/31
3:26 UTC
Read the original article
Hit count: 140
JavaScript
|google-chrome-extension
I am trying to build an extension that will allow users to put some parameters into a text box in the popup, generate a link using that information and add it to the said popup. I have all that working, but needless to say, it gets flushed every time the user opens the extension anew. I'd like the info that has been put in there to stay, but can't seem to get it to work. Here's what I have thus far:
manifest.json
{
"manifest_version": 2,
"name": "Test",
"description": "Test Extension",
"version": "1.0",
"permissions": [
"http://*/*",
"https://*/*"
],
"browser_action": {
"default_title": "This is a test",
"default_popup": "popup.html"
}
}
popup.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="linkContainer"/>
<input type="text" id="catsList"/>
<button type="button" id="addToList">Add</button>
<script src="popup.js"></script>
</body>
</html>
popup.js
function addCats()
{
var a = document.createElement('a');
a.appendChild(document.createTextNode(document.getElementById('catsList').value));
a.setAttribute('href', 'http://google.com');
var p = document.createElement('p');
p.appendChild(a)
document.getElementById('linkContainer').appendChild(p);
indexLinks()
}
function indexLinks()
{
var links = document.getElementsByTagName("a");
for (var i = 0; i < links.length; i++)
{
(function ()
{
var ln = links[i];
var location = ln.href;
ln.onclick = function ()
{
chrome.tabs.create({active: true, url: location});
};
})();
}
};
document.getElementById('addToList').onclick = addCats;
My guess is that I need something along the lines of
localStorage['cointainer'] = document.getElementById('linkContainer');
at the end of addCats() and a call to something like
function loadLocalStorage()
{
var container = document.getElementById('linkContainer');
container.innerHTML = localStorage['container'];
}
at the beginning, but doing that didn't work. Not sure what's going wrong.
Also,if there is a different way to save users' additions, I'd be open to them.
© Stack Overflow or respective owner
