Slice 1: create throw-away Side Panel POC to demonstrate communication between content script and sidebar in Side Panel

[twschiller]

Context

• https://www.notion.so/pixiebrix/Phase-0-POC-of-PixieBrix-sidebar-in-Chromium-Side-Panel-804eb656450e43ee92ea8bbe4e1dae3e?pvs=4

Discussion

• This is a “build one to throw it away” POC — you don’t have to worry about maintaining backward compatibility. The PR won’t be merged in

Definition of Done

• Side Panel is toggled when you click the PixieBrix icon
  • https://developer.chrome.com/docs/extensions/reference/api/sidePanel#open-action-icon
  • https://developer.chrome.com/docs/extensions/reference/api/sidePanel#user-interaction
  • Support was introduced in Chrome 116
• Side Panel works as normal on new tabs. Requires ensuring:
  • Messaging between content script and Side Panel works normally
• Answers to questions:
  • Does each tab have its own side panel instance? Or do we need to somehow switch contexts when the tab switches?
  • Does it also work on MS Edge as expected?
• Submit PR of POC and comment on any gotchas/things we need to be aware when implementing functionality

Implementation Sketch

• Add permission to manifest for MV3 builds: https://developer.chrome.com/docs/extensions/reference/api/sidePanel#permissions
• Set the default path to sidebar.html
  • https://developer.chrome.com/docs/extensions/reference/api/sidePanel#every-site
• Change _toggleSidebar method to use the new sidePanel API:

  pixiebrix-extension/src/background/browserAction.ts

  Line 40 in 87c8bb2

  async function _toggleSidebar(tabId: number, tabUrl: string): Promise<void> {

[twschiller]

@fregante assigning this POC to you because 1/ @grahamlangford is OOO this week, 2/ you have the most context on how webext-messenger might need to change