From 9786a9872f22b5b5db64185e1f0ef451cdde80ae Mon Sep 17 00:00:00 2001 From: smfahim25 Date: Tue, 10 Dec 2024 16:30:07 +0600 Subject: [PATCH] added new feature for javascript injection --- .idea/misc.xml | 1 + app/(tabs)/index.tsx | 298 +++++++++++++++++++++++++------------------ 2 files changed, 174 insertions(+), 125 deletions(-) diff --git a/.idea/misc.xml b/.idea/misc.xml index 6e86672..639900d 100644 --- a/.idea/misc.xml +++ b/.idea/misc.xml @@ -1,3 +1,4 @@ + diff --git a/app/(tabs)/index.tsx b/app/(tabs)/index.tsx index c7aa1c1..25bec4a 100644 --- a/app/(tabs)/index.tsx +++ b/app/(tabs)/index.tsx @@ -1,154 +1,202 @@ -import { Image, StyleSheet, Platform } from "react-native"; import { WebView } from "react-native-webview"; import { useRef } from "react"; export default function HomeScreen() { const webviewRef = useRef(null); - const injectedJavaScript = ` - function collectPostData(post) { - if (post.dataset.processed === "true") return; - const captionElement = post.querySelector("div.m div.m div[data-type='text'] div.native-text"); - let caption = captionElement ? captionElement.textContent.trim() : null; + const injectedJavaScript = ` let lastClickTime = 0; + const COOLDOWN_DURATION = 60000; + let buttonClicked = false; + let fullCaption = ""; + let imageUrls = []; - const imageElements = post.querySelectorAll("div.m.bg-s13 img"); - let imageURLs = []; - if (imageElements.length > 1) { - imageElements.forEach((imageElement) => { - if (imageElement.src) imageURLs.push(imageElement.src); - }); - } else if (imageElements.length === 1) { - const singleImageSrc = imageElements[0].src; - if (singleImageSrc) imageURLs.push(singleImageSrc); - } - console.log("Caption:", caption); - console.log("Image URLs:", imageURLs); + function collectPostData(post) { + if (post.dataset.processed === "true") return; - post.dataset.processed = "true"; + const captionElement = post.querySelector("div.m div.m div[data-type='text'] div.native-text"); + let caption = captionElement ? captionElement.textContent.trim() : null; - const button = document.createElement("button"); - button.textContent = "Check"; - button.innerHTML = button.textContent; + const imageElements = post.querySelectorAll("div.m.bg-s13 img"); + let imageURLs = []; + imageElements.forEach((imageElement) => { + if (imageElement.src) imageURLs.push(imageElement.src); + }); - button.style.position = "absolute"; - button.style.fontSize = "20px"; - button.style.right = "10px"; - button.style.bottom = "10px"; - button.style.background = "linear-gradient(135deg, #6a11cb, #2575fc)"; - button.style.color = "#fff"; - button.style.border = "none"; - button.style.padding = "12px 20px"; - button.style.borderRadius = "8px"; - button.style.cursor = "pointer"; - button.style.zIndex = 999999; - button.style.pointerEvents = "auto"; - button.style.display = "flex"; - button.style.justifyContent = "center"; - button.style.alignItems = "center"; - button.style.gap = "8px"; + if (buttonClicked) { + fullCaption = caption; + imageUrls.push(...imageURLs); + } + post.dataset.processed = "true"; - button.addEventListener("click", async () => { - button.disabled = true; - button.textContent = "Loading..."; - const seeMoreElement = post.querySelector("span[style*='color:#65676b']"); - if (seeMoreElement) { - handleSeeMoreClick(seeMoreElement, post, button); - } else { - collectDataImmediately(post, button); - } - }); + const button = createButton(post, caption, imageURLs); - if (caption && imageURLs.length > 0) { - post.style.position = "relative"; - post.appendChild(button); - } - } + if (caption && imageURLs.length > 0) { + post.style.position = "relative"; + post.appendChild(button); + } + } - function collectDataImmediately(post, button) { - const captionElement = post.querySelector("div.m div.m div[data-type='text'] div.native-text"); - let caption = captionElement ? captionElement.textContent.trim() : null; - const imageElements = post.querySelectorAll("div.m img"); - let imageURLs = []; - imageElements.forEach((imageElement) => { - if (imageElement.src) imageURLs.push(imageElement.src); - }); - if(caption && imageURLs){ - alert("good"); - } - console.log("Caption:", caption); - console.log("Image URLs:", imageURLs); + function createButton(post, initialCaption, initialImageURLs) { + const button = document.createElement("button"); + button.textContent = "Check"; - button.remove(); - } + Object.assign(button.style, { + position: "absolute", + fontSize: "20px", + right: "10px", + bottom: "10px", + background: "linear-gradient(135deg, #6a11cb, #2575fc)", + color: "#fff", + border: "none", + padding: "12px 20px", + borderRadius: "8px", + cursor: "pointer", + zIndex: 1000000, + display: "flex", + justifyContent: "center", + alignItems: "center", + gap: "8px", + pointerEvents: "auto", + transition: "all 0.3s", + }); - function handleSeeMoreClick(seeMoreElement, post, button) { - setTimeout(() => { - seeMoreElement.dispatchEvent(new PointerEvent("pointerdown", { bubbles: true })); - seeMoreElement.dispatchEvent(new PointerEvent("pointerup", { bubbles: true })); - seeMoreElement.click(); + button.addEventListener("click", (event) => { + event.stopPropagation(); + const currentTime = new Date().getTime(); - setTimeout(() => { - collectDataImmediately(post, button); - }, 1000); - }, 100); - } + if (currentTime - lastClickTime < COOLDOWN_DURATION) { + const remainingTime = Math.ceil((COOLDOWN_DURATION - (currentTime - lastClickTime)) / 1000); - function handleMutations(mutationsList) { - mutationsList.forEach((mutation) => { - if (mutation.type === "childList" || mutation.type === "subtree") { - const posts = document.querySelectorAll("div.m.bg-s3"); - posts.forEach((post) => { - if (!post.querySelector("button")) { - collectPostData(post); - } - }); - } - }); - } + // Fix template literal issue by using escape characters + button.textContent = "Wait " + remainingTime + "s"; // Change here + button.style.background = "linear-gradient(135deg, #a0a0a0, #c0c0c0)"; + button.style.cursor = "not-allowed"; + button.disabled = true; - const observer = new MutationObserver(handleMutations); - observer.observe(document.querySelector(".m"), { childList: true, subtree: true }); + const cooldownTimer = setInterval(() => { + const updatedRemainingTime = Math.ceil((COOLDOWN_DURATION - (new Date().getTime() - lastClickTime)) / 1000); - document.addEventListener("DOMContentLoaded", () => { - const posts = document.querySelectorAll("div.m.bg-s3"); - posts.forEach((post) => { - if (!post.dataset.processed) { - collectPostData(post); - } - }); - }); + if (updatedRemainingTime <= 0) { + clearInterval(cooldownTimer); + button.textContent = "Check"; + button.style.background = "linear-gradient(135deg, #6a11cb, #2575fc)"; + button.style.cursor = "pointer"; + button.disabled = false; + return; + } + + button.textContent = "Wait " + updatedRemainingTime + "s"; // Change here + }, 1000); + + return; + } + + lastClickTime = currentTime; + + button.disabled = true; + button.textContent = "Processing..."; + button.style.opacity = "0.5"; + + const seeMoreElement = post.querySelector("span[style*='color:#65676b']"); + + if (seeMoreElement) { + handleSeeMoreClick(seeMoreElement, post, button, initialCaption, initialImageURLs); + } else { + collectDataImmediately(post, button, initialCaption, initialImageURLs); + } + }); + + return button; + } + + function handleSeeMoreClick(seeMoreElement, post, button, initialCaption, initialImageURLs) { + const currentTime = new Date().getTime(); + setTimeout(() => { + seeMoreElement.click(); + + if (currentTime - lastClickTime < COOLDOWN_DURATION) { + buttonClicked = true; + } + + setTimeout(() => { + if (window.ReactNativeWebView) { + window.ReactNativeWebView.postMessage( + JSON.stringify({ + caption: fullCaption, + imageUrls: imageUrls, + }) + ); + } + alert( + JSON.stringify({ + caption: fullCaption, + imageUrls: imageUrls, + })); + button.textContent = "Processed"; + button.style.opacity = "0.7"; + button.disabled = true; + }, 2000); + }, 100); + } + function collectDataImmediately(post, button, initialCaption, initialImageURLs) { + const captionElement = post.querySelector("div.m div.m div[data-type='text'] div.native-text"); + let caption = captionElement ? captionElement.textContent.trim() : initialCaption; + + const imageElements = post.querySelectorAll("div.m img"); + let imageURLs = []; + imageElements.forEach((imageElement) => { + if (imageElement.src) imageURLs.push(imageElement.src); + }); + + if (imageURLs.length === 0) { + imageURLs = initialImageURLs; + } + + alert( + JSON.stringify({ + caption: fullCaption, + imageUrls: imageUrls, + })); + + button.textContent = "Processed"; + button.style.opacity = "0.7"; + button.disabled = true; + } + + // Mutation observer to handle new posts + function handleMutations(mutationsList) { + mutationsList.forEach((mutation) => { + if (mutation.type === "childList" || mutation.type === "subtree") { + document.querySelectorAll("div.m.bg-s3").forEach((post) => { + if (!post.querySelector("button")) { + collectPostData(post); + } + }); + } + }); + } + + const observer = new MutationObserver(handleMutations); + observer.observe(document.querySelector(".m"), { + childList: true, + subtree: true, + }); + + document.addEventListener("DOMContentLoaded", () => { + document.querySelectorAll("div.m.bg-s3").forEach((post) => { + if (!post.dataset.processed) { + collectPostData(post); + } + }); + }); `; return ( { - if (webviewRef.current) { - webviewRef.current.injectJavaScript(injectedJavaScript); - } - }} /> ); } - -const styles = StyleSheet.create({ - titleContainer: { - flexDirection: "row", - alignItems: "center", - gap: 8, - }, - stepContainer: { - gap: 8, - marginBottom: 8, - }, - reactLogo: { - height: 178, - width: 290, - bottom: 0, - left: 0, - position: "absolute", - }, -}); -- 2.45.3