Skip to content
trajchePublic

About

Arc-style sidebar for Firefox: favorites, spaces with containers, pinned tabs & folders, command bar, and an importer for your Arc sidebar.

Topics

Resources

Stars

2 stars

Watchers

0 watching

Forks

Repository files navigation

Arcsidebar

An Arc-style sidebar for Firefox: favorites, spaces, pinned tabs and folders, a command bar for new tabs, and an address bar in the sidebar.

With a small one-time setup it replaces Firefox's tab strip and toolbar, so the sidebar and the page get the whole window.

Not affiliated with or endorsed by The Browser Company. “Arc” is their browser; this is an independent extension that brings its sidebar ideas to Firefox.

Features

Favorites
Favorites
A grid of icons at the top. Each favorite owns one tab: click to switch to it, or reopen it if you closed it. Favorites belong to a container, like Arc's per-profile favorites.
Spaces
Spaces
Separate sets of tabs with their own name, emoji and color. Switch from the footer, with a two-finger swipe, or ⌃1–⌃5 (Alt+Shift+1–5). A space can use its own Firefox container, so it keeps separate logins.
Pinned tabs and folders
Pinned tabs and folders
Pin tabs to a space; they stay when closed. Shift- or Command-click to select several, right-click → New Folder. The pinned section folds away under the space name.
Command bar
Command bar
⌘T / Ctrl+T opens a search box instead of a blank page: addresses, searches, open tabs, history.
Address bar in the sidebar
Address bar in the sidebar
Shows the site you're on; click to edit or search. ⌥⇧L / Alt+Shift+L.
Hide the sidebar
Hide the sidebar
Firefox's own sidebar toggle gives the page the whole window — the sidebar button in the toolbar, View → Sidebar, or its shortcut. Arc's extensions row hides with it.
Split view
Split view
Firefox's split tabs show as one row. Create and separate them with Firefox's own shortcuts (set them in about:keyboard).
Extensions row
Extensions row
Your pinned extensions sit in the sidebar, under the window buttons, once the layout setup is done.

Import from Arc. Brings over spaces, pinned tabs, folders and favorites. Each Arc profile becomes a Firefox container.

Shortcuts can be changed in about:addons → ⚙ → Manage Extension Shortcuts.

Install

