feat(*): support sending from the popup

README.md

@@ -1,3 +1,3 @@
 # Send WhatsApp Chrome Extension ![build](https://github.com/bolshchikov/send-whatsapp-extension/workflows/build/badge.svg)
 
-> Send a whatsapp message any number right from the browser
+> Send a whatsapp message any registered number right from your browser

src/background.ts

@@ -11,14 +11,28 @@ chrome.runtime.onInstalled.addListener(() => {
 
 chrome.contextMenus.onClicked.addListener((info, tab) => {
   if (info.menuItemId === 'sendWhatsApp' && info.selectionText) {
-    getUserCountry().then(countryCode => {
-      const phoneNumber = extractPhoneNumber(countryCode, info.selectionText);
-      if (phoneNumber) {
-        const url = `https://api.whatsapp.com/send/?phone=${phoneNumber}&text&type=phone_number&app_absent=0`;
-        chrome.tabs.create({ url: url });
-      }
-    }).catch(error => {
-      console.error(error.message);
-    });
+    console.log('Sending message from context menu', info.selectionText);
+    sendWhatsApp(info.selectionText);
   }
 });
+
+chrome.runtime.onMessage.addListener((message) => {
+  if (message.action === 'sendWhatsApp') {
+    console.log('Sending message from popup', message.payload);
+    sendWhatsApp(message.payload);
+  }
+  // Send response asynchronously
+  return true;
+});
+
+function sendWhatsApp(maybePhoneNumber?: string) {
+  getUserCountry().then(countryCode => {
+    const phoneNumber = extractPhoneNumber(countryCode, maybePhoneNumber);
+    if (phoneNumber) {
+      const url = `https://api.whatsapp.com/send/?phone=${phoneNumber}&text&type=phone_number&app_absent=0`;
+      chrome.tabs.create({ url: url });
+    }
+  }).catch(error => {
+    console.error(error.message);
+  });
+}

src/popup.tsx

@@ -1,28 +1,41 @@
-import React, { useEffect, useState } from "react";
-import { createRoot } from "react-dom/client";
+import React, { useState } from 'react';
+import { createRoot } from 'react-dom/client';
 
 const Popup = () => {
-  const [currentURL, setCurrentURL] = useState<string>();
+  const [phoneNumber, setPhoneNumber] = useState<string>();
 
-  useEffect(() => {
-    chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
-      setCurrentURL(tabs[0].url);
-    });
-  }, []);
+  const sendMessageHandler = () => {
+    const message = { action: 'sendWhatsApp', payload: phoneNumber };
+
+    chrome.runtime.sendMessage(message);
+  }
+  const changePhoneNumberHandler = (ev: React.ChangeEvent<HTMLInputElement>) => {
+    setPhoneNumber(ev.target.value);
+  };
 
   return (
     <>
       <h3>How to use</h3>
-      <ul style={{ minWidth: "500px" }}>
+      <ul style={{ minWidth: '500px' }}>
         <li>Select a valid phone number</li>
         <li>Press right click to call a context menu</li>
-        <li>Choose "Send WhatsApp message"</li>
+        <li>Choose 'Send WhatsApp message'</li>
       </ul>
+      <hr />
+      <div style={{ display: 'flex', flexDirection: 'row', gap: '8px' }}>
+        <input
+          style={{ minWidth: '250px' }}
+          placeholder='E.g. +1 (343) 123 441 442'
+          value={phoneNumber}
+          onChange={changePhoneNumberHandler}
+        />
+        <button onClick={sendMessageHandler}>Send message</button>
+      </div>
     </>
   );
 };
 
-const root = createRoot(document.getElementById("root")!);
+const root = createRoot(document.getElementById('root')!);
 
 root.render(
   <React.StrictMode>

src/services/phoneNumber.spec.ts

@@ -21,6 +21,16 @@ describe('extractPhoneNumber', () => {
     expect(result).toBe(expectedPhoneNumber);
   });
 
+  it('should disregard country code if full number is provided', () => {
+    const countryCode = 'IL';
+    const maybePhoneNumber = '+1 (555) 123-4567';
+    const expectedPhoneNumber = '15551234567';
+
+    const result = extractPhoneNumber(countryCode, maybePhoneNumber);
+
+    expect(result).toBe(expectedPhoneNumber);
+  });
+
   it('should return empty string if maybePhoneNumber is undefined', () => {
     const countryCode = 'US';
     const maybePhoneNumber = undefined;

src/services/phoneNumber.ts

@@ -11,8 +11,8 @@ const parsePhoneNumber = (text?: string): string => {
   return phoneNumber;
 };
 
-const formatPhoneNumber = (phoneNumber: string, countryCode: string) => {
-  const dialCode = getCountryDialCode(countryCode);
+const formatPhoneNumber = (phoneNumber: string, countryCode?: string) => {
+  const dialCode = countryCode ? getCountryDialCode(countryCode) : null;
   if (dialCode && !phoneNumber.startsWith(dialCode)) {
     const normalizedPhoneNumber = phoneNumber.replace(/^0+/, '');  // Remove leading zeros
     return dialCode + normalizedPhoneNumber;
@@ -22,5 +22,6 @@ const formatPhoneNumber = (phoneNumber: string, countryCode: string) => {
 };
 
 export const extractPhoneNumber = (countryCode: string, maybePhoneNumber?: string): string => {
-  return formatPhoneNumber(parsePhoneNumber(maybePhoneNumber), countryCode);
+  const parsedPhoneNumber = parsePhoneNumber(maybePhoneNumber);
+  return formatPhoneNumber(parsedPhoneNumber, maybePhoneNumber?.startsWith('+') ? '' : countryCode);
 };