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:

Action	Result
Click	Open in the Integrated Browser
Ctrl/Cmd-click or middle-click	Open in a new tab
Alt-click	Open to the side
Right-click	Pick from the menu: to the side, new tab, or new window

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

Setting	Description
`integratedBrowserBookmarks.bookmarks`	Your saved bookmarks and folders. A bookmark has a `label`, a `url`, and an optional `icon` (a codicon id). A folder has a `label`, an optional `icon`, and a `children` array of bookmarks. Edit it by hand if you're feeling brave; it rides along with Settings Sync.

"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" }
    ]
  }
]