Cleanup widgets and side effects when the content script is unloaded

[fregante]

Follows:

• https://github.com/pixiebrix/pixiebrix-extension/pull/4240

Pixiebrix does a good job at cleaning up the buttons across reloads, but some parts remain. This is probably mostly a DX issue meant to ensure PB developers don't lose their minds while debugging Schrödinger's bugs. 😅

kbar

kbar remains attached and sometimes it conflicts with itself, appearing multiple times on a single keystroke.

Element picker overlay (✅ addressed by https://github.com/pixiebrix/pixiebrix-extension/pull/4488)

Elements may remain selected when closing the editor as well, and no way to deselect them.

Sidebar (partially addressed by https://github.com/pixiebrix/pixiebrix-extension/pull/4117)

It remains unconnectable until the user manually reloads it. An ErrorBanner component with reload button would be helpful.

Solution

• [ ] Use onContextInvalidated in more places, perhaps wrapped in a React hook if preferred
• [ ] Detect stuck sidebars in the content script instead of reporting "Sidebar not found" messenger errors while the sidebar is on screen