1

因为我们的侧边栏 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>

4

0 回答 0