Integrated Browser Bookmarks

A Bookmarks sidebar for the VS Code Integrated Browser. Because Alt-Tabbing to your browser, getting distracted by 14 other tabs, and resurfacing 40 minutes later is not, technically, a workflow.

Install

Open the Extensions view in VS Code (Ctrl/Cmd+Shift+X), search for Integrated Browser Bookmarks, hit Install - or grab it from the Marketplace.

A Browser Bookmarks icon then turns up in the Activity Bar. Click it. There's the sidebar. We're all very proud.

Using it

Open a bookmark

Click a bookmark and it opens in the Integrated Browser, politely reusing a tab if one is already showing that page. If you'd like more control - and who doesn't - the modifiers are:

Add a bookmark

Click the + at the top of the sidebar (or Add bookmark when the list is sitting there empty and judging you). Type a name and a URL, click Add bookmark. Leave the icon field blank and we'll fetch the site's favicon; or type a codicon name like github or book if you have opinions.

Create a folder

Click New Folder at the top, name it, click Create folder. To file bookmarks inside, drag them onto the folder or hover the folder and use the + that appears. Click a folder to expand or collapse it - it does what folders do.

Organise with drag and drop

Drag bookmarks and folders around to reorder them, drop a bookmark onto a folder to tuck it inside, drag it back out when you change your mind. You can even drag a bookmark out of VS Code entirely - it brings its URL along, so it lands as text in a chat box, an address bar, a sticky note, wherever you point it.

Rename, edit, cut, copy, paste

Right-click a bookmark or folder for the full menu:

• Open actions - to the side, new tab, new window; folders get "open all" (capped at 50, because we like you)
• Cut, Copy, Paste - shuffle entries between folders like the bookmark accountant you were born to be
• Rename - turns the label into an input so you can fix that typo without ceremony
• Edit - the full form (name, URL, icon), for when "ceremony" is exactly what you wanted
• Delete - removes it; folders with bookmarks ask first, on the off chance you didn't mean it

Import bookmarks from another browser

Your bookmarks have lived in another browser long enough. First, export them to an HTML file:

• Chrome / Edge - Bookmarks > Bookmark Manager > menu > Export bookmarks
• Firefox - Bookmarks > Manage Bookmarks > Import and Backup > Export Bookmarks to HTML
• Safari - File > Export > Bookmarks

Then open the Add bookmark form, click Import bookmarks... at the bottom, choose the file, glance at the "found N bookmarks in M folders" tally, and click Import. Folders come along (flattened to one level - this is a sidebar, not a filing cabinet) and the new entries join your existing ones.

Settings

"integratedBrowserBookmarks.bookmarks": [
  { "label": "GitHub", "url": "https://github.com", "icon": "github" },
  { "label": "MDN", "url": "https://developer.mozilla.org", "icon": "book" },
  {
    "type": "folder",
    "label": "Local apps",
    "children": [
      { "label": "App", "url": "http://localhost:3000" },
      { "label": "Storybook", "url": "http://localhost:6006" }
    ]
  }
]

Commands

• Browser Bookmarks: Add Bookmark
• Browser Bookmarks: New Folder
• Browser Bookmarks: Open Bookmark Settings

Support

If this is useful to you and you'd like to support its development, you can buy me a coffee on Ko-fi - always optional, always appreciated.

Contributing

npm install
npm run watch        # rebuild on change

Press F5 to launch an Extension Development Host. Handy scripts: npm run typecheck, npm run build, npm run build -- --production, npm run release (type-checks and packages a .vsix).

The extension host lives in src/, the React webview in webview/, shared types in shared/. esbuild.js bundles both and copies the codicon assets into dist/.

Changelog

See CHANGELOG.md.

License

MIT - see LICENSE.