blur_unblur_fb_mess

blur_unblur_fb_mess.js

// Cái hàm để add sự kiện
function toggle_blur(messDiv){
	// Add event listeners to handle hover effect
	messDiv.addEventListener("mouseover", function() {
	  this.style.filter = "none"; // Remove blur on hover
	});

	messDiv.addEventListener("mouseout", function() {
	  this.style.filter = "blur(5px)"; // Add blur when not hovering
	});
}

function getElementByXPath(xpath) {
  var result = document.evaluate(xpath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null);
  return result.singleNodeValue;
}


/*
 Add CSS
*/
var style = document.createElement("style");

// Define the CSS rules
// Cái này tính set style cho từng element, mà nghĩ lại sao mình ko tự thêm class riêng rồi gọi, thế là có cái chỗ này
var css = ".blur_noidung { filter: blur(5px); transition: filter 0.3s; }" +
		  "blur_noidung:hover { filter: none; }";

// Set the CSS rules as the style element's innerHTML
style.innerHTML = css;

// Append the style element to the head of the document
document.head.appendChild(style);

/*
 Get all mess div
*/

/*
 - Cái chỗ này ban đầu tính lấy nguyên div to theo id, xong phát hiện id fb nó chơi random, ko lần nào giống lần nào, lấy class cũng thế
 - Rồi tính lấy theo xpath cũng ko xong
 - Nghía lên trên nên kế thừa đoạn querySelectorAll, nó được cái nó select luôn các group bên trái cũng hay
*/
// var messDiv = document.getElementById(":rd:");
var messDiv = document.querySelectorAll("a[href*='/t/']");

// Nảy ý định blur luôn nội dung tin nhắn
// Ai nâng cấp chỗ này lên giúp nhá =))

// Blur all
for (var i = 0; i < messDiv.length; i++) {
  // messDiv[i].style.filter = "blur(5px)";
  messDiv[i].classList.add("blur_noidung");
  toggle_blur(messDiv[i]);
}

blur_facebook.mp4