Corrected a typo in the Readme. Added a giant div to signal that all …

…of the followers have been messaged. Saved the user's greeting message to storage. replaced insertText with insertHTML so that the rich text is inserted in the Twitter DM.
Go-Ideal-Software-LLC · Oct 30, 2023 · a0a9ba8 · a0a9ba8
1 parent 4df15ca
commit a0a9ba8
Show file tree

Hide file tree

Showing 6 changed files with 83 additions and 34 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 <img src="src/assets/img/launching-buddy-logo-128.png" width="64"/>
 
-# Launching Buddy is a Chrome Extension that automatically messages all of your Product Hunt followers with Twitter accounts via Twitter DM
+# Launching Buddy is a Chrome Extension that automatically messages all of your Product Hunt followers Twitter accounts via Twitter DM
 
 <!-- [![npm](https://img.shields.io/npm/v/chrome-extension-boilerplate-react)](https://www.npmjs.com/package/chrome-extension-boilerplate-react)
 [![npm-download](https://img.shields.io/npm/dw/chrome-extension-boilerplate-react)](https://www.npmjs.com/package/chrome-extension-boilerplate-react)

diff --git a/src/pages/Background/index.ts b/src/pages/Background/index.ts
@@ -1,7 +1,4 @@
 import { MESSAGES, RESPONSES } from '../../utils/MESSAGES_CONST';
-console.log('This is the background page.');
-console.log('Put the background scripts here.');
-
 
 const navigateToProfile = (twitterDmText: string) => {
     const timeIntervalForNavigatingToProfile = setInterval(async () => {
@@ -40,7 +37,8 @@ const navigateToFollowersProfiles = async () => {
             navigateToFollowersTwitterProfile();
             // do the twitter messaging stuff
         } else if (response === RESPONSES.COMPLETED_ALL_FOLLOWERS) {
-            console.log('completed all followers');
+            console.log('Successfully messaged all followers!');
+            completedMessagingAllFollowers();
         }
     }
 }
@@ -77,8 +75,8 @@ const selectTwitterDMIcon = async () => {
             } else if (response === RESPONSES.NO_TWITTER_DM_ICON_FOUND) {
                 clearInterval(timeIntervalForSelectingTwitterDMIcon);
                 console.log('no twitter dm icon found');
-                navigateToFollowersProfiles();
                 // should navigate back to followers and increment ot the next one
+                navigateToFollowersProfiles();
             }
         }
     }, 3000);
@@ -94,26 +92,32 @@ const sendTwitterDM = () => {
                 clearInterval(timeIntervalForSendingTwitterDM);
                 console.log('sent twitter dm!');
                 navigateToFollowersProfiles();
-                // sendTwitterDM();
             }
         }
     }, 3000);
 }
 
+const completedMessagingAllFollowers = async () => {
+    const [tab] = await chrome.tabs.query({ active: true, lastFocusedWindow: true });
+    if (tab) {
+        const response = await chrome.tabs.sendMessage(tab.id as number, { message: MESSAGES.SUCCESSFULLY_MESSAGED_ALL_PRODUCT_HUNT_FOLLOWERS });
+        if (response === RESPONSES.NAVIGATED_TO_PRODUCT_HUNT) {
+            displaySuccessfulCompletedDiv();
+        }
+    }
+}
 
+const displaySuccessfulCompletedDiv = async () => {
+    const [tab] = await chrome.tabs.query({ active: true, lastFocusedWindow: true });
+    if (tab) {
+        const response = await chrome.tabs.sendMessage(tab.id as number, { message: MESSAGES.DISPLAY_SUCCESSFUL_COMPLETED_DIV });
+    }
+}
 
 
 chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
     console.log('message:', message);
     if (message.message === MESSAGES.NAVIGATE_TO_PROFILE_SERVICE_WORKER) {
         navigateToProfile(message.twitterDmText);
     }
-
-    // else if (message.message === MESSAGES.DONE_SAVING_FOLLOWERS) {
-    //     navigateToFollowersProfiles();
-    // }
-
-    // else if (message.message === MESSAGES.NAVIGATE_TO_TWITTER_PROFILE_FROM_PRODUCTHUNT) {
-    //     selectTwitterDMIcon();
-    // }
 });
diff --git a/src/pages/Content/index.ts b/src/pages/Content/index.ts
@@ -66,19 +66,50 @@ const selectTwitterDMTextInput = async (sendResponse: (response?: any) => void)
     const rootDiv = document.querySelector(
         ".public-DraftEditorPlaceholder-inner"
     );
