addeventlistener - 在关闭 Firefox 侧边栏时向内容脚本发送消息
问题描述
因为我们的侧边栏 Web 扩展修改了 Web 浏览器中显示的 HTML 内容,所以我们希望在关闭侧边栏后清除页面。
因此我尝试了这个:
侧边栏.js
(...)
class Sidebar extends React.Component {
(...)
componentDidMount() {
(...)
// on closing the sidebar
window.addEventListener('pagehide', () => {
console.log('Calling erase on tab', this.state.tabId);
browser.tabs.sendMessage(this.state.tabId, {aim: 'erase'});
console.log('AFTER');
});
}
(...)
}
const panel = document.getElementById('panel');
ReactDOM.render(<Sidebar />, panel);
内容.js
(...)
const messageHandler = async (message) => {
console.log('CALL:', message);
switch (message.aim) {
case 'erase':
erase();
return true;
(...)
}
}
};
browser.runtime.onMessage.addListener(messageHandler);
关闭侧边栏时,浏览器控制台中的结果为:
Calling erase on tab 1
AFTER
Web 控制台中没有显示任何内容,尽管其他消息CALL <message>
在关闭之前以格式显示。
我怀疑sidebar.js
在消息发送到之前可能会退出content.js
。因此,我在事件侦听器中添加了await
和:async
window.addEventListener('pagehide', async () => {
console.log('Calling erase on tab', this.state.tabId);
await browser.tabs.sendMessage(this.state.tabId, {aim: 'erase'});
console.log('AFTER');
});
然后在关闭侧边栏时,浏览器控制台中的结果是(不带AFTER
):
Calling erase on tab 1
尽管其他消息在关闭之前以格式显示,但 Web 控制台中仍然没有显示任何内容。CALL <message>
解决方案
推荐阅读
- android - 在收到通知时打开活动
- php - Laravel 相对临时签名路由签名始终无效
- android - 无法通过 Intent 从子活动(谷歌地图)传递价值到父活动
- reactjs - 如何使用 useState 钩子解决随机数组问题(React useState)?
- vba - 如何在添加记录之前检查表中的现有列?
- boolean - 如何设置字段私有布尔值设置为真?
- c# - 是否可以将 HttpResponseMessage json 转换为对象?
- android - 我在 recyclerview 中的适配器更改了 2 个项目而不是 1 个项目的背景颜色
- sql - 将外部数据添加到 sql 表
- javascript - 在表格中拖动图像 - 修复大小和每个图像