Question

我刚刚开始学习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并更改内容的页面已存在。

Answer 1

访问网页DOM内容的唯一方法是使用Content Scripts组件，其中 Chrome扩展程序使用内容脚本在manifest.json中提及JS和CSS文件，需要注入到基础页面中。

如下所述：

create-react-app的问题在于构建步骤会每次以不同的名称生成输出JS文件（如果内容已更改）。因此，我们无法知道实际的文件名 JS文件，因此我们无法在manifest.json文件中提及它。

此问题的解决方法是弹出create-react-app，并手动修改webpack配置以为内容脚本创建单独的入口点。

来源：

Injecting React app to page as content script
Chrome extension mutating running react application（相关的SO帖子）

使用React使用Chrome扩展程序更改现有页面上的内容

1 个答案: