如何从BackgroundJS接收消息并更改ReactJS和Chrome扩展中的状态？

Question

我希望收到来自 chrome 扩展的 backgroundJS 的消息并更改 React DOM 的状态。

...
class App extends React.Component {
  constructor() {
    this.state = {
      message: ''
    };
  }
 func() {
   chrome.runtime.sendMessage({type:"hello"})
 }
  render() {
    return(
      <div>{this.state.message}</div>
    )
  }
}
background.js
...
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
 if (request.type == 'hello')
   chrome.runtime.sendMessage({type:'How are you'});
})

如何从backgroundJS获取消息并更改this.state。收到“你好吗”的消息？

Answer 1

其工作原理与另一个方向完全相同。你已经成功了一半。我会让消息传递更加健壮，以便您可以指定要发送的消息的目标、类型和内容，以及扩展 ID，以便其他扩展无法侦听（不一定是它们）会，但这是一个很好的做法。）

...
class App extends React.Component {
  constructor() {
    this.state = {
      message: ''
    };
    this.handleMessage.bind(this);
  }
  componentDidMount() {
    // Add listener when component mounts
    chrome.runtime.onMessage.addListener(this.handleMessage);
  }
  handleMessage(msg) {
   // Handle received messages
   if (msg.target === 'app') {
    if (msg.type === 'setMessage') {
     this.setState({message: msg.body});
    }
   }
  }
  componentWillUnmount() {
   // Remove listener when this component unmounts
   chrome.runtime.onMessage.removeListener(this.handleMessage);
  }
  func() {
   chrome.runtime.sendMessage(chrome.runtime.id, {target: 'background', type: 'message', body: 'hello'})
  }
  render() {
    return(
      <div>{this.state.message}</div>
    )
  }
}

// background.js
...
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
 if (request.target === 'background') {
  if (request.type === 'message') {
   chrome.runtime.sendMessage(chrome.runtime.id, {target: 'app', type: 'setMessage', body: 'How are you'});
  }
 }
})

编辑：显然，如果您愿意，您可以省略，chrome.runtime.id因为如果不存在，扩展将默认发送给自身。