+    const sendButton = document.querySelector('[data-testid="dmComposerSendButton"]') as HTMLButtonElement;
     // Simulate a click event on the element
     var event = new MouseEvent("click", {
         bubbles: true,
         cancelable: true,
         view: window,
     });
     const currentFollowerName = await getCurrentFollowerName();
-    const twitterDM = twitterDMText.replace(/{{FIRST_NAME}}/g, currentFollowerName);
+    let twitterDM = twitterDMText.replace(/{{FIRST_NAME}}/g, currentFollowerName);
+    twitterDM = twitterDM.replace(/\n/g, '<br>');
     rootDiv?.dispatchEvent(event);
-    document.execCommand("insertText", false, twitterDM);
+    document.execCommand("insertHTML", false, twitterDM);
+    sendButton.click();
     sendResponse(RESPONSES.SENT_TWITTER_DM);
 }
 
+const navigateToProductHunt = (sendResponse: (response?: any) => void) => {
+    sendResponse(RESPONSES.NAVIGATED_TO_PRODUCT_HUNT);
+    window.location.href = "https://www.producthunt.com";
+}
+
+const displaySuccessfulCompletedDiv = () => {
+    let div = document.createElement('div');
+
+    // Set the div's style properties
+    div.style.position = 'fixed';
+    div.style.top = '0';
+    div.style.left = '0';
+    div.style.width = '100vw';
+    div.style.height = '100vh';
+    div.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
+    div.style.color = 'green';
+    div.style.display = 'flex';
+    div.style.justifyContent = 'center';
+    div.style.alignItems = 'center';
+    div.style.zIndex = '1000';
+
+    // Set the div's text
+    div.textContent = 'Successfully messaged all followers';
+
+    // Append the div to the body
+    document.body.appendChild(div);
+}
+
 chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
     if (message.message === MESSAGES.NAVIGATE_TO_PROFILE_FOLLOWERS) {
         console.log('Content script is trying to navigate to the profile');
@@ -91,8 +122,7 @@ chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
             sendResponse(RESPONSES.SUCCESSFULLY_NAVIGATED_TO_USER_PRODUCTHUNT_PROFILE);
             window.location.href = followerLink;
         }
-    }
-    else if (message.message === MESSAGES.SCROLL_ALL_FOLLOWERS) {
+    } else if (message.message === MESSAGES.SCROLL_ALL_FOLLOWERS) {
         console.log('Content script is scrolling down the page');
         const xpathForFollowerContainerDiv = '//*[@id="__next"]/div[3]/main/div[1]/div[2]';
         let lastFollowerCount = -1;
@@ -122,19 +152,18 @@ chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
                 sendResponse(RESPONSES.SAVED_ALL_FOLLOWERS);
             }
         }, 3000);
-    }
-
-    else if (message.message === MESSAGES.NAVIGATE_TO_FOLLOWERS_PROFILES) {
+    } else if (message.message === MESSAGES.NAVIGATE_TO_FOLLOWERS_PROFILES) {
         navigateToFollowerProfile(sendResponse);
-    }
-    else if (message.message === MESSAGES.NAVIGATE_TO_TWITTER_PROFILE) {
+    } else if (message.message === MESSAGES.NAVIGATE_TO_TWITTER_PROFILE) {
         navigateToTwitterProfile(sendResponse);
-    }
-    else if (message.message === MESSAGES.SELECT_TWITTER_DM_ICON) {
+    } else if (message.message === MESSAGES.SELECT_TWITTER_DM_ICON) {
         selectTwitterDMIcon(sendResponse);
-    }
-    else if (message.message === MESSAGES.SEND_TWITTER_DM) {
+    } else if (message.message === MESSAGES.SEND_TWITTER_DM) {
         selectTwitterDMTextInput(sendResponse);
+    } else if (message.message === MESSAGES.SUCCESSFULLY_MESSAGED_ALL_PRODUCT_HUNT_FOLLOWERS) {
+        navigateToProductHunt(sendResponse);
+    } else if (message.message = MESSAGES.DISPLAY_SUCCESSFUL_COMPLETED_DIV) {
+        displaySuccessfulCompletedDiv();
     }
     return true;
 }

diff --git a/src/pages/Popup/Popup.css b/src/pages/Popup/Popup.css
@@ -11,6 +11,11 @@
   height: 100%;
 }
 
