Sidebar Tab quick start

Build your first Canopi sidebar tab — an Archive Assistant that saves pages to external archive services.

Prerequisites

• JavaScript (ES2017+) or TypeScript
• Node.js and npm
• Canopi development environment (extension host)

Project setup

mkdir archive-assistant && cd archive-assistant
npm init -y
npm install --save-dev webpack webpack-cli html-webpack-plugin css-loader style-loader

Optional TypeScript:

npm install --save-dev typescript ts-loader @types/node

Project structure

archive-assistant/
├── src/
│   ├── index.js
│   └── styles.css
├── icons/
│   ├── icon-16.png
│   ├── icon-48.png
│   └── icon-128.png
├── canopi-tab.json
├── package.json
└── webpack.config.js

Manifest

Create canopi-tab.json:

{
  "id": "archive-assistant",
  "name": "Archive Assistant",
  "version": "1.0.0",
  "description": "Archive pages to Wayback Machine and other services",
  "author": "Your Name",
  "icons": {
    "16": "icons/icon-16.png",
    "48": "icons/icon-48.png",
    "128": "icons/icon-128.png"
  },
  "entry": {
    "main": "dist/index.js",
    "styles": ["dist/styles.css"]
  },
  "permissions": {
    "required": ["page:url", "network:fetch"],
    "optional": ["archive:wayback"]
  }
}

Register the tab

src/index.js:

const { registerTab, bridge } = window.canopi;

registerTab({
  id: 'archive-assistant',
  title: 'Archive',
  icon: 'archive-icon',
  position: 'right',

  render(container) {
    container.innerHTML = `
      <div class="archive-tab">
        <h2>Archive Assistant</h2>
        <button id="archive-btn">Archive this page</button>
        <p id="status"></p>
      </div>
    `;
    container.querySelector('#archive-btn').addEventListener('click', async () => {
      const url = await bridge.request('page:getUrl');
      document.getElementById('status').textContent = `Archiving ${url}…`;
      await bridge.request('archive:wayback', { url });
      document.getElementById('status').textContent = 'Done!';
    });
  },
});

Build & load

npx webpack --mode production

Load the unpacked module in the Canopi extension developer panel (Tab Manager) pointing at your build output.

Publish

1. Validate manifest against JSON Schema.
2. Package icons + dist bundle.
3. Submit through the Canopi tab store (when available).

Next

• Manifest schema
• API reference

Full tutorial: docs/SIDEBAR_TAB_SDK_QUICK_START.md in the repo.