De hecho, estoy creando una extensión de Chrome que crea algunas pestañas en la web de WhatsApp como todos, no leídos, grupos, etc. Y cuando seleccionamos cualquiera de estas pestañas, filtrará la lista de contactos en las bases de la izquierda en la pestaña.

El problema es que la estructura html del chat de whatsapp es muy inusual. Está usando position:absolute para todos los elementos de la lista y usa translateY y cámbialo para crear una lista verticalmente.

Una cosa más. El número real de elementos html en la lista en el máximo es 18 y en el mínimo puede ser 0. No puedo entender cómo están manejando esto.

Aquí está mi función de filtro de chat. Por ahora solo tengo dos fichas todas y sin leer. Pero no funciona. Cuando voy a 'no leído' y vuelvo a 'todos', muestra menos resultados...

 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})`; }); } };

No puedo saber cómo podemos filtrar los chats de los elementos. Sé que el enfoque anterior no es correcto porque si seleccionamos todos los elementos, solo obtenemos 18 elementos y la lista de chat puede ser más larga.

¿No hay ninguna biblioteca ni ningún tipo de API para que podamos filtrar los resultados que queremos? Muchas extensiones tienen esta función de pestañas, pero el código está incluido, por lo que no puedo obtener nada de él.

Si conoce alguna buena manera de lograr esto, hágamelo saber. Voy a estar agradecido. Si tiene alguna pregunta, no dude en preguntar.

Aquí está el enlace a whatsappweb