+.launch-buddy-text-area {
+  min-height: 280px;
+  min-width: 500px;
+}
+
 .launch-buddy-popup-logo {
   height: 40vmin;
   pointer-events: none;

diff --git a/src/pages/Popup/Popup.tsx b/src/pages/Popup/Popup.tsx
@@ -1,31 +1,38 @@
 import React, { ChangeEvent, useEffect, useState } from 'react';
 import logo from '../../assets/img/launching-buddy-logo.png';
-import { MESSAGES } from '../../utils/MESSAGES_CONST';
+import { MESSAGES, STORAGE_KEYS } from '../../utils/MESSAGES_CONST';
 import './Popup.css';
 
 const Popup = () => {
-  const [urlOfProduct, setURLOfProduct] = useState<string>("");
+  const [twitterDMMessage, setTwitterDMMessage] = useState<string>("");
 
   const navigateToProductHunt = async () => {
     await chrome.tabs.query({ active: true, currentWindow: true }, tabs => {
       let currentTabId = tabs[0].id as number;
       chrome.tabs.update(currentTabId, { url: "https://www.producthunt.com" });
-      chrome.runtime.sendMessage({ message: MESSAGES.NAVIGATE_TO_PROFILE_SERVICE_WORKER, twitterDmText: urlOfProduct });
+      chrome.runtime.sendMessage({ message: MESSAGES.NAVIGATE_TO_PROFILE_SERVICE_WORKER, twitterDmText: twitterDMMessage });
     });
   }
 
   const onProductURLChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
-    setURLOfProduct(event.target.value);
+    setTwitterDMMessage(event.target.value);
+    chrome.storage.local.set({ [STORAGE_KEYS.TWITTER_DM_TEXT_POPUP]: event.target.value });
   }
 
+  useEffect(() => {
+    chrome.storage.local.get([STORAGE_KEYS.TWITTER_DM_TEXT_POPUP], function (result) {
+      setTwitterDMMessage(result[STORAGE_KEYS.TWITTER_DM_TEXT_POPUP] || "");
+    });
+  }, []);
+
   return (
     <div className="launch-buddy-popup-container">
       <img src={logo} className="launch-buddy-popup-logo" alt="logo" />
       <div className='launch-buddy-popup-container__product-url'>
-        <textarea className='' placeholder="https://www.producthunt.com/posts/launching-buddy" value={urlOfProduct} onChange={(event) => onProductURLChange(event)}></textarea>
+        <textarea className='launch-buddy-text-area' placeholder="https://www.producthunt.com/posts/launching-buddy" value={twitterDMMessage} onChange={(event) => onProductURLChange(event)}></textarea>
       </div>
       <div className={`launch-buddy-popup-container__start-button`}>
-        <button disabled={urlOfProduct.length === 0} className='' onClick={(event) => navigateToProductHunt()}>Start Messaging Campaign</button>
+        <button disabled={twitterDMMessage.length === 0} className='' onClick={(event) => navigateToProductHunt()}>Start Messaging Campaign</button>
       </div>
     </div>
   );

diff --git a/src/utils/MESSAGES_CONST.ts b/src/utils/MESSAGES_CONST.ts
@@ -10,6 +10,8 @@ export const MESSAGES = {
     NO_TWITTER_PROFILE: 'NO_TWITTER_PROFILE',
     NAVIGATE_TO_TWITTER_PROFILE: 'NAVIGATE_TO_TWITTER_PROFILE',
     SEND_TWITTER_DM: 'SEND_TWITTER_DM',
+    SUCCESSFULLY_MESSAGED_ALL_PRODUCT_HUNT_FOLLOWERS: 'SUCCESSFULLY_MESSAGED_ALL_PRODUCT_HUNT_FOLLOWERS',
+    DISPLAY_SUCCESSFUL_COMPLETED_DIV: 'DISPLAY_SUCCESSFUL_COMPLETED_DIV',
 }
 
 export const RESPONSES = {
@@ -22,10 +24,12 @@ export const RESPONSES = {
     SENT_TWITTER_DM: 'SENT_TWITTER_DM',
     NO_TWITTER_DM_ICON_FOUND: 'NO_TWITTER_DM_ICON_FOUND',
     COMPLETED_ALL_FOLLOWERS: 'COMPLETED_ALL_FOLLOWERS',
+    NAVIGATED_TO_PRODUCT_HUNT: 'NAVIGATED_TO_PRODUCT_HUNT',
 }
 
 export const STORAGE_KEYS = {
     PRODUCT_HUNT_FOLLOWERS: 'product-hunt-followers',
     PRODUCT_HUNT_CURRENT_FOLLOWER_INDEX: 'product-hunt-current-follower-index',
     TWITTER_DM_TEXT: 'twitter-dm-text',
+    TWITTER_DM_TEXT_POPUP: 'TWITTER_DM_TEXT_POPUP'
 }