Question

我正在尝试检索SVG图像，将其存储在本地，稍后在popup.js中使用它。检索由内容脚本完成：

   var svg = document.getElementById("svg");
        chrome.storage.local.set({'svg': svg}, function() {
            console.log(svg.localName === "svg"); //returns true
        });

不幸的是，弹出窗口似乎只是一个空对象。

chrome.storage.local.get("svg", function(svg) {
                console.log(svg.localName === "svg"); //returns false
});

我对Javascript和Chrome扩展程序几乎没有经验，所以我可能在这里做了一些非常愚蠢的事情。

Answer 1

chrome.storage用于JSON-ifiable对象，不适用于像DOM元素这样的复杂类实例。要检查存储空间使用Storage Area Explorer扩展名。

在您的情况下，存储外部HTML：

var svg = document.getElementById('svg');
chrome.storage.local.set({svg: svg.outerHTML});

然后从HTML中重新创建元素：

chrome.storage.local.get('svg', data => {
    var tmp = document.createElement('div');
    tmp.innerHTML = data.svg;
    var svg = tmp.firstElementChild;
    document.body.appendChild(svg);
});

或

chrome.storage.local.get('svg', data => {
    document.body.insertAdjacentHTML('beforeend', data.svg);
});

高级提示：在chrome.storage中存储大量 HTML /文本时，请考虑使用LZstring。

从网站检索SVG图像

1 个答案: