为什么我的 Google Chrome 扩展程序无法使用 Set() 正确保存数据？
我正在尝试创建一个扩展程序，它能够记住我访问过的一些网站。当我按下扩展程序时，会出现一个按钮（允许用户保存选项卡的当前 URL 和标题）和一个“a”元素，该元素将重定向到保存的 URL。这个想法是让它能够保存不同的 URL，但首先我希望它能够保存一个。
有人告诉我用 Set() 来做到这一点。我有代码，但出了点问题，所以当我按下最后保存的元素的“a”元素时，它会打开那个 Direction: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>
SMILET1回答
-
墨色风雨
我在我的扩展中尝试了您的代码（进行了一些细微的修改）并且它有效，所以我怀疑您之前的尝试可能导致存储中卡住了一些东西。这是我所得到的：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);
随时随地看视频慕课网APP
相关分类
JavaScript