{t(
@@ -165,7 +180,10 @@ export function TranslationSection({ t, settings, onSettingChange }) {
step="1"
value={settings.globalBatchSize || 5}
onChange={(e) =>
- onSettingChange('globalBatchSize', parseInt(e.target.value))
+ onSettingChange(
+ 'globalBatchSize',
+ parseInt(e.target.value)
+ )
}
/>
@@ -174,7 +192,10 @@ export function TranslationSection({ t, settings, onSettingChange }) {
{t(
@@ -195,7 +216,10 @@ export function TranslationSection({ t, settings, onSettingChange }) {
{t(
@@ -212,7 +236,10 @@ export function TranslationSection({ t, settings, onSettingChange }) {
step="1"
value={settings.maxConcurrentBatches || 2}
onChange={(e) =>
- onSettingChange('maxConcurrentBatches', parseInt(e.target.value))
+ onSettingChange(
+ 'maxConcurrentBatches',
+ parseInt(e.target.value)
+ )
}
/>
@@ -222,7 +249,10 @@ export function TranslationSection({ t, settings, onSettingChange }) {
{batchingEnabled && useProviderDefaults && (
- {t('openaieBatchSizeHelp', 'Recommended: 5-10 segments (default: 8)')}
+ {t(
+ 'openaieBatchSizeHelp',
+ 'Recommended: 5-10 segments (default: 8)'
+ )}
- onSettingChange('openaieBatchSize', parseInt(e.target.value))
+ onSettingChange(
+ 'openaieBatchSize',
+ parseInt(e.target.value)
+ )
}
/>
@@ -253,10 +292,16 @@ export function TranslationSection({ t, settings, onSettingChange }) {
@@ -278,7 +326,10 @@ export function TranslationSection({ t, settings, onSettingChange }) {
{t('deeplBatchSizeLabel', 'DeepL Batch Size:')}
- {t('deeplBatchSizeHelp', 'Recommended: 2-3 segments (default: 3)')}
+ {t(
+ 'deeplBatchSizeHelp',
+ 'Recommended: 2-3 segments (default: 3)'
+ )}
- onSettingChange('deeplBatchSize', parseInt(e.target.value))
+ onSettingChange(
+ 'deeplBatchSize',
+ parseInt(e.target.value)
+ )
}
/>
@@ -297,10 +351,16 @@ export function TranslationSection({ t, settings, onSettingChange }) {
@@ -319,10 +382,16 @@ export function TranslationSection({ t, settings, onSettingChange }) {
@@ -341,7 +413,10 @@ export function TranslationSection({ t, settings, onSettingChange }) {
)}
- {t('openaieDelayHelp', 'Minimum delay between requests (default: 100ms)')}
+ {t(
+ 'openaieDelayHelp',
+ 'Minimum delay between requests (default: 100ms)'
+ )}
- onSettingChange('openaieDelay', parseInt(e.target.value))
+ onSettingChange(
+ 'openaieDelay',
+ parseInt(e.target.value)
+ )
}
/>
@@ -372,10 +456,16 @@ export function TranslationSection({ t, settings, onSettingChange }) {
@@ -394,10 +487,16 @@ export function TranslationSection({ t, settings, onSettingChange }) {
@@ -416,10 +518,16 @@ export function TranslationSection({ t, settings, onSettingChange }) {
@@ -438,10 +549,16 @@ export function TranslationSection({ t, settings, onSettingChange }) {
@@ -460,10 +580,16 @@ export function TranslationSection({ t, settings, onSettingChange }) {
diff --git a/options/hooks/useBackgroundReady.js b/options/hooks/useBackgroundReady.js
index cb9dd78..64b5769 100644
--- a/options/hooks/useBackgroundReady.js
+++ b/options/hooks/useBackgroundReady.js
@@ -20,30 +20,38 @@ export function useBackgroundReady() {
}
}, []);
- const waitForBackgroundReady = useCallback(async (maxRetries = 10, delay = 500) => {
- setChecking(true);
-
- for (let i = 0; i < maxRetries; i++) {
- if (await checkBackgroundReady()) {
- console.debug('Background script is ready', { attempt: i + 1 });
- setIsReady(true);
- setChecking(false);
- return true;
+ const waitForBackgroundReady = useCallback(
+ async (maxRetries = 10, delay = 500) => {
+ setChecking(true);
+
+ for (let i = 0; i < maxRetries; i++) {
+ if (await checkBackgroundReady()) {
+ console.debug('Background script is ready', {
+ attempt: i + 1,
+ });
+ setIsReady(true);
+ setChecking(false);
+ return true;
+ }
+ console.debug('Background script not ready, retrying...', {
+ attempt: i + 1,
+ maxRetries,
+ });
+ await new Promise((resolve) => setTimeout(resolve, delay));
}
- console.debug('Background script not ready, retrying...', {
- attempt: i + 1,
- maxRetries,
- });
- await new Promise((resolve) => setTimeout(resolve, delay));
- }
-
- console.warn('Background script did not become ready within timeout', {
- maxRetries,
- totalWaitTime: maxRetries * delay,
- });
- setChecking(false);
- return false;
- }, [checkBackgroundReady]);
+
+ console.warn(
+ 'Background script did not become ready within timeout',
+ {
+ maxRetries,
+ totalWaitTime: maxRetries * delay,
+ }
+ );
+ setChecking(false);
+ return false;
+ },
+ [checkBackgroundReady]
+ );
return {
isReady,
diff --git a/options/hooks/useDeepLTest.js b/options/hooks/useDeepLTest.js
index 8361d38..4e4ba07 100644
--- a/options/hooks/useDeepLTest.js
+++ b/options/hooks/useDeepLTest.js
@@ -21,95 +21,150 @@ export function useDeepLTest(t) {
});
}, []);
- const testConnection = useCallback(async (apiKey, apiPlan) => {
- if (
- typeof window.DeepLAPI === 'undefined' ||
- !window.DeepLAPI ||
- typeof window.DeepLAPI.testDeepLConnection !== 'function'
- ) {
- showTestResult(
- t('deeplApiNotLoadedError', '❌ DeepL API script is not available. Please refresh the page.'),
- 'error'
- );
- return;
- }
+ const testConnection = useCallback(
+ async (apiKey, apiPlan) => {
+ if (
+ typeof window.DeepLAPI === 'undefined' ||
+ !window.DeepLAPI ||
+ typeof window.DeepLAPI.testDeepLConnection !== 'function'
+ ) {
+ showTestResult(
+ t(
+ 'deeplApiNotLoadedError',
+ '❌ DeepL API script is not available. Please refresh the page.'
+ ),
+ 'error'
+ );
+ return;
+ }
+
+ if (!apiKey) {
+ showTestResult(
+ t(
+ 'deeplApiKeyError',
+ 'Please enter your DeepL API key first.'
+ ),
+ 'error'
+ );
+ return;
+ }
- if (!apiKey) {
+ setTesting(true);
showTestResult(
- t('deeplApiKeyError', 'Please enter your DeepL API key first.'),
- 'error'
+ t('testingConnection', 'Testing DeepL connection...'),
+ 'info'
);
- return;
- }
- setTesting(true);
- showTestResult(
- t('testingConnection', 'Testing DeepL connection...'),
- 'info'
- );
+ try {
+ const result = await window.DeepLAPI.testDeepLConnection(
+ apiKey,
+ apiPlan
+ );
- try {
- const result = await window.DeepLAPI.testDeepLConnection(apiKey, apiPlan);
+ if (result.success) {
+ showTestResult(
+ t(
+ 'deeplTestSuccessSimple',
+ '✅ DeepL API test successful!'
+ ),
+ 'success'
+ );
+ } else {
+ let fallbackMessage;
- if (result.success) {
- showTestResult(
- t('deeplTestSuccessSimple', '✅ DeepL API test successful!'),
- 'success'
- );
- } else {
- let fallbackMessage;
+ switch (result.error) {
+ case 'API_KEY_MISSING':
+ fallbackMessage = t(
+ 'deeplApiKeyError',
+ 'Please enter your DeepL API key first.'
+ );
+ break;
+ case 'UNEXPECTED_FORMAT':
+ fallbackMessage = t(
+ 'deeplTestUnexpectedFormat',
+ '⚠️ DeepL API responded but with unexpected format'
+ );
+ break;
+ case 'HTTP_403':
+ fallbackMessage = t(
+ 'deeplTestInvalidKey',
+ '❌ DeepL API key is invalid or has been rejected.'
+ );
+ break;
+ case 'HTTP_456':
+ fallbackMessage = t(
+ 'deeplTestQuotaExceeded',
+ '❌ DeepL API quota exceeded. Please check your usage limits.'
+ );
+ break;
+ case 'NETWORK_ERROR':
+ fallbackMessage = t(
+ 'deeplTestNetworkError',
+ '❌ Network error: Could not connect to DeepL API. Check your internet connection.'
+ );
+ break;
+ default:
+ if (result.error.startsWith('HTTP_')) {
+ fallbackMessage = t(
+ 'deeplTestApiError',
+ '❌ DeepL API error (%d): %s',
+ result.status,
+ result.message || 'Unknown error'
+ );
+ } else {
+ fallbackMessage = t(
+ 'deeplTestGenericError',
+ '❌ Test failed: %s',
+ result.message
+ );
+ }
+ break;
+ }
- switch (result.error) {
- case 'API_KEY_MISSING':
- fallbackMessage = t('deeplApiKeyError', 'Please enter your DeepL API key first.');
- break;
- case 'UNEXPECTED_FORMAT':
- fallbackMessage = t('deeplTestUnexpectedFormat', '⚠️ DeepL API responded but with unexpected format');
- break;
- case 'HTTP_403':
- fallbackMessage = t('deeplTestInvalidKey', '❌ DeepL API key is invalid or has been rejected.');
- break;
- case 'HTTP_456':
- fallbackMessage = t('deeplTestQuotaExceeded', '❌ DeepL API quota exceeded. Please check your usage limits.');
- break;
- case 'NETWORK_ERROR':
- fallbackMessage = t('deeplTestNetworkError', '❌ Network error: Could not connect to DeepL API. Check your internet connection.');
- break;
- default:
- if (result.error.startsWith('HTTP_')) {
- fallbackMessage = t('deeplTestApiError', '❌ DeepL API error (%d): %s', result.status, result.message || 'Unknown error');
- } else {
- fallbackMessage = t('deeplTestGenericError', '❌ Test failed: %s', result.message);
- }
- break;
+ const errorType =
+ result.error === 'UNEXPECTED_FORMAT'
+ ? 'warning'
+ : 'error';
+ showTestResult(fallbackMessage, errorType);
}
-
- const errorType = result.error === 'UNEXPECTED_FORMAT' ? 'warning' : 'error';
- showTestResult(fallbackMessage, errorType);
+ } catch (error) {
+ showTestResult(
+ t(
+ 'deeplTestGenericError',
+ '❌ Test failed: %s',
+ error.message
+ ),
+ 'error'
+ );
+ } finally {
+ setTesting(false);
}
- } catch (error) {
- showTestResult(
- t('deeplTestGenericError', '❌ Test failed: %s', error.message),
- 'error'
- );
- } finally {
- setTesting(false);
- }
- }, [t, showTestResult]);
+ },
+ [t, showTestResult]
+ );
- const initializeStatus = useCallback((apiKey) => {
- if (apiKey) {
- showTestResult(
- t('deeplTestNeedsTesting', '⚠️ DeepL API key needs testing.'),
- 'warning'
- );
- } else {
- showTestResult(
- t('deeplApiKeyError', 'Please enter your DeepL API key first.'),
- 'error'
- );
- }
- }, [t, showTestResult]);
+ const initializeStatus = useCallback(
+ (apiKey) => {
+ if (apiKey) {
+ showTestResult(
+ t(
+ 'deeplTestNeedsTesting',
+ '⚠️ DeepL API key needs testing.'
+ ),
+ 'warning'
+ );
+ } else {
+ showTestResult(
+ t(
+ 'deeplApiKeyError',
+ 'Please enter your DeepL API key first.'
+ ),
+ 'error'
+ );
+ }
+ },
+ [t, showTestResult]
+ );
return {
testResult,
diff --git a/options/hooks/useOpenAITest.js b/options/hooks/useOpenAITest.js
index 92c837f..2b4c71d 100644
--- a/options/hooks/useOpenAITest.js
+++ b/options/hooks/useOpenAITest.js
@@ -23,82 +23,105 @@ export function useOpenAITest(t, fetchAvailableModels) {
});
}, []);
- const testConnection = useCallback(async (apiKey, baseUrl) => {
- if (!apiKey) {
+ const testConnection = useCallback(
+ async (apiKey, baseUrl) => {
+ if (!apiKey) {
+ showTestResult(
+ t('openaiApiKeyError', 'Please enter an API key first.'),
+ 'error'
+ );
+ return;
+ }
+
+ setTesting(true);
showTestResult(
- t('openaiApiKeyError', 'Please enter an API key first.'),
- 'error'
+ t('openaiTestingConnection', 'Testing connection...'),
+ 'info'
);
- return;
- }
- setTesting(true);
- showTestResult(
- t('openaiTestingConnection', 'Testing connection...'),
- 'info'
- );
+ try {
+ await fetchAvailableModels(apiKey, baseUrl);
+ showTestResult(
+ t('openaiConnectionSuccessful', 'Connection successful!'),
+ 'success'
+ );
+ } catch (error) {
+ showTestResult(
+ t(
+ 'openaiConnectionFailed',
+ 'Connection failed: %s',
+ error.message
+ ),
+ 'error'
+ );
+ } finally {
+ setTesting(false);
+ }
+ },
+ [t, fetchAvailableModels, showTestResult]
+ );
- try {
- await fetchAvailableModels(apiKey, baseUrl);
- showTestResult(
- t('openaiConnectionSuccessful', 'Connection successful!'),
- 'success'
- );
- } catch (error) {
+ const fetchModels = useCallback(
+ async (apiKey, baseUrl, onModelsLoaded) => {
+ if (!apiKey) {
+ return;
+ }
+
+ setFetchingModels(true);
showTestResult(
- t('openaiConnectionFailed', 'Connection failed: %s', error.message),
- 'error'
+ t('openaieFetchingModels', 'Fetching models...'),
+ 'info'
);
- } finally {
- setTesting(false);
- }
- }, [t, fetchAvailableModels, showTestResult]);
- const fetchModels = useCallback(async (apiKey, baseUrl, onModelsLoaded) => {
- if (!apiKey) {
- return;
- }
+ try {
+ const models = await fetchAvailableModels(apiKey, baseUrl);
- setFetchingModels(true);
- showTestResult(
- t('openaieFetchingModels', 'Fetching models...'),
- 'info'
- );
+ if (onModelsLoaded) {
+ onModelsLoaded(models);
+ }
- try {
- const models = await fetchAvailableModels(apiKey, baseUrl);
-
- if (onModelsLoaded) {
- onModelsLoaded(models);
+ showTestResult(
+ t(
+ 'openaiModelsFetchedSuccessfully',
+ 'Models fetched successfully.'
+ ),
+ 'success'
+ );
+ } catch (error) {
+ showTestResult(
+ t(
+ 'openaiFailedToFetchModels',
+ 'Failed to fetch models: %s',
+ error.message
+ ),
+ 'error'
+ );
+ } finally {
+ setFetchingModels(false);
}
+ },
+ [t, fetchAvailableModels, showTestResult]
+ );
- showTestResult(
- t('openaiModelsFetchedSuccessfully', 'Models fetched successfully.'),
- 'success'
- );
- } catch (error) {
- showTestResult(
- t('openaiFailedToFetchModels', 'Failed to fetch models: %s', error.message),
- 'error'
- );
- } finally {
- setFetchingModels(false);
- }
- }, [t, fetchAvailableModels, showTestResult]);
-
- const initializeStatus = useCallback((apiKey) => {
- if (apiKey) {
- showTestResult(
- t('openaiTestNeedsTesting', '⚠️ OpenAI-compatible API key needs testing.'),
- 'warning'
- );
- } else {
- showTestResult(
- t('openaiApiKeyError', 'Please enter your API key first.'),
- 'error'
- );
- }
- }, [t, showTestResult]);
+ const initializeStatus = useCallback(
+ (apiKey) => {
+ if (apiKey) {
+ showTestResult(
+ t(
+ 'openaiTestNeedsTesting',
+ '⚠️ OpenAI-compatible API key needs testing.'
+ ),
+ 'warning'
+ );
+ } else {
+ showTestResult(
+ t('openaiApiKeyError', 'Please enter your API key first.'),
+ 'error'
+ );
+ }
+ },
+ [t, showTestResult]
+ );
return {
testResult,
diff --git a/options/hooks/useVertexTest.js b/options/hooks/useVertexTest.js
index 0ed7be7..fbd5ddd 100644
--- a/options/hooks/useVertexTest.js
+++ b/options/hooks/useVertexTest.js
@@ -1,5 +1,8 @@
import { useState, useCallback } from 'react';
-import { getAccessTokenFromServiceAccount, checkTokenExpiration as checkExpiration } from '../../utils/vertexAuth.js';
+import {
+ getAccessTokenFromServiceAccount,
+ checkTokenExpiration as checkExpiration,
+} from '../../utils/vertexAuth.js';
/**
* Hook for testing Vertex AI and importing service account JSON
@@ -9,7 +12,12 @@ import { getAccessTokenFromServiceAccount, checkTokenExpiration as checkExpirati
* @param {Function} onProviderChange - Callback to switch provider
* @returns {Object} Test functions and state
*/
-export function useVertexTest(t, onAccessTokenChange, onProjectIdChange, onProviderChange) {
+export function useVertexTest(
+ t,
+ onAccessTokenChange,
+ onProjectIdChange,
+ onProviderChange
+) {
const [testResult, setTestResult] = useState({
visible: false,
message: '',
@@ -39,235 +47,307 @@ export function useVertexTest(t, onAccessTokenChange, onProjectIdChange, onProvi
});
}, []);
- const testConnection = useCallback(async (accessToken, projectId, location, model) => {
- if (!accessToken || !projectId) {
- showTestResult(
- t('vertexMissingConfig', 'Please enter access token and project ID.'),
- 'error'
- );
- return;
- }
-
- setTesting(true);
- showTestResult(
- t('openaiTestingConnection', 'Testing connection...'),
- 'info'
- );
-
- try {
- const normalizedModel = model.startsWith('models/') ? model.split('/').pop() : model;
- const endpoint = `https://${location}-aiplatform.googleapis.com/v1/projects/${projectId}/locations/${location}/publishers/google/models/${normalizedModel}:generateContent`;
-
- const body = {
- contents: [{ role: 'user', parts: [{ text: 'ping' }] }],
- generationConfig: { temperature: 0 },
- };
- const res = await fetch(endpoint, {
- method: 'POST',
- headers: {
- 'Content-Type': 'application/json',
- Authorization: `Bearer ${accessToken}`,
- },
- body: JSON.stringify(body),
- });
-
- if (!res.ok) {
- const text = await res.text();
- throw new Error(`${res.status} ${res.statusText}: ${text}`);
+ const testConnection = useCallback(
+ async (accessToken, projectId, location, model) => {
+ if (!accessToken || !projectId) {
+ showTestResult(
+ t(
+ 'vertexMissingConfig',
+ 'Please enter access token and project ID.'
+ ),
+ 'error'
+ );
+ return;
}
+ setTesting(true);
showTestResult(
- t('openaiConnectionSuccessful', 'Connection successful!'),
- 'success'
- );
- } catch (error) {
- showTestResult(
- t('vertexConnectionFailed', 'Connection failed: %s', error.message),
- 'error'
- );
- } finally {
- setTesting(false);
- }
- }, [t, showTestResult]);
-
- const importServiceAccountJson = useCallback(async (file) => {
- if (!file) return;
-
- setImporting(true);
- showImportResult(
- t('vertexImporting', 'Importing service account...'),
- 'info'
- );
-
- try {
- const text = await file.text();
- let sa;
- try {
- sa = JSON.parse(text);
- } catch (e) {
- throw new Error('Invalid JSON file.');
- }
-
- const required = ['type', 'project_id', 'private_key', 'client_email'];
- const missing = required.filter((k) => !sa[k] || typeof sa[k] !== 'string' || sa[k].trim() === '');
- if (missing.length > 0) {
- throw new Error(`Missing fields: ${missing.join(', ')}`);
- }
- if (sa.type !== 'service_account') {
- throw new Error('JSON is not a service account key.');
- }
-
- showImportResult(
- t('vertexGeneratingToken', 'Generating access token...'),
+ t('openaiTestingConnection', 'Testing connection...'),
'info'
);
- const { accessToken, expiresIn } = await getAccessTokenFromServiceAccount(sa);
-
- // Calculate token expiration time
- const expiresAt = Date.now() + (expiresIn * 1000);
-
- // Store the service account JSON for auto-refresh
- // Security Note: Storing the complete service account (including private_key) in
- // chrome.storage.local is a security trade-off to enable automatic token refresh.
- // Chrome extension storage is isolated per-extension and encrypted at rest by the OS.
- // Alternative approaches (e.g., storing only the token) would require manual
- // re-import every hour when tokens expire. Users with high security requirements
- // should use short-lived tokens and manual refresh instead of storing credentials.
- if (typeof chrome !== 'undefined' && chrome.storage) {
- await chrome.storage.local.set({
- vertexServiceAccount: sa,
- vertexTokenExpiresAt: expiresAt,
- });
- }
- // Update settings via callbacks
- await onProjectIdChange(sa.project_id);
- await onAccessTokenChange(accessToken);
+ try {
+ const normalizedModel = model.startsWith('models/')
+ ? model.split('/').pop()
+ : model;
+ const endpoint = `https://${location}-aiplatform.googleapis.com/v1/projects/${projectId}/locations/${location}/publishers/google/models/${normalizedModel}:generateContent`;
+
+ const body = {
+ contents: [{ role: 'user', parts: [{ text: 'ping' }] }],
+ generationConfig: { temperature: 0 },
+ };
+ const res = await fetch(endpoint, {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ Authorization: `Bearer ${accessToken}`,
+ },
+ body: JSON.stringify(body),
+ });
- showImportResult(
- '✅ ' + t('vertexImportSuccess', 'Service account imported and token generated.'),
- 'success'
- );
+ if (!res.ok) {
+ const text = await res.text();
+ throw new Error(`${res.status} ${res.statusText}: ${text}`);
+ }
- // Switch provider to Vertex
- if (onProviderChange) {
- await onProviderChange('vertex_gemini');
+ showTestResult(
+ t('openaiConnectionSuccessful', 'Connection successful!'),
+ 'success'
+ );
+ } catch (error) {
+ showTestResult(
+ t(
+ 'vertexConnectionFailed',
+ 'Connection failed: %s',
+ error.message
+ ),
+ 'error'
+ );
+ } finally {
+ setTesting(false);
}
+ },
+ [t, showTestResult]
+ );
+
+ const importServiceAccountJson = useCallback(
+ async (file) => {
+ if (!file) return;
- return { projectId: sa.project_id, accessToken, expiresAt };
- } catch (error) {
- showImportResult(
- t('vertexImportFailed', 'Import failed: %s', error.message),
- 'error'
- );
- throw error;
- } finally {
- setImporting(false);
- }
- }, [t, showImportResult, onAccessTokenChange, onProjectIdChange, onProviderChange]);
-
- const refreshToken = useCallback(async (silent = false) => {
- if (!silent) {
setImporting(true);
showImportResult(
- t('vertexRefreshingToken', 'Refreshing access token...'),
+ t('vertexImporting', 'Importing service account...'),
'info'
);
- }
-
- try {
- // Retrieve stored service account
- if (typeof chrome === 'undefined' || !chrome.storage) {
- throw new Error('Chrome storage not available');
- }
- const result = await chrome.storage.local.get(['vertexServiceAccount']);
- const sa = result.vertexServiceAccount;
-
- if (!sa) {
- throw new Error('No stored service account found. Please import the JSON file again.');
- }
-
- // Generate new token
- const { accessToken, expiresIn } = await getAccessTokenFromServiceAccount(sa);
+ try {
+ const text = await file.text();
+ let sa;
+ try {
+ sa = JSON.parse(text);
+ } catch (e) {
+ throw new Error('Invalid JSON file.');
+ }
- // Calculate new expiration time
- const expiresAt = Date.now() + (expiresIn * 1000);
+ const required = [
+ 'type',
+ 'project_id',
+ 'private_key',
+ 'client_email',
+ ];
+ const missing = required.filter(
+ (k) =>
+ !sa[k] ||
+ typeof sa[k] !== 'string' ||
+ sa[k].trim() === ''
+ );
+ if (missing.length > 0) {
+ throw new Error(`Missing fields: ${missing.join(', ')}`);
+ }
+ if (sa.type !== 'service_account') {
+ throw new Error('JSON is not a service account key.');
+ }
- // Update expiration time in storage
- await chrome.storage.local.set({
- vertexTokenExpiresAt: expiresAt,
- });
+ showImportResult(
+ t('vertexGeneratingToken', 'Generating access token...'),
+ 'info'
+ );
+ const { accessToken, expiresIn } =
+ await getAccessTokenFromServiceAccount(sa);
+
+ // Calculate token expiration time
+ const expiresAt = Date.now() + expiresIn * 1000;
+
+ // Store the service account JSON for auto-refresh
+ // Security Note: Storing the complete service account (including private_key) in
+ // chrome.storage.local is a security trade-off to enable automatic token refresh.
+ // Chrome extension storage is isolated per-extension and encrypted at rest by the OS.
+ // Alternative approaches (e.g., storing only the token) would require manual
+ // re-import every hour when tokens expire. Users with high security requirements
+ // should use short-lived tokens and manual refresh instead of storing credentials.
+ if (typeof chrome !== 'undefined' && chrome.storage) {
+ await chrome.storage.local.set({
+ vertexServiceAccount: sa,
+ vertexTokenExpiresAt: expiresAt,
+ });
+ }
- // Update settings via callback
- await onAccessTokenChange(accessToken);
+ // Update settings via callbacks
+ await onProjectIdChange(sa.project_id);
+ await onAccessTokenChange(accessToken);
- if (!silent) {
showImportResult(
- '✅ ' + t('vertexTokenRefreshed', 'Access token refreshed successfully.'),
+ '✅ ' +
+ t(
+ 'vertexImportSuccess',
+ 'Service account imported and token generated.'
+ ),
'success'
);
- } else {
- console.log('[Vertex AI] Access token auto-refreshed successfully');
- }
- return { accessToken, expiresAt };
- } catch (error) {
- if (!silent) {
+ // Switch provider to Vertex
+ if (onProviderChange) {
+ await onProviderChange('vertex_gemini');
+ }
+
+ return { projectId: sa.project_id, accessToken, expiresAt };
+ } catch (error) {
showImportResult(
- t('vertexRefreshFailed', 'Token refresh failed: %s', error.message),
+ t('vertexImportFailed', 'Import failed: %s', error.message),
'error'
);
- } else {
- console.error('[Vertex AI] Auto-refresh failed:', error);
+ throw error;
+ } finally {
+ setImporting(false);
}
- throw error;
- } finally {
+ },
+ [
+ t,
+ showImportResult,
+ onAccessTokenChange,
+ onProjectIdChange,
+ onProviderChange,
+ ]
+ );
+
+ const refreshToken = useCallback(
+ async (silent = false) => {
if (!silent) {
- setImporting(false);
+ setImporting(true);
+ showImportResult(
+ t('vertexRefreshingToken', 'Refreshing access token...'),
+ 'info'
+ );
}
- }
- }, [t, showImportResult, onAccessTokenChange]);
+
+ try {
+ // Retrieve stored service account
+ if (typeof chrome === 'undefined' || !chrome.storage) {
+ throw new Error('Chrome storage not available');
+ }
+
+ const result = await chrome.storage.local.get([
+ 'vertexServiceAccount',
+ ]);
+ const sa = result.vertexServiceAccount;
+
+ if (!sa) {
+ throw new Error(
+ 'No stored service account found. Please import the JSON file again.'
+ );
+ }
+
+ // Generate new token
+ const { accessToken, expiresIn } =
+ await getAccessTokenFromServiceAccount(sa);
+
+ // Calculate new expiration time
+ const expiresAt = Date.now() + expiresIn * 1000;
+
+ // Update expiration time in storage
+ await chrome.storage.local.set({
+ vertexTokenExpiresAt: expiresAt,
+ });
+
+ // Update settings via callback
+ await onAccessTokenChange(accessToken);
+
+ if (!silent) {
+ showImportResult(
+ '✅ ' +
+ t(
+ 'vertexTokenRefreshed',
+ 'Access token refreshed successfully.'
+ ),
+ 'success'
+ );
+ } else {
+ console.log(
+ '[Vertex AI] Access token auto-refreshed successfully'
+ );
+ }
+
+ return { accessToken, expiresAt };
+ } catch (error) {
+ if (!silent) {
+ showImportResult(
+ t(
+ 'vertexRefreshFailed',
+ 'Token refresh failed: %s',
+ error.message
+ ),
+ 'error'
+ );
+ } else {
+ console.error('[Vertex AI] Auto-refresh failed:', error);
+ }
+ throw error;
+ } finally {
+ if (!silent) {
+ setImporting(false);
+ }
+ }
+ },
+ [t, showImportResult, onAccessTokenChange]
+ );
const checkTokenExpiration = useCallback(async () => {
return await checkExpiration();
}, []);
- const initializeStatus = useCallback(async (accessToken, projectId) => {
- if (accessToken && projectId) {
- // Check if token is about to expire
- const expirationInfo = await checkTokenExpiration();
-
- if (expirationInfo) {
- if (expirationInfo.isExpired) {
- showTestResult(
- t('vertexTokenExpired', '⚠️ Access token expired. Click refresh to renew.'),
- 'warning'
- );
- } else if (expirationInfo.shouldRefresh) {
- showTestResult(
- t('vertexTokenExpiringSoon', `⚠️ Token expires in ${expirationInfo.expiresInMinutes} minutes. Consider refreshing.`),
- 'warning'
- );
+ const initializeStatus = useCallback(
+ async (accessToken, projectId) => {
+ if (accessToken && projectId) {
+ // Check if token is about to expire
+ const expirationInfo = await checkTokenExpiration();
+
+ if (expirationInfo) {
+ if (expirationInfo.isExpired) {
+ showTestResult(
+ t(
+ 'vertexTokenExpired',
+ '⚠️ Access token expired. Click refresh to renew.'
+ ),
+ 'warning'
+ );
+ } else if (expirationInfo.shouldRefresh) {
+ showTestResult(
+ t(
+ 'vertexTokenExpiringSoon',
+ `⚠️ Token expires in ${expirationInfo.expiresInMinutes} minutes. Consider refreshing.`
+ ),
+ 'warning'
+ );
+ } else {
+ showTestResult(
+ t(
+ 'vertexConfigured',
+ '⚠️ Vertex AI configured. Please test connection.'
+ ),
+ 'warning'
+ );
+ }
} else {
showTestResult(
- t('vertexConfigured', '⚠️ Vertex AI configured. Please test connection.'),
+ t(
+ 'vertexConfigured',
+ '⚠️ Vertex AI configured. Please test connection.'
+ ),
'warning'
);
}
} else {
showTestResult(
- t('vertexConfigured', '⚠️ Vertex AI configured. Please test connection.'),
- 'warning'
+ t(
+ 'vertexNotConfigured',
+ 'Please import service account JSON or enter credentials.'
+ ),
+ 'error'
);
}
- } else {
- showTestResult(
- t('vertexNotConfigured', 'Please import service account JSON or enter credentials.'),
- 'error'
- );
- }
- }, [t, showTestResult, checkTokenExpiration]);
+ },
+ [t, showTestResult, checkTokenExpiration]
+ );
return {
testResult,
@@ -283,4 +363,3 @@ export function useVertexTest(t, onAccessTokenChange, onProjectIdChange, onProvi
showImportResult,
};
}
-
diff --git a/options/options.css b/options/options.css
index f849b98..f68a84b 100644
--- a/options/options.css
+++ b/options/options.css
@@ -740,12 +740,14 @@ button#testDeepLButton.btn-sparkle:hover span.text {
border-radius: 8px;
background: linear-gradient(180deg, #007aff 0%, #0051d5 100%);
color: white;
- font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', sans-serif;
+ font-family:
+ -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue',
+ sans-serif;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
- box-shadow:
+ box-shadow:
0 1px 2px rgba(0, 122, 255, 0.3),
0 2px 4px rgba(0, 0, 0, 0.1);
position: relative;
@@ -759,13 +761,17 @@ button#testDeepLButton.btn-sparkle:hover span.text {
left: 0;
right: 0;
height: 50%;
- background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 100%);
+ background: linear-gradient(
+ 180deg,
+ rgba(255, 255, 255, 0.15) 0%,
+ rgba(255, 255, 255, 0) 100%
+ );
pointer-events: none;
}
.apple-file-btn:hover {
background: linear-gradient(180deg, #0077ed 0%, #004fc7 100%);
- box-shadow:
+ box-shadow:
0 2px 4px rgba(0, 122, 255, 0.4),
0 4px 8px rgba(0, 0, 0, 0.15);
transform: translateY(-1px);
@@ -773,7 +779,7 @@ button#testDeepLButton.btn-sparkle:hover span.text {
.apple-file-btn:active {
background: linear-gradient(180deg, #0051d5 0%, #003fa8 100%);
- box-shadow:
+ box-shadow:
0 1px 2px rgba(0, 122, 255, 0.3),
0 1px 3px rgba(0, 0, 0, 0.2);
transform: translateY(0);
@@ -782,8 +788,7 @@ button#testDeepLButton.btn-sparkle:hover span.text {
.apple-file-btn:disabled {
background: linear-gradient(180deg, #c7c7cc 0%, #aeaeb2 100%);
cursor: not-allowed;
- box-shadow:
- 0 1px 2px rgba(0, 0, 0, 0.1);
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.apple-file-btn:disabled::before {
diff --git a/options/options.html b/options/options.html
index 97971c2..3bee63c 100644
--- a/options/options.html
+++ b/options/options.html
@@ -9,4 +9,4 @@