Я только начал изучать 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 (содержимое основного реагирующего приложения находится здесь):
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 и изменять содержимоестраницы уже присутствует.