Because our sidebar Web extension modifies the HTML content displayed in the Web browser, we would want to clear the page back once we close the sidebar.
Therefore I tried this:
sidebar.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);
When closing the sidebar, the result in the browser console is:
Calling erase on tab 1
AFTER
And nothing is displayed in the Web console, although other messages were shown in the CALL <message> format before closing.
I suspected that sidebar.js might be quitting before the message is sent to content.js. Hence I added await and async to the event listener:
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');
});
Then on closing the sidebar, the result in the browser console is (with not AFTER):
Calling erase on tab 1
And still nothing is displayed in the Web console, although other messages were shown in the CALL <message> format before closing.
