not working for archived chats

[tusharnankani]

blur not working for archived chats

• side chat list for archive
• whatsapp chat name

Credits: Hritik Sharma

[kana800]

Hi,

I love this project !!
Also I am not that good at js so take this with a grain of salt.

---

Replicating the Bug

I tested out the code; currently when we are selecting chatList, Only div element with side gets selected;

---

The reason that archived isn't getting selected is cause its created in another place.

Maybe Solution?

We can get rid of the archive panel left-drawer if we select the data-testid=drawer-left attribute.

let chatList = document.querySelectorAll('[data-testid=drawer-left]');
// NodeList [div.ldL67._2i3T7._1cpSb]

Executing the above code will give us the attributes with drawer-left. Then we can blur it

chatList[0] ? chatList[0].style.filter = "blur(10px)" : " ";
// Should Run a For Loop Here 🤷🏽 

2022-10-12.13-42-06_Trim.mp4

Let me know what you think

References

• stackoverflow get attribute by testid

[tusharnankani]

Hi @kana800
Thank you SO much for this! I appreciate it :D

I was a little afraid of using these HTML attributes for a reason.
You see, WhatsApp does a pretty good job with the class names; but my conjecture was that there must have been a reason with some specifc class names like color-${i} or an id like side or panel-side

That's why changed the previous implementation.

blurrit/content.js

Lines 5 to 17 in 94ab183

	/*
	Multiple problems
	0. Blurs <forwarded> instead of name.
	1. Doesn't blur names for above a <sent media>; because of `.copyable-text`.
	2. Doesn't blur names in tagged messages.
	*/
	// for (let text of whatsappMessageTexts) {
	// let textSibling = text.parentElement.firstChild;
	// if(textSibling != text) {
	// textSibling.style.filter = "blur(4px)";
	// }
	// }

For example (an old project): An implementation like this has to be updated if the HTML tree, elements or attributes are changed by the owner.

So, I have been wanting to look for common patterns instead of using HTML tree struct or exploring different HTML attributes; that might be bound to change.

Let me know your thoughts about this?

[kana800]

@tusharnankani

For example (an old project): An implementation like this has to be updated if the HTML tree, elements or attributes are changed by the owner.

That is totally understandable; It would be pain if you have to update every time the web app gets updated.

So, I have been wanting to look for common patterns instead of using HTML tree struct or exploring different HTML attributes; that might be bound to change.

web dev in general isn't my strong suit so I don't have any idea on how to approach something like this.

I looked at some other implementation.
For example in this repo they have used class-id to figure out the elements in the web-app;

[tusharnankani]

web dev in general isn't my strong suit so I don't have any idea on how to approach something like this.

No problem at all!

I looked at some other implementation.
For example in this repo they have used class-id to figure out the elements in the web-app;

Damn, that is interesting. I believe this (hardcoded) implementation is always scary.
Let's go with this approach if we are not able to find a potential fix to it.