從網站檢索SVG圖像

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的對象，不適用於複雜的類實例，如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。