了解如何开发“ WhatsApp Web”前端页面

Question

I'm trying to understand how the WhatsApp Web front-end page was created, especially the list of contacts on the left side ( <div id="pane-side"> ). The name of the contacts uses the class "emojitext ellipsify" and I am trying to get the name of all contacts by the code:

var contatosTemp = document.getElementsByClassName('emojitext ellipsify');
var contatos = [];
for (var i = 0; i < contatosTemp.length; i = i + 2) { contatos.push(contatosTemp[i].innerText); }
contatos

If the scroll of the list of contacts is at top, the number of contatos are 19 . But if I scroll the list, the number of contatos is increased until the number of 29 . If I minimize the window, the number of contatos is decreased to 15 .

At resume, the number of the list of contacts caught by the JavaScript above changes when the user scrolls the list of contacts.

If you want to understand what I am doing, open your WhatsApp Web , go to browser DevTools > Console and run the JavaScript above.

You will see the size of the array contatos :

Then scroll the pane at left side of screen and execute the JavaScript again. It will show that the array size changed.

I would like to get all the contacts' names but JavaScript only gets part of it. How can I do that?

Answer 1

Use this script that will bring you all the contacts

function contactList(){
   var user = Store.Chat.models; 
   var destiny = [];

   user.forEach(function(obj){destiny.push(obj.__x_formattedTitle)});
   return destiny }