The buckets are sorted alphabetically. How do I know which bucket is the new one?

[hackersthan]

The buckets are sorted in alphabetical order, so we don't know latest bucket name. Buckets are mixed up when we have a lot of them.

I try using this code, and it works fine but not completely. Result

www.target.com
a.target.com

but newer buckets are stored like this

www.target.com
aneta.target.com
a.target.com
cdn.target.com

I almost fixed the order but then new bucket added to the near of its first character just like a here. aneta.target.com stored before the a.target.com, and cdn.target.com stored to the end.

I hope you understand what I mean.

---

I made these 2 changes in popup.js file

async function getBuckets() {
    buckets = await storage.get();
    if (noOfBuckets) {
      Object.keys(buckets).filter(key => !noOfBuckets.includes(key)).forEach(key => noOfBuckets.push(key));
    } else {
      noOfBuckets = Object.keys(buckets);
    }
    return noOfBuckets;
}

async function displayBucket() {
    if (noOfBuckets.length == 0) return;
    for (let i = noOfBuckets.length - 1; i >= 0; i--) {
      let bucket = noOfBuckets[i];
      const divElement = document.createElement("div");
      divElement.classList.add("bucket");
      const iElement = document.createElement("i");
      iElement.classList.add("down");
      const div2Element = document.createElement("div");
      div2Element.classList.add("bucketName");
      const pElement = document.createElement("p");
      const pTextElement = document.createTextNode(bucket);
      pElement.appendChild(pTextElement);
      div2Element.appendChild(pElement);
      const aElement = document.createElement("a");
      aElement.href = "";
      aElement.classList.add("bucketDelete");
      const div3Element = document.createElement("div");
      const divTextElement = document.createTextNode("Delete");
      div3Element.appendChild(divTextElement);
      aElement.appendChild(div3Element);
      divElement.append(iElement, div2Element, aElement);
      const div4Element = document.createElement("div");
      div4Element.classList.add("bucketContent");

      let perms = buckets[bucket],
        permsName = Object.keys(perms);
      for (let perm of permsName) {
        const p2Element = document.createElement("p");
        const bElement = document.createElement("b");
        const bTextElement = document.createTextNode(perm);
        bElement.appendChild(bTextElement);
        const brElement = document.createElement("br");
        const p2TextElement = document.createTextNode(perms[perm]);
        p2Element.append(bElement, brElement, p2TextElement);
        div4Element.appendChild(p2Element);
      }
      const finalDiv = document.createElement("div");
      finalDiv.append(divElement, div4Element);
      document.getElementById("content").appendChild(finalDiv);
    }
}

And fix the save button too, because it also downloads bucket in alphabetically order.

[hackersthan]

I just realise that my code is just make the buckets order to reverse alphabetic. 😅😂

[AlecBlance]

Thank you @hackersthan. I'll be revamping / refactoring this extension later today, I'll make sure to add this in my tasks.