Add i18n support for Turkish and English

.gitignore

@@ -88,4 +88,5 @@ lerna-debug.log
 
 # System Files
 .DS_Store
-Thumbs.db
+Thumbs.db*.html
+test-*.js

I18N-README.md

@@ -0,0 +1,153 @@
+# i18n (Internationalization) Implementation
+
+## Overview
+This extension now supports multiple languages (Turkish and English) using Chrome's native i18n API.
+
+## Structure
+
+```
+src/
+├── _locales/
+│   ├── tr/
+│   │   └── messages.json    # Turkish translations (55 keys)
+│   └── en/
+│       └── messages.json    # English translations (55 keys)
+├── i18n.js                  # i18n helper utilities
+├── manifest.json            # Updated with i18n references
+├── popup.html               # Updated with data-i18n attributes
+├── popup.js                 # Updated to use i18n
+├── options.html             # Updated with data-i18n attributes
+├── options.js               # Updated to use i18n
+└── background.js            # Updated for i18n messages
+```
+
+## Features
+
+### 1. Automatic Language Detection
+- Detects browser's language setting on first use
+- Defaults to Turkish if browser language is not English
+- Supports `tr` (Turkish) and `en` (English)
+
+### 2. Manual Language Selection
+- Dropdown selector in both popup and options pages
+- Language preference saved in Chrome sync storage
+- Persists across browser sessions
+- Changes take effect immediately on reload
+
+### 3. Comprehensive Translation Coverage
+- UI labels and buttons
+- Error messages
+- Status messages
+- Jira issue descriptions (ADF format)
+- Placeholder texts
+- Tooltips and titles
+
+## Usage
+
+### For End Users
+1. Open the extension popup or options page
+2. Select your preferred language from the "Language" / "Dil" dropdown
+3. The interface will reload in the selected language
+
+### For Developers
+
+#### Adding New Translations
+1. Add the key-value pair to both `_locales/tr/messages.json` and `_locales/en/messages.json`
+2. Use the key in your code:
+
+**In HTML:**
+```html
+<div data-i18n="yourKey">Default text</div>
+```
+
+**In JavaScript:**
+```javascript
+const text = i18n.getMessage("yourKey");
+// or in background.js:
+const text = msg("yourKey");
+```
+
+#### Available i18n Helper Functions
+
+**In popup.js and options.js:**
+```javascript
+i18n.getMessage(key, substitutions)  // Get translated message
+i18n.getPreferredLanguage()          // Get user's preferred language
+i18n.setPreferredLanguage(lang)      // Set user's preferred language
+i18n.translatePage()                 // Translate all elements with data-i18n attributes
+```
+
+**In background.js:**
+```javascript
+msg(key, substitutions)  // Shorthand for chrome.i18n.getMessage
+```
+
+#### HTML Attributes for i18n
+- `data-i18n`: Translates element's textContent
+- `data-i18n-placeholder`: Translates input's placeholder
+- `data-i18n-title`: Translates element's title attribute
+- `data-i18n-value`: Translates input's value attribute
+- `data-i18n-html`: Translates element's innerHTML (use with caution)
+
+## Translation Keys
+
+### UI Elements
+- `extName`, `extDescription` - Extension metadata
+- `popupTitle`, `popupSubtitle` - Popup header
+- `optionsTitle`, `optionsSubtitle` - Options header
+- `labelCookies`, `labelStorage` - Toggle labels
+- `btnCreateIssue`, `btnSave` - Action buttons
+
+### Status Messages
+- `statusCollecting` - "Collecting information..."
+- `statusCreated` - "Created:"
+- `statusError` - "Error:"
+- `alertSaved` - "Saved"
+
+### Error Messages
+- `errorMissingSettings` - Settings not configured
+- `errorAlreadyRecording` - Recording already in progress
+- `errorCaptureTabFailed` - Tab capture failed
+- `errorIssueCreateFailed` - Issue creation failed
+- `errorAttachmentFailed` - Attachment upload failed
+
+### Jira ADF Content
+- `adfHeadingAutoReport` - "Automated Report" / "Otomatik Rapor"
+- `adfSummaryUrl`, `adfSummaryTime`, etc. - Report field labels
+- `adfIncluded`, `adfNotIncluded` - Status indicators
+- `issueSummaryPrefix` - "[Bug]" prefix for issues
+
+### Language Selection
+- `labelLanguage` - "Language:" / "Dil:"
+- `languageTurkish` - "Türkçe"
+- `languageEnglish` - "English"
+
+## Testing
+
+Run the validation script to ensure i18n implementation is correct:
+```bash
+node test-i18n.js
+```
+
+This verifies:
+- Manifest has i18n references
+- Both locale directories exist
+- Locale files have matching keys
+- All required keys are present
+- HTML files reference i18n.js
+- HTML files have data-i18n attributes
+- Background.js uses chrome.i18n API
+
+## Browser Compatibility
+- Chrome/Chromium: Full support
+- Edge: Full support
+- Other Chromium-based browsers: Full support
+
+## Default Language
+The default locale is set to Turkish (`tr`) in `manifest.json`, matching the original extension's language.
+
+## Notes
+- Language preference is synced across devices using Chrome sync storage
+- When adding new UI text, always add it to both language files
+- Keep translation keys consistent and descriptive
+- The i18n system uses Chrome's native `chrome.i18n` API for best compatibility

