Поскольку наше веб-расширение боковой панели изменяет содержимое 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);
content.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
И ничего отображается в веб-консоли, хотя другие сообщения были показаны в формате 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
И все же ничего не отображается в веб-консоли, хотя другие сообщения отображались в формате CALL <message>
перед закрытием.