Open any GitHub or GitLab repo (or a specific file, line, pull request, or commit) in 20+ web IDEs and AI tools. A Chrome / Edge extension. Three entry points, fully customisable, no telemetry, no external requests.
When you visit any repository on github.com or gitlab.com, a new Open in IDE button appears next to the green Code button (see screenshot). Click it to pick from a categorised list of:
- Cloud IDEs - GitHub Codespaces, Gitpod, StackBlitz, CodeSandbox, Replit, Glitch, Project IDX
- Browser editors - GitHub.dev, VS Code for the Web, GitHub1s, GitLab1s
- AI tools - Bolt.new, DeepWiki, Sourcegraph
- Open locally - VS Code, VS Code Insiders, Cursor, Windsurf, Trae, JetBrains Toolbox (via clone-URL handoff)
- Other tools - jsDelivr CDN browsing, Active Forks, Useful Forks
- Your own - add any URL-template-based IDE from the options page
The button is one of three entry points. You can also press Ctrl+Shift+G (or ⌘+Shift+G on macOS) for a toolbar popup with a paste box and type-to-filter, or right-click any GitHub/GitLab link for a contextual "Open in IDE" submenu.
The extension understands the URL you're on:
| Where you are | What gets opened |
|---|---|
/blob/main/src/foo.ts#L42 |
The file at line 42 in github.dev, vscode.dev, github1s, sourcegraph |
/tree/release/some-branch |
The branch in any branch-aware IDE |
/pull/123 |
The PR diff in Codespaces, github.dev, vscode.dev, Gitpod |
/commit/SHA |
The repo at that SHA (any branch-aware IDE works) |
/-/merge_requests/N (GitLab) |
The MR in Gitpod |
/-/commit/SHA (GitLab) |
The commit in Gitpod and Sourcegraph |
publication in progress
- Clone or download this repo:
git clone https://github.com/mthcht/github-web-ide.git - Open
chrome://extensions(oredge://extensions) in your browser - Toggle Developer mode on (top-right corner)
- Click Load unpacked and select the
github-web-idefolder - The toolbar icon appears. Visit any repo on github.com to see the in-page button.
A welcome page opens automatically the first time you install it.
The most common use. Visit a repo, click Open in IDE next to the green Code button, pick an IDE. The dropdown:
- groups IDEs by category (cloud, browser, AI, native, tools)
- shows a filter input when there are more than 6 items - press / to focus it, type to narrow, ↑ ↓ to navigate, ↵ to open
- closes when you click outside it or press Esc
- has a footer with quick-access + add custom IDE and settings links
If you set a default IDE in settings, the button becomes a split-button: the left half opens the default directly, the right caret opens the menu.
Ctrl+Shift+G (or click the toolbar icon). Paste any URL or owner/repo string into the URL row, or let the popup auto-fill from the active tab. Filter with /, navigate with arrows, open with ↵.
You can rebind the shortcut at chrome://extensions/shortcuts.
Right-click any link to github.com or gitlab.com, or anywhere on a repo page, to see the IDE list in a context menu. Same categories, same order as the in-page button.
Open the options page → + add custom. Fill in a name and a URL template. The template can include any of these placeholders:
| Placeholder | What it expands to |
|---|---|
{owner} |
repo owner / org |
{repo} |
repo name |
{branch} / {ref} |
branch name (or commit SHA on commit pages) |
{path} |
file or directory path within the repo |
{line} |
line number, or empty |
{pr} |
PR / MR number on PR pages, or empty |
{commit} |
full commit SHA on commit pages, or empty |
{repo_url} |
https://host/owner/repo (raw - for path-style URLs) |
{repo_url_encoded} |
same, percent-encoded (for ?query=... params) |
{repo_git_url} |
https://host/owner/repo.git (for clone URLs) |
{host} |
github.com or gitlab.com |
A live preview shows the URL the template will produce against facebook/react@main /packages/react/src/React.js#L42. Common patterns:
# Self-hosted Coder / Gitpod / Sourcegraph
https://coder.mycompany.com/templates/new?git={repo_url_encoded}&branch={branch}
# Path-style host
https://my-host.example.com/{owner}/{repo}/{branch}
# Native clone schemes (Cursor, VS Code Insiders, custom forks)
fleet://gitclone?cloneURL={repo_git_url}
Custom IDEs sit alongside built-ins everywhere - they're draggable, toggleable, smart-sortable, show up in the right-click menu, and respect the keyboard shortcut. They get an auto-generated colored icon based on their name.
The template validator rejects javascript:, data:, vbscript:, and file: schemes, and flags any placeholder that isn't in the table above.
The extension requests the minimum permissions needed for the features above.
| Permission | Why it's needed |
|---|---|
storage |
To remember your settings (which IDEs are enabled, their order, your default IDE, custom IDEs) and to track per-IDE click counts so the "smart sort" feature can bubble up the ones you actually use. Settings sync across browsers via chrome.storage.sync; click counts stay local via chrome.storage.local. |
contextMenus |
To register the "Open in IDE" entries that appear when you right-click a GitHub/GitLab link or page. |
tabs |
To read the active tab's URL when you open the popup (so it can prefill the URL row from the current repo) and to open the chosen IDE URL in a new tab when you click an item. The extension never queries tabs that aren't the active one. |
The extension only injects code into two hosts:
| Host | Why |
|---|---|
https://github.com/* |
To find the Code button on a repo page and add the Open in IDE button next to it, and to scan the visible directory listing for marker files (package.json, Cargo.toml, etc.) used by the smart-sort feature. |
https://gitlab.com/* |
Same as above, on GitLab. |
The extension does not request <all_urls> or any other host. The right-click context menu uses documentUrlPatterns and targetUrlPatterns filters so it only appears on / for GitHub and GitLab links - never on any other site.
- No telemetry, ever. The extension never sends any data anywhere.
- No external requests. The extension never fetches anything over the network. URLs are constructed locally from the page you're on. The browser only navigates when you click a menu item.
- No third-party servers. The IDE URLs you click open directly in your browser - there's no proxy.
- No reading of page content beyond what's needed. On a repo page, the extension reads the text of anchors in the rendered directory listing to detect marker files (
package.json,go.mod, ...) for the smart-sort feature. It does not read code, issues, PR descriptions, or any other content. - Settings stay in your browser. They're stored in
chrome.storage.sync(settings, custom IDEs) andchrome.storage.local(click counts), and sync via your browser account if you've enabled that for the rest of your settings.
manifest.json MV3 manifest. Permissions: storage, contextMenus, tabs.
lib/
repo-parser.js parseRepoUrl() - URL -> {host, owner, repo, branch, path, line, kind, pr, commit}
templates.js URL template engine + user-IDE adapter (for custom IDEs)
ides.js Built-in IDE catalog. Each entry has a kind-aware build(ctx).
storage.js chrome.storage wrapper, user-IDE CRUD, smart-sort ranking, filter helper.
content/
content.js Injects the in-page button. Detects marker files. Handles keyboard nav.
content.css GitHub Primer-aware injected styles.
background/
service-worker.js Builds and handles the right-click context menu. Opens welcome page on install.
popup/
popup.html, .js, .css Toolbar popup with paste box, filter, keyboard nav.
options/
options.html, .js, .css Settings page with drag-to-reorder + custom-IDE editor.
welcome/
welcome.html, .css Post-install tour.
screenshots/ README and welcome-page assets.
icons/ 16/32/48/128 PNGs.
Every surface (content script, popup, options, service worker) loads the same lib/*.js files in the same order, so the IDE catalog, URL parser, template engine, and storage logic live in one place. The library files attach to globalThis rather than using ES modules so they work both as content scripts and inside the service worker via importScripts().
Append an entry to the IDES array in lib/ides.js:
{
id: 'my_ide',
name: 'My IDE',
category: 'cloud', // cloud | browser | ai | native | tools
hosts: ['github'], // 'github' and/or 'gitlab'
icon: '<svg ...>...</svg>', // 16x16, currentColor
defaultOn: false,
build: (c) => {
if (c.kind === 'pr' && c.pr) return `https://my-ide.example.com/${c.owner}/${c.repo}/pr/${c.pr}`;
return `https://my-ide.example.com/${c.owner}/${c.repo}${c.branch ? '/tree/' + c.branch : ''}`;
}
}That's the only change needed - the in-page button, popup, context menu, and options page all read from this single source. (For per-user additions, the URL-template editor on the options page is the preferred path - no code changes required.)
- PR-page button placement: the button is most reliable on repo / blob / tree pages. On PR pages we try several fallback selectors, but GitHub's React markup changes occasionally; if the in-page button doesn't appear on a PR page, the right-click menu and the toolbar popup still work and do honor the PR context.
- Branches with slashes: a URL like
/blob/release/19.x/file.jsis genuinely ambiguous (is the branchreleaseand path19.x/file.js, or branchrelease/19.xand pathfile.js?). The parser goes with the former, matching GitHub's older behaviour.
The codebase is plain JavaScript / HTML / CSS, no build step. To work on it:
git clone https://github.com/mthcht/github-web-ide.git
cd github-web-ide
# Load unpacked at chrome://extensions
# Edit any file, then click "reload" on the extension card.
There's a comprehensive Node-based test suite (134 tests across 15 sections covering the parser, templates, IDE catalog, storage layer, and filter) - see the repo's test file for details.
MIT.