I tried your code (with some slight modifications) in my extension and it worked, so I suspect there might be something stuck in the storage from your previous attempts. Here's what I've got:
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();
});
};
UPDATE Seems like adding inline scripts to the popup is causing security issuer. While it is probably possible white-list your page to use its own script a better way of adding new elements is creating them with document.createElement, rather than generating a sting, to give you an idea of how it may look:
var delButton = document.createElement("button");
delButton.innerHTML = "delete";
delButton.addEventListener('click',function(){/*something useful happens here*/});
document.getElementById('mydiv').append(delButton);
Hey! Thanks for your answer! This worked for me. Just for finish, I've never used a Map. What is the syntax for deleting a specific item from the array? Thanks!
Glad to help! To delete use urlSet.delete('Title of the page you want to delete')
Me again. :( I try to delete an url of the list, but I get an error! I'm trying to make that, when I hover the mouse into the title of the url in the extension, it gets deleted. I added to every a tag the onmousehover event, and this linked to a function. But this isn't working, because I get
Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'self' blob: filesystem:". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution.What's wrong? Thanks!I'm not sure how you're doing it, but how are you planning to click on URLs if hovering over them is deleting them? Why not to add a button next to the 'a' tag?
You're right, that would be a bad idea haha. It's better the button. But my trouble is that I can't execute inline code. I'm trying to make the delete button, but I can't. How can I get the title of the specific link I'm clicking?