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，因为如果没有，扩展名将默认发送给自己。

Answer 2

很抱歉参加聚会很晚，只想补充一下jered的回答：与其在构造函数（）中添加this.handleMessage.bind(this);，不如在此添加

componentDidMount() {
// Add listener when component mounts
    chrome.runtime.onMessage.addListener(this.handleMessage.bind(this));
}

为我工作

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

2 个答案: