Использование React для изменения содержимого на уже существующей странице с помощью расширения Chrome

Я только начал изучать React и пытался создать расширение для Chrome, используя его. Я пытаюсь создать расширение с кнопкой, onClick которой будет выделять определенные слова на веб-странице. Я могу выделить слова в контенте, который я представляю на странице, но не в том контенте, который уже присутствует на странице

Вот код, который я придумал -

На всплывающем HTML есть кнопка с классом highlight-hazardous-words

popup.js (всплывающее окно расширений):

window.onload = () => {
const $highlightHazardousButton = document.querySelector('.highlight-hazardous-words');

$highlightHazardousButton.onclick = () => {
    // Get active tab
    chrome.tabs.query({
        active: true,
        currentWindow: true,
    }, (tabs) => {
        // Send message to script file
        chrome.tabs.sendMessage(
        tabs[0].id,
        { injectApp: true },
        response => window.close()
);
});
};
};

main.js (здесь находится основное содержимое приложения React):

import React from 'react';
import ReactDOM from 'react-dom';
import Highlighter from "react-highlight-words"

class HighlightHazardous extends React.Component {
    constructor(props) {
        super(props);
        this.state = {searchWords : this.props.searchWords, textToHighlight : this.props.textToHighlight}
    }

    render() {
        return (
            <Highlighter
                highlightClassName = "highlighted-text"
                searchWords = {this.state.searchWords}
                autoEscape = {true}
                textToHighlight = {document.body.innerText}
            />
        )
    }
}
// Message Listener function
chrome.runtime.onMessage.addListener((request, sender, response) => {
    // If message is injectApp
    if (request.injectApp) {
        // Inject our app to DOM and send response
        injectApp();
        response({
            startedExtension: true,
        });
    }
});

function injectApp() {
    const newDiv = document.createElement("div");
    newDiv.setAttribute("id", "chromeExtensionReactApp");
    document.body.appendChild(newDiv);
    ReactDOM.render(<HighlightHazardous searchWords = {['hazardous', 'alcoholic']}/>, newDiv);
}

Здесь добавленный newDiv выделил слова по всему телу страницы, я хочу выделить опасные или алкогольные напитки в любом месте на любой веб-странице, а не в новом div, в основном, я не хочу вводить этот новый div и изменять содержимое страницы уже присутствует.