Arcsidebar needs Firefox 155 or newer (desktop; Firefox for Android has no sidebar).

  1. Download the latest signed .xpi from Releases and open it in Firefox. It updates itself from there (Firefox checks daily; about:addons → ⚙ → Check for Updates forces it).

  2. Give Arc the whole window (hides Firefox's tab strip and toolbar). Run the setup for your system — it finds the Firefox profile with Arc and adds Arc's layout, keeping any customizations you already have:

    macOS / Linux (Terminal)

    curl -fsSL https://raw.githubusercontent.com/trajche/arc/main/extras/setup/arc-setup.txt | bash

    Windows (PowerShell)

    irm https://raw.githubusercontent.com/trajche/arc/main/extras/setup/arc-setup.ps1 | iex

    Then quit Firefox and open it again. Run it again after updating Arc. To remove Arc's layout: add | bash -s -- --uninstall on macOS/Linux, or run & ([scriptblock]::Create((irm <url>))) -Uninstall on Windows. The scripts are arc-setup.txt and arc-setup.ps1 if you'd rather read and run them yourself.

  3. Coming from Arc? Right-click the space name → Import from Arc…

The welcome page (opened on install, or right-click the space name → Welcome & Setup) explains the features and offers the setup script.

What the setup changes

  • <profile>/chrome/userChrome.css hides the tab strip, Firefox's sidebar launcher and panel header, and turns the toolbar into a row of extension buttons in the sidebar. Firefox's own address bar appears as a centered overlay with ⌘L / Ctrl+L (needed for about: pages, which extensions can't open).
  • <profile>/user.js enables userChrome.css, horizontal tabs and session restore, keeps the window open when the last tab closes, and opens Arc's sidebar at startup.
  • <profile>/user.js also turns on Firefox's Picture-in-Picture when switching tabs, so a playing video pops out when you leave its tab and goes back when you return, like Arc (media.videocontrols.picture-in-picture.enable-when-switching-tabs.enabled; set it to false in about:config if you'd rather it didn't).
  • <profile>/customKeys.json clears Firefox's built-in New tab and Close tab shortcuts. They're reserved keys, so Arc can only take ⌘T / Ctrl+T (command bar) and ⌘W / Ctrl+W (close tab, but a space keeps its last command bar instead of emptying) once they're cleared; any other shortcuts you've customized are kept. Undo it in about:keyboard.

Limits

Firefox doesn't allow extensions to do these:

  • Draw over the page. Arc's floating command bar becomes a tab here.
  • Open about: pages, create split views, or read Arc's saved logins and cookies.
  • Switch browser profiles. Containers stand in for Arc profiles: separate cookies and logins, but shared history, bookmarks and extensions.

Spaces, pins and favorites are stored locally; Firefox Sync's extension storage is too small for large Arc imports.

Tab badges for other extensions

Other extensions can put small badges on tabs in the sidebar. Tab Driver uses this to tag tabs an AI agent is controlling.

await browser.runtime.sendMessage("arc@sidebar", {
  type: "arcsidebar:set-badges",
  badges: [{ tabId: 12, label: "AI", title: "Claude is controlling this tab", color: "#7c5cff" }],
});
  • Each call replaces all badges from your extension. Send an empty list to clear them.
  • label is up to 12 characters, and title (the tooltip) up to 120. color is optional and must be a hex color; the default is the space's color. At most 200 badges per extension.
  • icon shows a built-in Lucide icon instead of the label: "bot" or "sparkles". position: "start" puts the badge before the title, next to the sound icon (default: after the title). pulse: true makes it blink; on an icon, a small green dot blinks instead.
  • Badges last until Firefox restarts or Arcsidebar updates. Arcsidebar then sends { type: "arcsidebar:ready" } to every extension that set badges before; send yours again when you get it.
  • The call fails if Arcsidebar isn't installed. Retry now and then until it succeeds.

They can also add items to the tab menu (right-click on a tab in the sidebar):

await browser.runtime.sendMessage("arc@sidebar", {
  type: "arcsidebar:set-tab-menu",
  items: [{ id: "control", title: "Let AI agents control this tab", exceptTabIds: [12] }],
});
// A click arrives as { type: "arcsidebar:menu-clicked", id: "control", tabId }.
  • Each call replaces your items (up to 5). tabIds shows an item only on those tabs, exceptTabIds hides it on them.
  • Items last as long as badges, and the same arcsidebar:ready message asks you to send them again.
  • Arcsidebar pings extensions that set badges or items ({ type: "arcsidebar:ping" }, no answer needed) and drops what they set once they're disabled or removed.

Development

npm install
npm run setup-dev   # once: creates the "arc-dev" Firefox Developer Edition profile
npm run dev         # start Developer Edition with that profile (macOS)
npm run reload      # reload Arc in place after changing code
npm run lint

The dev profile loads Arc unsigned, straight from this folder, and links extras/userChrome.css into the profile. Code changes need npm run reload; userChrome.css changes need a Developer Edition restart. Release Firefox only runs signed add-ons.

  • npm run build:setup regenerates extras/setup/ from extras/userChrome.css and extras/user.js. Run it after changing either.
  • npm run build:gifs re-renders the feature animations (HyperFrames project in videos/arc-feature-loops) and slices them into docs/features/.
  • npm run sign bumps the version and signs an unlisted build with addons.mozilla.org. It reads WEB_EXT_API_KEY / WEB_EXT_API_SECRET from .env (git-ignored).
  • npm run release signs a build, publishes it as a GitHub release, and points updates.json at it so installed copies update themselves. Needs the gh CLI and a clean git tree.
Path What
background.js Tab lifecycle, spaces, context menus, commands
shared/store.js Data: spaces, favorites, pinned items, folders, import
sidebar/ The sidebar: tabs, address bar, spaces footer
palette/, newtab/ Command bar and the new-tab page that opens it
editor/ Space editor window (emoji data in emoji.json)
import/ Import from Arc (arc-parse.js reads Arc's StorableSidebar.json)
welcome/ Welcome and setup page
extras/ userChrome.css, user.js and the generated setup scripts
scripts/ Dev tooling: setup-script generator, dev profile, reload

License

MIT. Emoji data from unicode-emoji-json and emojilib (MIT, see editor/emoji.LICENSE.txt).

About

Arc-style sidebar for Firefox: favorites, spaces with containers, pinned tabs & folders, command bar, and an importer for your Arc sidebar.

Topics

Resources

Stars

2 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages