I wish to make a chrome extension to get a forum to behave differently :

1) Load a thread on one page, no matter how many posts

2) Add a delete button to each post so that I'll never see that post again

When a page loads, I grab all the posts (divs) and save them :

chrome.storage.local.get(['posts'], function(result) {                                                                                                   
    var posts = Array.from(document.querySelectorAll('div[id^="post"]'))    
      .map(function(d) {
        var div = document.createElement("div");
        div.innerHTML = d.id;
        d.append(div);
        return d.innerHTML;
      });
    posts.push(...result.posts);
    chrome.storage.local.set({posts : posts}, function() {                      
      window.location.href = nextPage;
    });

When the save is over, I load the next page, rinse and repeat. Once all posts are saved, I restore them all on the last page.

I need each post/div id for the delete feature, but it is not part of the innerHTML. I could save the outerHTML, but it creates problems on restoring, as the node won't have a parentNode (the parentNode was on one of the other pages the script loaded, not on the last one).

Is there a better, more legible way than the 5-liner map() in my code, to save and restore what amounts to outerHTML?

Thanks to anyone who bothers reading this :)

1 Answers

0
pouzzler On

Instead of saving an array [innerHTML, ...], I saved an object {div_id : div_innerHTML, ....}.

This does not simplify the saving/restoring code as much as hoped for, but it simplifies the deleting code a lot, since object lookup by key is trivial.