DEV Community

Nobuo Miura
Nobuo Miura

Posted on Edited on

Building a Local-Only Browser Extension That Translates GitHub's UI—Not Your Content

Updated October 25, 2026: refreshed language support, browser support, installation instructions, and implementation details.

Built-in browser translation is convenient, but it is often too broad for developer tools. It can translate repository content along with the interface, turning terms such as "branch" into awkward words and making technical pages harder to read.

There is also a more serious concern in corporate environments: depending on the translation feature or service being used, page content may be sent to an external translation provider. That can be unacceptable when a page contains private repository code, internal issue discussions, or other confidential information.

I wanted a narrower and more predictable solution:

  • Translate only GitHub's fixed interface labels
  • Leave README files, issues, comments, and source code untouched
  • Never send text to an external translation API or cloud translation service
  • Perform the entire translation locally in the browser

So I built GitHub UI Translator, an open-source browser extension for Chrome, Edge, and Firefox.

GitHub logo nobuo-miura / github-ui-translator

A browser extension for Chrome, Edge, and Firefox that translates GitHub's UI into multiple languages using local dictionaries. No external APIs — all translation runs locally.

GitHub UI Translator

English | 日本語 | 简体中文 | Español | Deutsch | Português (Brasil) | 한국어 | Français | Русский

Latest Release Chrome Web Store Microsoft Edge Add-ons Firefox Add-ons Validation License: MIT

GitHub UI Translator is a browser extension for Chrome, Edge, and Firefox that translates GitHub's English UI into Japanese, Simplified Chinese, Spanish, German, Brazilian Portuguese, Korean, French, or Russian using a local dictionary It does not rely on external translation APIs or cloud services; all translation runs locally in the browser.

Translation result for Japanese

Screenshots (all 8 languages)

The first row is GitHub's original English UI; each row below shows the translation for one language.

Translation results for all 8 supported languages

Features

  • Performs all translation locally without sending page content or settings to external services
  • Translates fixed GitHub UI text such as navigation items and buttons while avoiding user-created content areas such as READMEs, issues, comments, and code blocks
  • Lets you turn translation on or off from the extension popup
  • Translates the global header after GitHub's React hydration…

The first version translated GitHub's interface into Japanese. It now includes eight languages: Japanese, Simplified Chinese, Spanish, German, Brazilian Portuguese, Korean, French, and Russian. You can choose a language from the extension's popup.

The Main Design Goal: Decide What Not to Translate

A straightforward translation extension could scan every text node on the page and replace matching strings. The problem is that GitHub pages contain both interface text and user-generated content.

Translating the whole page could modify:

  • README files
  • Issue and pull request descriptions
  • Comments
  • Code blocks
  • Repository file content

For this extension, leaving those areas untouched is more important than translating every possible label.

Instead of scanning the entire document, the extension starts with an allowlist of semantic UI elements:

const BASE_SELECTOR = [
  'nav',
  'header',
  'button',
  'input[type="submit"]',
  'input[type="button"]',
  'input[type="reset"]',
  '[role="tab"]',
  '[role="menuitem"]',
  '[role="menuitemradio"]',
  '[role="menuitemcheckbox"]',
  '[role="menu"]',
  '[role="dialog"]',
  '[role="listbox"]',
  '[role="button"]',
  '[aria-label]'
];
Enter fullscreen mode Exit fullscreen mode

These selectors describe the meaning of an element rather than GitHub's visual implementation. CSS class names and data-testid values can change during a refactor, while elements such as nav and ARIA roles are more closely tied to how the interface works.

Some GitHub pages, including Settings and Issue or Pull Request screens, contain fixed interface text in headings, labels, and links. On those pages, the extension expands the allowlist based on the URL. Content containers such as .markdown-body are still explicitly excluded.

The semantic allowlist is the starting point. Some exclusions and page-specific extensions also use GitHub-specific CSS classes or data-testid attributes.

The extension also checks attributes and link destinations to avoid translating repository names, usernames, branch names, tag names, and other user-created labels, even when they match a dictionary entry. These safeguards reduce the risk of unintended changes, but GitHub can change its page structure in ways that make an exclusion stop working.

This approach is intentionally conservative. Missing a label is preferable to modifying content written by a user.

Exact Matches Instead of Machine Translation

The extension does not use a machine translation model. For fixed UI text, it replaces a string only when it matches an entry in its bundled dictionary. Visible text is trimmed and repeated whitespace is normalized to a single space before matching. Attribute values are trimmed, but their internal whitespace is preserved.

For example:

{
  "language": "ja",
  "name": "日本語",
  "translations": {
    // Repository navigation
    "Code": "コード",
    "Issues": "イシュー",
    "Pull requests": "プルリクエスト",

    // Repository actions
    "Watch": "ウォッチ",
    "Star": "スター"
  }
}
Enter fullscreen mode Exit fullscreen mode

There is no pattern-based translation of counts such as 3 commits. Fixed sentences containing inline links can be translated when the entire sentence, including supported tags, matches a dictionary entry. The extension updates existing text nodes without recreating the elements.

