我正在尝试构建一个扩展,该扩展将允许用户将一些参数放入弹出窗口的文本框中,使用该信息生成链接并将其添加到所述弹出窗口中。我已完成所有工作,但不用说,每次用户重新打开扩展程序时,它都会被刷新。我希望保留其中的信息,但似乎无法使其正常工作。到目前为止,这是我所拥有的:
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;
我的猜测是我需要一些类似的东西
localStorage['cointainer'] = document.getElementById('linkContainer');
在addCats()的末尾,并调用类似
function loadLocalStorage()
{
var container = document.getElementById('linkContainer');
container.innerHTML = localStorage['container'];
}
起初,但是这样做没有用。不知道出了什么问题。
另外,如果有其他方法来保存用户的添加内容,我会向他们开放。
localStorage仅支持存储字符串值。您不能存储整个HMTL元素。
localStorage['foo'] = 'bar';
localStorage['foo'] = JSON.stringify({'bar': 'baz'});
localStorage['foo'] = JSON.stringify(['bar', 'baz', 'qux']);
您将必须遍历要保存的元素列表,将字符串值放入数组中,然后JSON.stringify
再将其保存到localStorage。然后在加载时,将值从localStorage中拉出JSON.parse
,并为数组中的每个值创建新的HTML元素。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句