为什么我的 Google Chrome 扩展没有使用 Set() 正确保存数据？

Question

我正在尝试创建一个能够记住我访问过的一些网站的扩展程序。当我按下扩展时，有一个按钮（允许用户保存选项卡的当前 URL 和标题）和一个“a”元素，它将重定向到已保存的 URL。这个想法是让它能够保存不同的 URL，但首先我希望它能够保存一个。

有人告诉我用 Set() 来做。我有代码，但出了点问题，所以当我用最后保存的元素按下“a”元素时，它会打开那个方向：chrome-extension://the_key_of_my_extension/[object%20Set%20Iterator] 或：chrome-extension://the_key_of_my_extension/[undefined].

我做错了什么？我已经搜索了一段时间，但没有发现任何错误。谢谢！

var urlSet = new Set();
var titleSet = new Set();

chrome.storage.sync.get(["activeTab", "nameOfTheTab"], function(items){
  urlSet.add(items.activeTab);
  titleSet.add(items.nameOfTheTabs);

  document.getElementById('urlDude').href = [...urlSet];
  document.getElementById('urlDude').innerHTML = [...titleSet];
  
});

saveItem.onclick = function(element) {
  chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {

    urlSet.add(tabs[0].url);
    titleSet.add(tabs[0].title);

    chrome.storage.sync.set({ "activeTab": [...urlSet] }, function(){  });
    chrome.storage.sync.set({ "nameOfTheTab": [...titleSet] }, function(){  });
    document.getElementById('urlDude').href = [...urlSet];
    document.getElementById('urlDude').innerHTML = [...titleSet];

 });
};

<!DOCTYPE html>
  <html>
    <head>
      <link rel="stylesheet" href="./popus.css">
    </head>
    <body>
      <button id="saveItem">save</button>
      <script src="popup.js"></script>
      <br>
      <br>
      <a id="urlDude" target="_blank"><p>Hola</p></a>
      <a id="urlDude2" target="_blank"><p>Hola2</p></a>
    </body>
  </html>

更新：

这是我现在拥有的：

var urlSet = new Map();

chrome.storage.sync.get(["activeTabs"], function(items){
if(!items.activeTabs)
 return;
urlSet = new Map(JSON.parse(items.activeTabs));
AddLinks();
});

function AddLinks()
{
  var myLinks="";
  urlSet.forEach(function(value, key) {
    //myLinks+="<a href='"+value+"' target='_blank'>"+key+"</a> <span>X</span><br>";

    pushingData(value, key);
  });

  //document.getElementById('mydiv').innerHTML  = myLinks; 
}

saveItem.onclick = function(element) {
  chrome.tabs.query({active: true}, function(tabs) {

  urlSet.set(tabs[0].title, tabs[0].url);

  chrome.storage.sync.set({ "activeTabs":JSON.stringify(Array.from(urlSet.entries())) });
  pushingData(tabs[0].url, tabs[0].title);
  });
};

function pushingData(value, key) {
  var atags = document.createElement("a");
    atags.href = value;
    atags.innerHTML = key;
    
    document.getElementById('mydiv').append(atags);

    var newButton = document.createElement("button");
    newButton.innerHTML = "x";
    newButton.addEventListener('click', function() { urlSet.delete(key); });

    document.getElementById('mydiv').append(newButton);
    
    var breakLine = document.createElement("br");
    document.getElementById('mydiv').append(breakLine);
};

Answer 1

我在我的扩展程序中尝试了您的代码（稍作修改）并且它有效，所以我怀疑您之前的尝试可能导致存储卡住了一些东西。这是我得到的：

var urlSet = new Map();

chrome.storage.sync.get(["activeTabs"], function(items){
if(!items.activeTabs)
 return;
urlSet = new Map(JSON.parse(items.activeTabs));
AddLinks();
});

function AddLinks()
{
  //There are better ways of doing this!
  var myLinks="";
  urlSet.forEach(function(value, key) {
    myLinks+="<a href='"+value+"' target='_blank'>"+key+"</a>";
  });

  // You may want to come up with a way to delete links 
  //before they get out of control and proclaim independence 
  document.getElementById('mydiv').innerHTML  = myLinks; 
}

saveItem.onclick = function(element) {
  chrome.tabs.query({active: true}, function(tabs) {

  urlSet.set(tabs[0].title, tabs[0].url);

  chrome.storage.sync.set({ "activeTabs":JSON.stringify(Array.from(urlSet.entries())) });
  AddLinks();
  });
};

更新似乎将内联脚本添加到弹出窗口会导致安全问题。虽然可能会将您的页面列入白名单以使用其自己的脚本，但添加新元素的更好方法是使用 document.createElement 创建它们，而不是生成刺痛，让您了解它的外观：

 var delButton = document.createElement("button");
delButton.innerHTML = "delete";
delButton.addEventListener('click',function(){/*something useful happens here*/});
document.getElementById('mydiv').append(delButton);

为什么我的 Google Chrome 扩展没有使用 Set() 正确保存数据？

Why my Google Chrome extension isn't saving data correctly using a Set()?

html

javascript

google-chrome

google-chrome-extension

visual-studio-code