如何在Chrome扩展程序中从localstorage读写div的内容?

米纳斯·阿波维扬

我正在尝试构建一个扩展,该扩展将允许用户将一些参数放入弹出窗口的文本框中,使用该信息生成链接并将其添加到所述弹出窗口中。我已经完成了所有工作,但是不用说,每次用户重新打开扩展程序时,它都会被刷新。我希望保留其中的信息,但似乎无法使其正常工作。到目前为止,这是我所拥有的:

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] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在Chrome扩展程序中从localstorage读写div的内容?

来自分类Dev

如何在Chrome扩展程序内容脚本中获取错误堆栈跟踪?

来自分类Dev

如何在Chrome扩展程序内容脚本中获取错误堆栈跟踪?

来自分类Dev

如何自动测试Chrome扩展程序中的内容脚本?

来自分类Dev

如何取消Chrome扩展程序内容脚本中的事件绑定?

来自分类Dev

如何在chrome扩展内容脚本中确定CSS范围

来自分类Dev

在Chrome扩展程序中停止内容脚本

来自分类Dev

如何在Chrome扩展程序开发中获取选定的文本?

来自分类Dev

如何在Chrome扩展程序中获取发布数据

来自分类Dev

如何在Chrome扩展程序中实现小费罐?

来自分类Dev

我如何在Chrome扩展程序中嵌入网站

来自分类Dev

在Chrome扩展程序中,如何在停用时触发事件?

来自分类Dev

如何在Chrome扩展程序中动态运行后台脚本?

来自分类Dev

如何在Chrome扩展程序中插入通知操作按钮?

来自分类Dev

如何在Chrome扩展程序中实现小费罐?

来自分类Dev

如何在Chrome扩展程序中捕获下载进度

来自分类Dev

如何在Chrome扩展程序中缓存数据?

来自分类Dev

如何在Chrome扩展程序中更改表格的样式?

来自分类Dev

如何在Chrome扩展程序中动态运行后台脚本?

来自分类Dev

如何在 Chrome 中安装 Microsoft Edge 扩展程序(插件)

来自分类Dev

如何在 Chrome 扩展程序中隐藏 Firebase 凭据?

来自分类Dev

Chrome扩展程序和“ localStorage”属性中的异常行为

来自分类Dev

如何在Chrome扩展程序的内容脚本之间重复使用代码?

来自分类Dev

在chrome扩展程序中,如何使用内容脚本注入Vue页面

来自分类Dev

如何通过内容脚本在Chrome扩展程序中设置标志文本?

来自分类Dev

在Chrome扩展程序中,如何(或应该使用)缓存来提供本地内容?

来自分类Dev

Chrome扩展程序:如何全局捕获/处理内容脚本错误?

来自分类Dev

如何选择何时启动Chrome扩展程序的内容脚本?

来自分类Dev

Chrome 扩展程序是否有自己的 localStorage

Related 相关文章

  1. 1

    如何在Chrome扩展程序中从localstorage读写div的内容?

  2. 2

    如何在Chrome扩展程序内容脚本中获取错误堆栈跟踪?

  3. 3

    如何在Chrome扩展程序内容脚本中获取错误堆栈跟踪?

  4. 4

    如何自动测试Chrome扩展程序中的内容脚本?

  5. 5

    如何取消Chrome扩展程序内容脚本中的事件绑定?

  6. 6

    如何在chrome扩展内容脚本中确定CSS范围

  7. 7

    在Chrome扩展程序中停止内容脚本

  8. 8

    如何在Chrome扩展程序开发中获取选定的文本?

  9. 9

    如何在Chrome扩展程序中获取发布数据

  10. 10

    如何在Chrome扩展程序中实现小费罐?

  11. 11

    我如何在Chrome扩展程序中嵌入网站

  12. 12

    在Chrome扩展程序中,如何在停用时触发事件?

  13. 13

    如何在Chrome扩展程序中动态运行后台脚本?

  14. 14

    如何在Chrome扩展程序中插入通知操作按钮?

  15. 15

    如何在Chrome扩展程序中实现小费罐?

  16. 16

    如何在Chrome扩展程序中捕获下载进度

  17. 17

    如何在Chrome扩展程序中缓存数据?

  18. 18

    如何在Chrome扩展程序中更改表格的样式?

  19. 19

    如何在Chrome扩展程序中动态运行后台脚本?

  20. 20

    如何在 Chrome 中安装 Microsoft Edge 扩展程序(插件)

  21. 21

    如何在 Chrome 扩展程序中隐藏 Firebase 凭据?

  22. 22

    Chrome扩展程序和“ localStorage”属性中的异常行为

  23. 23

    如何在Chrome扩展程序的内容脚本之间重复使用代码?

  24. 24

    在chrome扩展程序中,如何使用内容脚本注入Vue页面

  25. 25

    如何通过内容脚本在Chrome扩展程序中设置标志文本?

  26. 26

    在Chrome扩展程序中,如何(或应该使用)缓存来提供本地内容?

  27. 27

    Chrome扩展程序:如何全局捕获/处理内容脚本错误?

  28. 28

    如何选择何时启动Chrome扩展程序的内容脚本?

  29. 29

    Chrome 扩展程序是否有自己的 localStorage

热门标签

归档