it works

craco.config.js

@@ -0,0 +1,22 @@
+module.exports = {
+  webpack: {
+    configure: (webpackConfig, {env, paths}) => {
+      return {
+        ...webpackConfig,
+        entry: {
+          main: [env === 'development' &&
+          require.resolve('react-dev-utils/webpackHotDevClient'),paths.appIndexJs].filter(Boolean),
+          content: './src/chromeServices/DOMEvaluator.ts',
+        },
+        output: {
+          ...webpackConfig.output,
+          filename: 'static/js/[name].js',
+        },
+        optimization: {
+          ...webpackConfig.optimization,
+          runtimeChunk: false,
+        }
+      }
+    },
+  }
+}

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@craco/craco": "^6.2.0",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",
@@ -18,7 +19,7 @@
   },
   "scripts": {
     "start": "react-scripts start",
-    "build": "INLINE_RUNTIME_CHUNK=false react-scripts build",
+    "build": "INLINE_RUNTIME_CHUNK=false craco build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },
@@ -39,5 +40,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@types/chrome": "^0.0.151"
   }
 }

public/manifest.json

@@ -7,6 +7,17 @@
     "default_popup": "index.html",
     "default_title": "Open the popup"
   },
+  "content_scripts": [
+    {
+      "matches": ["http://*/*", "https://*/*"],
+      "js": ["./static/js/content.js"],
+      "all_frames": false,
+      "run_at": "document_end"
+    }
+  ],
+  "permissions": [
+    "activeTab"
+  ],
   "icons": {
     "16": "logo192.png",
     "48": "logo192.png",

src/App.tsx

@@ -1,7 +1,35 @@
 import React from 'react';
 import './App.css';
+import { DOMMessage, DOMMessageResponse } from './types';
 
 function App() {
+  const [title, setTitle] = React.useState('');
+
+  React.useEffect(() => {
+    /**
+     * We can't use "chrome.runtime.sendMessage" for sending messages from React.
+     * For sending messages from React we need to specify which tab to send it to.
+     */
+    chrome.tabs && chrome.tabs.query({
+      active: true,
+      currentWindow: true
+    }, tabs => {
+      /**
+       * Sends a single message to the content script(s) in the specified tab,
+       * with an optional callback to run when a response is sent back.
+       *
+       * The runtime.onMessage event is fired in each content script running
+       * in the specified tab for the current extension.
+       */
+      chrome.tabs.sendMessage(
+        tabs[0].id || 0,
+        { type: 'GET_DOM' } as DOMMessage,
+        (response: DOMMessageResponse) => {
+          setTitle(response.title);
+        });
+    });
+  });
+
   return (
     <div className="App">
       <h1>SEO Extension built with React!</h1>
@@ -15,7 +43,7 @@ function App() {
             </span>
           </div>
           <div className="SEOVAlidationFieldValue">
-            The title of the page
+            {title}
           </div>
         </li>
 

src/chromeServices/DOMEvaluator.ts

@@ -0,0 +1,18 @@
+import { DOMMessage, DOMMessageResponse } from '../types';
+
+const messagesFromReactAppListener = (msg: DOMMessage, sender: chrome.runtime.MessageSender, sendResponse: (response: DOMMessageResponse) => void) => {
+  console.log('[content.js]. Message received', msg);
+
+  const response: DOMMessageResponse = {
+    title: document.title
+  };
+
+  console.log('[content.js]. Message response', response);
+
+  sendResponse(response)
+}
+
+/**
+ * Fired when a message is sent from either an extension process or a content script.
+ */
+chrome.runtime.onMessage.addListener(messagesFromReactAppListener);

src/types/DOMMessages.ts

@@ -0,0 +1,7 @@
+export type DOMMessage = {
+  type: 'GET_DOM'
+}
+
+export type DOMMessageResponse = {
+  title: string;
+}

src/types/index.ts

@@ -0,0 +1 @@
+export * from './DOMMessages'