Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,18 @@

All notable changes to this project will be documented in this file.

## [1.7.3] - 2026-04-17

### Added

- Added support for Japanese (JA) localisation, expanding accessibility for Japanese-speaking users.
- Added a live distance preview in Measurement Mode, allowing users to see real-time measurements as they move the mouse after selecting the first element, enhancing usability and efficiency.
- Added dashed corner guidelines in Measurement Mode when hovering over the second element, providing better alignment context. When the second element is wider than the first, left and right edge gap measurements are also displayed for improved spatial understanding.

### Changed

- Shortened toggle switch labels to On/Off for a more compact UI.

Comment thread
craigsavage marked this conversation as resolved.
## [1.7.2] - 2026-04-09

### Changed
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"type": "module",
"name": "border-patrol",
"version": "1.7.2",
"version": "1.7.3",
"description": "Are you tired of digging through complex CSS and hovering endlessly in DevTools just to figure out element boundaries, margins, and padding? **Border Patrol** is the free and open-source Chrome extension built to solve that frustration!",
"main": "src/background.js",
"scripts": {
Expand Down
4 changes: 2 additions & 2 deletions src/_locales/de/messages.json
Original file line number Diff line number Diff line change
Expand Up @@ -64,11 +64,11 @@
"description": "A double border style."
},
"enabled": {
"message": "Aktiviert",
"message": "Ein",
"description": "Indicates that a feature or option is turned on."
},
"disabled": {
"message": "Deaktiviert",
"message": "Aus",
"description": "Indicates that a feature or option is turned off."
},
"enableOrDisableBorders": {
Expand Down
4 changes: 2 additions & 2 deletions src/_locales/en/messages.json
Original file line number Diff line number Diff line change
Expand Up @@ -64,11 +64,11 @@
"description": "A double border style."
},
"enabled": {
"message": "Enabled",
"message": "On",
"description": "Indicates that a feature or option is turned on."
},
"disabled": {
"message": "Disabled",
"message": "Off",
"description": "Indicates that a feature or option is turned off."
},
"enableOrDisableBorders": {
Expand Down
4 changes: 2 additions & 2 deletions src/_locales/es/messages.json
Original file line number Diff line number Diff line change
Expand Up @@ -64,11 +64,11 @@
"description": "A double border style."
},
"enabled": {
"message": "Habilitado",
"message": "Activado",
"description": "Indicates that a feature or option is turned on."
},
"disabled": {
"message": "Deshabilitado",
"message": "Desactivado",
"description": "Indicates that a feature or option is turned off."
},
"enableOrDisableBorders": {
Expand Down
182 changes: 182 additions & 0 deletions src/_locales/ja/messages.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,182 @@
{
"extensionName": {
"message": "Border Patrol",
"description": "The brand name of the extension."
},
"extensionLongName": {
"message": "Border Patrol – CSSデバッガー & 要素アウトライナー",
"description": "The long brand name of the extension."
},
"extensionDescription": {
"message": "CSSボックスモデルデバッガー & 要素アウトライナー — UIの素早い検証、レイアウトの可視化、フロントエンド開発の効率化に。",
"description": "Extension description for manifest.json and Web Store SEO."
},
"toggleBorderModeCommand": {
"message": "ボーダーモードを切り替える",
"description": "Command description for toggling Border Mode in manifest."
},
"toggleInspectorModeCommand": {
"message": "インスペクターモードを切り替える",
"description": "Command description for toggling Inspector Mode in manifest."
},
"borderSettings": {
"message": "ボーダー設定",
"description": "Title for the border settings section."
},
"borderMode": {
"message": "ボーダーモード",
"description": "Label for selecting the border mode."
},
"inspectorMode": {
"message": "インスペクターモード",
"description": "Label for toggling inspector mode."
},
"borderSize": {
"message": "ボーダーサイズ",
"description": "Label for selecting the size of the border."
},
"borderStyle": {
"message": "ボーダースタイル",
"description": "Label for selecting the style of the border."
},
"size": {
"message": "サイズ",
"description": "Generic label for size."
},
"style": {
"message": "スタイル",
"description": "Generic label for style."
},
"solid": {
"message": "実線",
"description": "A solid border style."
},
"dashed": {
"message": "破線",
"description": "A dashed border style."
},
"dotted": {
"message": "点線",
"description": "A dotted border style."
},
"double": {
"message": "二重線",
"description": "A double border style."
},
"enabled": {
"message": "オン",
"description": "Indicates that a feature or option is turned on."
},
"disabled": {
"message": "オフ",
"description": "Indicates that a feature or option is turned off."
},
"enableOrDisableBorders": {
"message": "ボーダーの表示を切り替える",
"description": "Instruction to enable or disable borders."
},
"enableOrDisableInspectors": {
"message": "インスペクターモードを切り替える",
"description": "Instruction to enable or disable inspectors."
},
"error": {
"message": "エラー",
"description": "Indicates that an error has occurred."
},
"restricted": {
"message": "制限済み",
"description": "Indicates that access is restricted."
},
"restrictedDescription": {
"message": "このページは制限されています。",
"description": "Description shown when the extension is restricted from running on a page."
},
"grantPermission": {
"message": "許可を付与",
"description": "Button text for granting permission to the extension."
},
"capturing": {
"message": "キャプチャ中",
"description": "Indicates that the extension is currently capturing data."
},
"takeScreenshot": {
"message": "スクリーンショットを撮る",
"description": "Button text for taking a screenshot."
},
"screenshotModeVisible": {
"message": "表示範囲",
"description": "Segmented control option for capturing only the visible area of the page."
},
"screenshotModeFullPage": {
"message": "全ページ",
"description": "Segmented control option for capturing the full scrollable page."
},
"downloadPermissionRequired": {
"message": "スクリーンショットにはダウンロード許可が必要です",
"description": "Indicates that download permission is required to take screenshots."
},
"downloadPermissionDenied": {
"message": "ダウンロード許可が拒否されました",
"description": "Indicates that download permission has been denied."
},
"keyboardShortcuts": {
"message": "キーボードショートカット",
"description": "Title for the keyboard shortcuts section."
},
"switchToDarkMode": {
"message": "ダークモードに切り替える",
"description": "Button text for switching to dark mode."
},
"switchToLightMode": {
"message": "ライトモードに切り替える",
"description": "Button text for switching to light mode."
},
"currentVersion": {
"message": "現在のバージョン: {version}",
"description": "Label for displaying the current version of the extension."
},
"selectLanguage": {
"message": "拡張機能の言語を選択します。",
"description": "Select for changing the language of the extension."
},
"none": {
"message": "なし",
"description": "Indicates that no option is selected."
},
"measurementMode": {
"message": "計測モード",
"description": "Label for toggling measurement mode."
},
"enableOrDisableMeasurement": {
"message": "計測モードを切り替える",
"description": "Instruction to enable or disable measurement mode."
},
"measurementFirst": {
"message": "1番目",
"description": "Badge label for the first selected element in measurement mode."
},
"measurementSecond": {
"message": "2番目",
"description": "Badge label for the second selected element in measurement mode."
},
"toggleMeasurementModeCommand": {
"message": "計測モードを切り替える",
"description": "Command description for toggling Measurement Mode in manifest."
},
"rulerMode": {
"message": "ルーラーモード",
"description": "Label for toggling ruler mode."
},
"enableOrDisableRuler": {
"message": "ルーラーモードを切り替える",
"description": "Instruction to enable or disable ruler mode."
},
"screenshotCaptureInProgress": {
"message": "スクリーンショットをキャプチャ中...",
"description": "Label shown in the page overlay while a full-page screenshot is being captured."
},
"toggleRulerModeCommand": {
"message": "ルーラーモードを切り替える",
"description": "Command description for toggling Ruler Mode in manifest."
}
}
2 changes: 1 addition & 1 deletion src/manifest.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"manifest_version": 3,
"name": "__MSG_extensionLongName__",
"version": "1.7.2",
"version": "1.7.3",
"description": "__MSG_extensionDescription__",
"default_locale": "en",
"permissions": [
Expand Down
12 changes: 5 additions & 7 deletions src/popup/components/Footer.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { Layout, Select, Typography } from 'antd';
import DarkModeToggle from './DarkModeToggle';
import { useLocaleContext } from '../context/LocaleContext';
import { useLocaleContext, SUPPORTED_LOCALES } from '../context/LocaleContext';
import { useTranslation } from '../hooks/useTranslation';
import { LocaleCode } from '../../types/translations';

Expand All @@ -14,12 +14,10 @@ const footerStyle: React.CSSProperties = {
width: '100%',
};

const localeOptions = [
{ value: 'en', label: 'EN' },
{ value: 'es', label: 'ES' },
{ value: 'fr', label: 'FR' },
{ value: 'de', label: 'DE' },
];
const localeOptions = SUPPORTED_LOCALES.map(code => ({
value: code,
label: code.toUpperCase(),
}));

// Placeholder for version, will be replaced during build
const version = __BP_APP_VERSION__;
Expand Down
5 changes: 3 additions & 2 deletions src/popup/context/LocaleContext.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,12 +5,13 @@ import {
ILocaleContext,
ILocaleProviderProps,
} from '../../types/translations';
import { localeMap } from '../locales';

/** Key used to store the user's preferred locale in Chrome storage. */
export const LOCALE_STORAGE_KEY = 'bp_user_locale';

/** List of supported locales for the extension. */
export const SUPPORTED_LOCALES: LocaleCode[] = ['en', 'es', 'fr', 'de'];
/** List of supported locales, derived from the locale map. */
export const SUPPORTED_LOCALES = Object.keys(localeMap) as LocaleCode[];

// Create the context for locale management
const LocaleContext = createContext<ILocaleContext>({
Expand Down
13 changes: 1 addition & 12 deletions src/popup/hooks/useTranslation.ts
Original file line number Diff line number Diff line change
@@ -1,17 +1,6 @@
import { localeMap } from '../locales';
import enMessages from '../../_locales/en/messages.json';
import esMessages from '../../_locales/es/messages.json';
import deMessages from '../../_locales/de/messages.json';
import frMessages from '../../_locales/fr/messages.json';
import { useLocaleContext } from '../context/LocaleContext';
import { LocaleCode, MessagesType } from '../../types/translations';

// Map of locale codes to their respective message objects
const localeMap: Record<LocaleCode, MessagesType> = {
en: enMessages,
es: esMessages,
fr: frMessages,
de: deMessages,
};

/**
* Custom hook to provide translation functionality based on the current locale.
Expand Down
14 changes: 14 additions & 0 deletions src/popup/locales.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import enMessages from '../_locales/en/messages.json';
import esMessages from '../_locales/es/messages.json';
import frMessages from '../_locales/fr/messages.json';
import deMessages from '../_locales/de/messages.json';
import jaMessages from '../_locales/ja/messages.json';
import type { LocaleCode, MessagesType } from '../types/translations';

export const localeMap: Record<LocaleCode, MessagesType> = {
en: enMessages,
es: esMessages,
fr: frMessages,
de: deMessages,
ja: jaMessages,
};
Loading
Loading