要在React应用程序中安全地向Chrome扩展程序发送消息，可以使用Chrome的消息传递API。以下是一个解决方案的示例代码：

1. 在Chrome扩展程序的manifest.json文件中添加必要的权限和消息监听器：

{
  "manifest_version": 2,
  "name": "My Extension",
  "version": "1.0",
  "permissions": [
    "tabs",
    "activeTab"
  ],
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "content_scripts": [{
    "matches": ["https://your-react-app-url"],
    "js": ["contentScript.js"]
  }],
  "browser_action": {
    "default_icon": "icon.png"
  }
}

2. 创建一个background.js文件，在其中监听来自React应用程序的消息：

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
  if (request.message === "send_message") {
    // 处理来自React应用程序的消息
    console.log(request.data); // 在控制台显示消息数据
    // 这里可以做一些其他操作，如发送回复消息给React应用程序
    sendResponse({ message: "response_message", data: "Response data" });
  }
});

3. 创建一个contentScript.js文件，在其中将消息发送到Chrome扩展程序：

// 向background.js发送消息
chrome.runtime.sendMessage({ message: "send_message", data: "Message data" }, function(response) {
  console.log(response); // 在控制台显示回复消息
});

4. 在React应用程序的组件中使用上述代码来发送消息：

import React from "react";

class App extends React.Component {
  sendMessageToExtension() {
    // 向Chrome扩展程序发送消息
    chrome.runtime.sendMessage({ message: "send_message", data: "Message data" }, function(response) {
      console.log(response); // 在控制台显示回复消息
    });
  }

  render() {
    return (
      

        发送消息到扩展程序
      
    );
  }
}

export default App;

请注意，上述代码假设您已经在Chrome中加载了扩展程序，并在React应用程序中运行。确保在manifest.json文件中将"your-react-app-url"替换为您的React应用程序的URL。