gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-02 03:51:41 27 4
gpt4 key购买 nike

我希望从我的 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.message更改为“How are you”收到?

最佳答案

它的工作原理与另一个方向完全相同。你已经成功了一半。我会让消息传递更加健壮,以便您可以指定要发送的消息的目标、类型和内容,以及扩展 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,因为如果不存在,扩展程序将默认发送给自身。

关于reactjs - 如何从BackgroundJS接收消息并更改ReactJS和Chrome扩展中的状态?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45247273/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com