working

src/pages/Background/index.js

@@ -1,2 +1,11 @@
 console.log('This is the background page.');
 console.log('Put the background scripts here.');
+
+
+chrome.runtime.onMessage.addListener(messageReceived);
+
+function messageReceived(msg, sender, sendResponse) {
+    console.log('inside the background paghe', msg, sender, sendResponse)
+    return sendResponse({ farewell: "goodbye" });
+
+}

src/pages/Content/index.js

@@ -3,4 +3,6 @@ import { printLine } from './modules/print';
 console.log('Content script works!');
 console.log('Must reload extension for modifications to take effect.');
 
+
+
 printLine("Using the 'printLine' function from the Print Module");

src/pages/Popup/Popup.jsx

@@ -4,6 +4,16 @@ import './Popup.css';
 import { Text } from '@chakra-ui/react'
 
 const Popup = () => {
+  const [name, setName] = React.useState('');
+
+  const handleClick = () => {
+    console.log('handleClick function!',);
+
+    chrome.runtime.sendMessage('{ greeting: name }', function (response) {
+      console.log('response in popup click handler', response);
+    });
+
+  }
   return (
     <div className="App">
       <header className="App-header">
@@ -14,6 +24,9 @@ const Popup = () => {
         <Text fontSize='20px' color='tomato'>
           PLANES
         </Text>
+
+        <input value={name} onChange={e => setName(e.target.value)} />
+        <button onClick={handleClick}>Click me</button>
         <a
           className="App-link"
           href="https://reactjs.org"