diff --git a/README.md b/README.md index a488408..2378c3f 100644 --- a/README.md +++ b/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 diff --git a/src/background.ts b/src/background.ts index c718819..9e74ff4 100644 --- a/src/background.ts +++ b/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); + }); +} diff --git a/src/popup.tsx b/src/popup.tsx index 1a3dd2d..2b08204 100644 --- a/src/popup.tsx +++ b/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(); + const [phoneNumber, setPhoneNumber] = useState(); - 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) => { + setPhoneNumber(ev.target.value); + }; return ( <>

How to use

-
    +
    • Select a valid phone number
    • Press right click to call a context menu
    • -
    • Choose "Send WhatsApp message"
    • +
    • Choose 'Send WhatsApp message'
    +
    +
    + + +
    ); }; -const root = createRoot(document.getElementById("root")!); +const root = createRoot(document.getElementById('root')!); root.render( diff --git a/src/services/phoneNumber.spec.ts b/src/services/phoneNumber.spec.ts index f3d1878..4f8cdeb 100644 --- a/src/services/phoneNumber.spec.ts +++ b/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; diff --git a/src/services/phoneNumber.ts b/src/services/phoneNumber.ts index 3611b7b..a4f785f 100644 --- a/src/services/phoneNumber.ts +++ b/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); };