margin.at
Write on the margins of the internet. Powered by the AT Protocol.
margin.at
extension
web
atproto
comments
Merge pull request #35 from sethetter/sidebar-toggle
Extension shortcut toggles sidebar instead of just open
+29
-8
+23
-6
extension/src/entrypoints/background.ts
+23
-6
extension/src/entrypoints/background.ts
···
340
}
341
}
342
343
browser.commands?.onCommand.addListener((command) => {
344
-
if (command === 'open-sidebar') {
345
const browserAny = browser as any;
346
if (browserAny.sidePanel) {
347
chrome.windows.getCurrent((win) => {
348
if (win?.id) {
349
-
browserAny.sidePanel.open({ windowId: win.id }).catch((err: Error) => {
350
-
console.error('Could not open side panel:', err);
351
-
});
352
}
353
});
354
} else if (browserAny.sidebarAction) {
355
-
browserAny.sidebarAction.open().catch((err: Error) => {
356
-
console.warn('Could not open Firefox sidebar:', err);
357
});
358
}
359
return;
···
340
}
341
}
342
343
+
let sidePanelOpen = false;
344
+
345
+
browser.runtime.onConnect.addListener((port) => {
346
+
if (port.name === 'sidepanel') {
347
+
sidePanelOpen = true;
348
+
port.onDisconnect.addListener(() => {
349
+
sidePanelOpen = false;
350
+
});
351
+
}
352
+
});
353
+
354
browser.commands?.onCommand.addListener((command) => {
355
+
if (command === 'toggle-sidebar') {
356
const browserAny = browser as any;
357
if (browserAny.sidePanel) {
358
chrome.windows.getCurrent((win) => {
359
if (win?.id) {
360
+
if (sidePanelOpen && typeof browserAny.sidePanel.close === 'function') {
361
+
browserAny.sidePanel.close({ windowId: win.id }).catch((err: Error) => {
362
+
console.error('Could not close side panel:', err);
363
+
});
364
+
} else {
365
+
browserAny.sidePanel.open({ windowId: win.id }).catch((err: Error) => {
366
+
console.error('Could not open side panel:', err);
367
+
});
368
+
}
369
}
370
});
371
} else if (browserAny.sidebarAction) {
372
+
browserAny.sidebarAction.toggle().catch((err: Error) => {
373
+
console.warn('Could not toggle Firefox sidebar:', err);
374
});
375
}
376
return;
+4
extension/src/entrypoints/sidepanel/main.tsx
+4
extension/src/entrypoints/sidepanel/main.tsx
···
1
import React from 'react';
2
import ReactDOM from 'react-dom/client';
3
+
import { browser } from 'wxt/browser';
4
import App from '@/components/sidepanel/App';
5
import '@/assets/styles.css';
6
+
7
+
// Connect a port so the background script can track open/closed state
8
+
browser.runtime.connect({ name: 'sidepanel' });
9
10
ReactDOM.createRoot(document.getElementById('root')!).render(
11
<React.StrictMode>
+2
-2
extension/wxt.config.ts
+2
-2
extension/wxt.config.ts