ReactJSとChrome拡張機能でBackgroundJSからメッセージを受け取り、状態を変更する方法は？

Question

クロムエクステンションの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

これはまったく同じ方法で他の方向に進みます。あなたはすでにそこの途中です。私はメッセージングをもう少し頑強にすることで、送信しているメッセージのターゲット、タイプ、コンテンツ、および内線番号を指定できるので、他の内線が聴取できないようにすることができますだろうが、それは良い習慣だ）

... 
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を省略することができます。