Unmatched strings remain in their original form. Dictionary entries can still contain mistakes, and user-created content can happen to match a UI label, so exact matching needs to be combined with control over which elements are eligible for translation.

Dates and relative times have a separate mechanism: the extension sets the target language on GitHub's <relative-time> elements and lets those elements format their own output. This does not translate every surrounding date-related sentence.

Translation is not limited to visible text nodes: matching aria-label values, placeholder attributes, and button value attributes are also translated, so matching labels used by assistive technologies are covered as well. User-entered values in text fields are excluded.

Waiting for GitHub's UI to Initialize

After the initial release, a reader reported that the search interface disappeared when they tried to open it. The current implementation excludes search controls and suggestions from translation and waits for React hydration to finish before translating the affected page sections. Hydration is the step that connects server-rendered HTML to the interactive interface in the browser.

These measures reduce conflicts with GitHub's initialization and display logic, as well as unintended translation of names in search suggestions. Global header translation can also be disabled separately in the popup if search does not open correctly.

Keeping Confidential Content Away from Translation Services

The dictionary is bundled with the extension. Translation is a local string-matching operation performed inside the browser.

The extension does not send page text to an external translation API or cloud translation service. It does not need to upload a README, issue discussion, pull request description, or source file to produce a translation.

This distinction matters in organizations where private repositories contain confidential code or internal discussions. Even when an external translation service is useful, company policy may prohibit sending repository content to it.

GitHub UI Translator reduces that concern in two complementary ways:

  1. Safeguards are designed to exclude user-generated content from translation targets.
  2. The interface text that is translated is processed locally with a bundled dictionary.

The goal is not to replace general-purpose translation. It is to provide a small, auditable tool for one specific job: translating predictable interface labels without involving repository content.

Why the Dictionary Uses Commented Sections

As of October 25, 2026, the source includes 1,879 entries in each of the eight language dictionaries. A flat JSON file quickly becomes difficult to maintain because it is not obvious which GitHub screen each label belongs to.

The dictionary therefore uses JSON with line comments to group entries by screen or feature. Before parsing the file, the extension removes the comment lines and passes the remaining content to JSON.parse.

Only full-line comments are supported; trailing comments after values are not.

This makes it easier to find and update the relevant section when GitHub changes an interface label. A validation script checks dictionary structure, duplicate keys, matching keys across all bundled languages, and translation cycles.

Adding a language involves supplying a dictionary and registering it in languages.json. The popup and options interface use a separate set of extension localization files under _locales. For customization, load a development copy of the extension, edit the dictionary, and reload the extension.

Installation and Settings

The extension is available through the browser stores:

After installing, open GitHub and use the extension's popup to select a language, turn translation on or off, or disable global header translation. Changing a setting automatically reloads open GitHub tabs.

For Chrome, you can also download and extract the ZIP from GitHub Releases, enable Developer mode at chrome://extensions, and choose Load unpacked. Manual installations do not update automatically; replace the files when a new version is released.

Organizations may restrict extension installation or Developer mode regardless of whether an extension sends data externally. Follow your organization's policy. Development installation instructions are in the README.

Current Trade-Offs

The conservative design comes with some limitations:

  • Unregistered fixed labels and unsupported text structures remain in English.
  • Not all numeric or date-related text is localized; some relative-time displays use the element's language setting described above.
  • User-created content is excluded in principle, but changes to GitHub's page structure can cause unintended translation.
  • Only github.com is supported; GitHub Enterprise Server installations on other domains are outside the supported scope.
  • Chrome, Edge, and Firefox have been tested. Other Chromium-based browsers, such as Brave, have not been explicitly verified.

The translation scope document describes the intended coverage and exclusions in more detail.

What's Next

I would like to expand the dictionary coverage and add more languages while keeping the same local-only, UI-only approach.

If you are interested in contributing a dictionary, reporting an untranslated GitHub label, or reviewing the implementation, the project is available on GitHub:

GitHub logo nobuo-miura / github-ui-translator

A browser extension for Chrome, Edge, and Firefox that translates GitHub's UI into multiple languages using local dictionaries. No external APIs — all translation runs locally.

GitHub UI Translator

English | 日本語 | 简体中文 | Español | Deutsch | Português (Brasil) | 한국어 | Français | Русский

Latest Release Chrome Web Store Microsoft Edge Add-ons Firefox Add-ons Validation License: MIT

GitHub UI Translator is a browser extension for Chrome, Edge, and Firefox that translates GitHub's English UI into Japanese, Simplified Chinese, Spanish, German, Brazilian Portuguese, Korean, French, or Russian using a local dictionary It does not rely on external translation APIs or cloud services; all translation runs locally in the browser.

Translation result for Japanese

Screenshots (all 8 languages)

The first row is GitHub's original English UI; each row below shows the translation for one language.

Translation results for all 8 supported languages

Features

  • Performs all translation locally without sending page content or settings to external services
  • Translates fixed GitHub UI text such as navigation items and buttons while avoiding user-created content areas such as READMEs, issues, comments, and code blocks
  • Lets you turn translation on or off from the extension popup
  • Translates the global header after GitHub's React hydration…

Top comments (0)