i18n-demo.html

@@ -0,0 +1,230 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>i18n Demo - Jira Bug Reporter</title>
+  <style>
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+      max-width: 1200px;
+      margin: 0 auto;
+      padding: 20px;
+      background: #f5f5f5;
+    }
+    h1 {
+      text-align: center;
+      color: #333;
+    }
+    .demo-container {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 20px;
+      margin-top: 20px;
+    }
+    .language-section {
+      background: white;
+      border-radius: 8px;
+      padding: 20px;
+      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    }
+    .language-section h2 {
+      margin-top: 0;
+      color: #0052CC;
+      border-bottom: 2px solid #0052CC;
+      padding-bottom: 10px;
+    }
+    .translation-item {
+      margin: 15px 0;
+      padding: 10px;
+      background: #f8f9fa;
+      border-left: 3px solid #0052CC;
+    }
+    .key {
+      font-weight: bold;
+      color: #666;
+      font-size: 0.85em;
+      margin-bottom: 5px;
+    }
+    .value {
+      color: #333;
+      font-size: 1em;
+    }
+    .highlight {
+      background: #fff3cd;
+      padding: 2px 4px;
+      border-radius: 3px;
+    }
+    .success {
+      background: #d4edda;
+      color: #155724;
+      padding: 15px;
+      border-radius: 4px;
+      margin-bottom: 20px;
+      text-align: center;
+      font-weight: bold;
+    }
+  </style>
+</head>
+<body>
+  <h1>🌍 Jira Bug Reporter - Multi-Language Support Demo</h1>
+
+  <div class="success">
+    ✓ i18n Implementation Complete - Turkish & English Support Added!
+  </div>
+
+  <div class="demo-container">
+    <div class="language-section">
+      <h2>🇹🇷 Türkçe (Turkish)</h2>
+
+      <div class="translation-item">
+        <div class="key">Extension Name</div>
+        <div class="value">Jira Bug Reporter</div>
+      </div>
+
+      <div class="translation-item">
+        <div class="key">Extension Description</div>
+        <div class="value">Aktif sayfadan hata ve ağ bilgilerini toplayıp Jira'da bilet açar.</div>
+      </div>
+
+      <div class="translation-item">
+        <div class="key">Popup Title</div>
+        <div class="value">Jira Bug Reporter</div>
+      </div>
+
+      <div class="translation-item">
+        <div class="key">Popup Subtitle</div>
+        <div class="value">Tek tıkla bu sayfanın ekran görüntüsü ve loglarını toplayıp Jira'da bilet açar.</div>
+      </div>
+
+      <div class="translation-item">
+        <div class="key">Create Issue Button</div>
+        <div class="value"><span class="highlight">Jira'da bilet aç</span></div>
+      </div>
+
+      <div class="translation-item">
+        <div class="key">Settings Title</div>
+        <div class="value">Jira Bug Reporter Ayarları</div>
+      </div>
+
+      <div class="translation-item">
+        <div class="key">Language Label</div>
+        <div class="value"><span class="highlight">Dil:</span></div>
+      </div>
+
+      <div class="translation-item">
+        <div class="key">Language Options</div>
+        <div class="value">Türkçe / English</div>
+      </div>
+
+      <div class="translation-item">
+        <div class="key">Save Button</div>
+        <div class="value">Kaydet</div>
+      </div>
+
+      <div class="translation-item">
+        <div class="key">Status Messages</div>
+        <div class="value">
+          • Bilgiler toplanıyor...<br>
+          • Oluşturuldu:<br>
+          • Hata:<br>
+          • Kaydedildi
+        </div>
+      </div>
+    </div>
+
+    <div class="language-section">
+      <h2>🇬🇧 English</h2>
+
+      <div class="translation-item">
+        <div class="key">Extension Name</div>
+        <div class="value">Jira Bug Reporter</div>
+      </div>
+
+      <div class="translation-item">
+        <div class="key">Extension Description</div>
+        <div class="value">Collects error and network information from the active page and creates a Jira ticket.</div>
+      </div>
+
+      <div class="translation-item">
+        <div class="key">Popup Title</div>
+        <div class="value">Jira Bug Reporter</div>
+      </div>
+
+      <div class="translation-item">
+        <div class="key">Popup Subtitle</div>
+        <div class="value">Collect screenshot and logs from this page and create a Jira ticket with one click.</div>
+      </div>
+
+      <div class="translation-item">
+        <div class="key">Create Issue Button</div>
+        <div class="value"><span class="highlight">Create Jira Issue</span></div>
+      </div>
+
+      <div class="translation-item">
+        <div class="key">Settings Title</div>
+        <div class="value">Jira Bug Reporter Settings</div>
+      </div>
+
+      <div class="translation-item">
+        <div class="key">Language Label</div>
+        <div class="value"><span class="highlight">Language:</span></div>
+      </div>
+
+      <div class="translation-item">
+        <div class="key">Language Options</div>
+        <div class="value">Türkçe / English</div>
+      </div>
+
+      <div class="translation-item">
+        <div class="key">Save Button</div>
+        <div class="value">Save</div>
+      </div>
+
+      <div class="translation-item">
+        <div class="key">Status Messages</div>
+        <div class="value">
+          • Collecting information...<br>
+          • Created:<br>
+          • Error:<br>
+          • Saved
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div style="margin-top: 30px; padding: 20px; background: white; border-radius: 8px;">
+    <h3>📋 Implementation Summary</h3>
+    <ul>
+      <li>✅ Created <code>_locales/tr/messages.json</code> with 55 Turkish translation keys</li>
+      <li>✅ Created <code>_locales/en/messages.json</code> with 55 English translation keys</li>
+      <li>✅ Updated <code>manifest.json</code> with i18n references and default_locale</li>
+      <li>✅ Created <code>i18n.js</code> helper module for translation utilities</li>
+      <li>✅ Updated <code>popup.html</code> and <code>popup.js</code> with i18n support</li>
+      <li>✅ Updated <code>options.html</code> and <code>options.js</code> with i18n support</li>
+      <li>✅ Updated <code>background.js</code> with i18n for error messages and ADF content</li>
+      <li>✅ Added language selector dropdown in both popup and options pages</li>
+      <li>✅ Language preference is saved and persists across sessions</li>
+      <li>✅ Automatic language detection based on browser settings</li>
+    </ul>
+
+    <h3>🔧 How It Works</h3>
+    <ul>
+      <li><strong>Automatic Detection:</strong> The extension detects browser language (Turkish/English) on first use</li>
+      <li><strong>Manual Selection:</strong> Users can change language via dropdown in popup or settings</li>
+      <li><strong>Persistent Storage:</strong> Language preference is saved in Chrome sync storage</li>
+      <li><strong>Dynamic Translation:</strong> All UI text is loaded from locale files at runtime</li>
+      <li><strong>Jira Issues:</strong> Even the Jira issue content (ADF format) is translated</li>
+    </ul>
+
+    <h3>🎯 Key Features</h3>
+    <ul>
+      <li>Chrome's native i18n API (chrome.i18n.getMessage)</li>
+      <li>Standard _locales directory structure</li>
+      <li>HTML data-i18n attributes for automatic translation</li>
+      <li>JavaScript integration for dynamic content</li>
+      <li>Default locale: Turkish (as per original extension)</li>
+      <li>Full coverage: UI labels, buttons, messages, errors, and Jira descriptions</li>
+    </ul>
+  </div>
+</body>
+</html>