I am actually creating a chrome extension which creates some tabs in whatsapp web like all, unread, groups etc. And when we select any of these tabs it will filter out the list of contacts on the left bases on the tab.

The issue is that the html structure of the whatsapp chat is very unusual. It is using position:absolute for all the elements of list and use translateY and change it to create a list vertically.

One more thing. The actual number of html elements in list at max goes to 18 and at min can be 0. I cannot understand how they are handling this.

Here is my filter chat function. For now I have only two tabs all and unread. But its not working. When I go to 'unread' and come back to 'all' its showing less results...

const filterChatList = () => {
   //Selects the active tab
   const activeTab = document.querySelector(".ext-tab.active");
   if (activeTab) {
      const chatListWrapper = document.querySelector("._3uIPm"); //The element in which all list items are.
      const name = activeTab.name; //Get the name of tab like "all" | "unread"
      let chatsToShow = [...document.querySelectorAll("._3m_Xw")]; //List of all the items of list

      //Hide all the items first.
      chatsToShow.forEach((x) => {
         x.style.display = "none";
      });
      //Checking if selected tab is "unread"
      if (name === "unread") {
         //Filter out the only chats which have that green unread circle with them
         chatsToShow = chatsToShow.filter((x) => x.querySelector(".aumms1qt"));
      }
      //Change the total height of wrapper
      chatListWrapper.style.height = 72 * chatsToShow.length + "px";
      //Then only display the required items and change their translateY sequentially.
      //Note height of each item is 72.
      chatsToShow.forEach((x, i) => {
         x.style.display = "block";
         x.style.transform = `translateY(${72 * i})`;
      });
   }
};

I am unable to know how we can filter out the chats of the elements. I know the above approach is not correct because if we select all elements we only get 18 elements and chatlist can be longer.

Isn't there any library or any api kind of thing so we can filter the results we want. Many extensions have this tabs feature but there code is bundled so I can't get anything out of it.

If you know any good way of achieving this please let me know. I will be thankful. If any questions feel free to ask.

Here is the link to whatsappweb