addonova 1.0.3 → 1.0.4

package/README.md

@@ -1,6 +1,8 @@
-# addonova
+# Addonova
 
-WebExtension framework for scaffolding and building cross-browser browser extensions.
+[![Addonova Social Banner](https://raw.githubusercontent.com/code-hemu/addonova/refs/heads/main/docs/assets/capture.jpg)](https://github.com/code-hemu/addonova)
+
+Addonova is a framework that allows developers to build extensions for multiple browsers. Developers can easily build, test, and manage extensions.
 
 ## Quick Start
 
@@ -26,6 +28,7 @@ npm run release
 | `addonova init <name>` | Scaffold a new extension project |
 | `addonova build [options]` | Build the current extension project |
 | `addonova zip` | Create release zip bundles |
+| `addonova tool` | Open the i18n tools UI in a browser |
 | `addonova --help` | Show help |
 
 ## Build Scripts
@@ -50,7 +53,6 @@ npm run debug:thunderbird
 npm run debug:naver
 
 npm run dev
-npm run watch
 npm run zip
 npm test
 ```
@@ -62,6 +64,7 @@ npx addonova build --all --release
 npx addonova build --chrome --debug
 npx addonova build --all --debug --watch
 npx addonova zip
+npx addonova tool
 ```
 
 ## Build Options
@@ -128,9 +131,19 @@ This is my extension description.
 Run the interactive message manager from a generated project:
 
 ```bash
-node node_modules/addonova/src/tools/translate.js
+npm run tool
+```
+
+Or use the i18n tools UI:
+
+```bash
+npx addonova tool
 ```
 
+This opens a full UI at `http://localhost:9876` with:
+- **Translate tab** — view all locale messages, add new messages with auto-translation, delete messages
+- **JSON → i18n tab** — drag-and-drop a `messages.json` file to convert to `.i18n` format
+
 ## Development
 
 Run the test suite:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "addonova",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "Web Extension Framework",
   "type": "module",
   "scripts": {
@@ -19,10 +19,11 @@
     "templates/"
   ],
   "dependencies": {
-    "@craftamap/esbuild-plugin-html": "^0.9.0",
     "chokidar": "^5.0.0",
     "esbuild": "^0.27.3",
     "globby": "^16.1.0",
+    "html-minifier-terser": "^7.2.0",
+    "htmlhint": "^1.9.2",
     "web-ext": "^10.3.0",
     "yazl": "^3.3.1"
   },

package/src/build/bundle-html.js

@@ -1,91 +1,120 @@
 import path from 'node:path';
-import { build } from 'esbuild';
-import { htmlPlugin } from '@craftamap/esbuild-plugin-html';
-import {getDestDir} from './paths.js';
-import {readFile, writeFile, getConfig, getAllFiles, log, fileExistsInConfig} from './utils.js';
-import {createTask} from './task.js';
+import { minify } from 'html-minifier-terser';
+import htmlhint from 'htmlhint';
+
+import { getDestDir } from './paths.js';
+import { readFile, writeFile, getConfig, getAllFiles, log, fileExistsInConfig } from './utils.js';
+import { createTask } from './task.js';
 
 const srcHTMLDir = 'src/html';
+const { HTMLHint } = htmlhint;
+
+const htmlHintRules = {
+  'attr-lowercase': true,
+  'attr-no-duplication': true,
+  'doctype-first': false,
+  'id-unique': true,
+  'tag-pair': true,
+  'tagname-lowercase': true,
+};
 
-async function removeTopSourceComment(filePath) {
-    const code = await readFile(filePath, 'utf8');
-    const newCode = code.replace(/^\s*<!--[\s\S]*?-->\s*/, '');
-    await writeFile(filePath, newCode);
+const htmlMinifyOptions = {
+  collapseBooleanAttributes: true,
+  collapseWhitespace: true,
+  conservativeCollapse: true,
+  keepClosingSlash: true,
+  minifyCSS: true,
+  minifyJS: true,
+  removeComments: true,
+  removeEmptyAttributes: false,
+};
+
+function getDestinationFile(destDir, dest, src, filename) {
+  const sourceName = path.basename(src, path.extname(src));
+  const outputName = `${filename.replace('[name]', sourceName)}.html`;
+  return path.join(destDir, dest, outputName);
 }
 
-async function esbuildHTML(config, isDebug, platform){
-    let buildResult, outputs;
-    const dir = getDestDir({isDebug, platform});
-    for (const [dest, src] of Object.entries(config.entry)) {
-        buildResult = await build({
-            entryPoints: src,
-            outdir: path.join(dir, dest),
-            plugins: [htmlPlugin()],
-            loader: {
-                '.html': 'file'   // 🔥 Important
-            },
-            entryNames: config.filename,
-            assetNames: config.filename,
-            chunkNames: config.filename,
-            metafile: true,
-            write: true
-        });
-
-        if (!isDebug) {
-            outputs = Object.keys(buildResult.metafile.outputs);
-            for (const file of outputs) {
-                if (file.endsWith('.html')) {
-                    removeTopSourceComment(file);
-                }
-            }
-        }
-    }
+function formatHtmlIssue(file, issue) {
+  return `${file}:${issue.line}:${issue.col} ${issue.type.toUpperCase()} ${issue.message}`;
+}
+
+function validateHTML(file, html) {
+  const issues = HTMLHint.verify(html, htmlHintRules);
+  const errors = issues.filter((issue) => issue.type === 'error');
+
+  if (errors.length > 0) {
+    throw new Error(errors.map((issue) => formatHtmlIssue(file, issue)).join('\n'));
+  }
+
+  for (const issue of issues) {
+    log.warn(`[HTML] ${formatHtmlIssue(file, issue)}`);
+  }
+}
+
+async function bundleHTML(config, isDebug, platform) {
+  const dir = getDestDir({ isDebug, platform });
+
+  for (const [dest, sources] of Object.entries(config.entry)) {
+    for (const src of sources) {
+      const html = await readFile(src, 'utf8');
+      validateHTML(src, html);
+
+      const output = isDebug
+        ? html
+        : await minify(html, htmlMinifyOptions);
 
+      await writeFile(
+        getDestinationFile(dir, dest, src, config.filename),
+        output,
+        'utf8'
+      );
+    }
+  }
 }
 
-export function createBundleHTMLTask(srcHTMLDir){
-    let currentWatchFiles;
-    const bundleHTML = async ({platforms, isDebug, logInfo, logWarn}) => {
-        for(const platform of platforms){
-            const config = (await getConfig(platform));
-            if(config.html){
-                await esbuildHTML(config.html, isDebug, platform);
-                if (logInfo) log.ok(`Bundling HTML for ${platform}...`);
-            } else{
-                if(logWarn) log.warn(`No HTML config found for ${platform}, skipping HTML bundling.`);
-            }
-        }
+export function createBundleHTMLTask(srcHTMLDir) {
+  const runBundleHTML = async ({ platforms, isDebug, logInfo, logWarn }) => {
+    for (const platform of platforms) {
+      const config = await getConfig(platform);
+      if (config.html) {
+        await bundleHTML(config.html, isDebug, platform);
+        if (logInfo) log.ok(`Bundling HTML for ${platform}...`);
+      } else if (logWarn) {
+        log.warn(`No HTML config found for ${platform}, skipping HTML bundling.`);
+      }
     }
+  };
+
+  const onChange = async (changedFiles, watcher, platforms, isDebug) => {
+    for (const platform of platforms) {
+      const config = await getConfig(platform);
 
-    const onChange = async (changedFiles, watcher, platforms, isDebug) => {
-        for(const platform of platforms){
-            const config = (await getConfig(platform));
-            
-            if (!config.html) continue;
-            const exists = await fileExistsInConfig(
-                config.html.entry,
-                changedFiles[0]
-            );
-
-            if (exists){
-                const newConfig = {
-                    html: {
-                        entry: exists,
-                        filename: config.html.filename
-                    }
-                };
-                await esbuildHTML(newConfig.html, isDebug, platform);
-            }
-        }
+      if (!config.html) continue;
+      const exists = await fileExistsInConfig(
+        config.html.entry,
+        changedFiles[0]
+      );
+
+      if (exists) {
+        const newConfig = {
+          html: {
+            entry: exists,
+            filename: config.html.filename,
+          },
+        };
+        await bundleHTML(newConfig.html, isDebug, platform);
+      }
     }
-    return createTask(
-        'bundle HTML',
-        bundleHTML,
-    ).addWatcher(
-      async () => {
-        currentWatchFiles = await getAllFiles(srcHTMLDir);
-        return currentWatchFiles;
-    }, onChange);
+  };
+
+  return createTask(
+    'bundle HTML',
+    runBundleHTML
+  ).addWatcher(
+    () => getAllFiles(srcHTMLDir),
+    onChange
+  );
 }
 
 export default createBundleHTMLTask(srcHTMLDir);

package/src/cli/help.js

@@ -6,6 +6,7 @@ export function printHelp() {
     npx addonova init <my-extension>   Scaffold a new extension project
     npx addonova build [options]       Build the extension
     npx addonova zip                   Create release zip bundles
+    npx addonova tool                  Open the helping tools UI in a browser
     npx addonova --help                Show this help
 
   Build options:

package/src/cli/index.js

@@ -5,6 +5,7 @@ import { fileURLToPath } from 'node:url';
 import { existsSync } from 'node:fs';
 
 import { init } from '../commands/init.js';
+import { runTool } from '../commands/tool.js';
 import { printHelp } from './help.js';
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
@@ -41,6 +42,9 @@ export async function runCli(argv) {
     case 'init':
       await init(args);
       break;
+    case 'tool':
+      await runTool();
+      break;
     case 'build':
     case 'zip':
       await runBuildCommand(command, args);

package/src/commands/tool.js

@@ -0,0 +1,32 @@
+import { fork } from 'node:child_process';
+import process from 'node:process';
+import { resolve, dirname } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { existsSync } from 'node:fs';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+export async function runTool() {
+  const serverPath = resolve(__dirname, '../tools/tools-server.js');
+
+  if (!existsSync(serverPath)) {
+    console.error('[*] Addonova tools server not found. Reinstall the package.');
+    process.exit(1);
+  }
+
+  const child = fork(serverPath, [], {
+    stdio: 'inherit',
+  });
+
+  process.on('SIGINT', () => {
+    child.kill('SIGKILL');
+    process.exit(130);
+  });
+
+  await new Promise((resolve, reject) =>
+    child.on('error', reject).on('close', (code) => {
+      if (code !== 0) process.exit(code);
+      resolve();
+    })
+  );
+}

package/src/tools/tools-server.js

@@ -0,0 +1,287 @@
+import http from 'node:http';
+import { exec } from 'node:child_process';
+import fs from 'node:fs/promises';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+import {readFile, writeFile, httpsRequest, timeout} from '../build/utils.js';
+
+const openBrowser = (url) => {
+  const cmd = process.platform === 'win32' ? 'start' :
+    process.platform === 'darwin' ? 'open' : 'xdg-open';
+  exec(`${cmd} ${url}`);
+};
+
+const LOCALES_ROOT = path.resolve(process.cwd(), 'src/_locales');
+const PORT = process.env.PORT || 9876;
+const MIME = {
+  '.html': 'text/html; charset=utf-8',
+  '.js': 'text/javascript; charset=utf-8',
+  '.css': 'text/css; charset=utf-8',
+  '.json': 'application/json',
+  '.png': 'image/png',
+};
+
+function toMessageId(message) {
+  if (typeof message !== 'string') return '';
+  return message.trim().split(/\s+/).slice(0, 3)
+    .map(w => w.replace(/[^\w]/g, '').toLowerCase())
+    .filter(Boolean).join('_');
+}
+
+function parseLocale(content) {
+  const messages = new Map();
+  const lines = content.split('\n');
+  let id = '';
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i];
+    if (line.startsWith('@')) {
+      id = line.substring(1);
+    } else if (line.startsWith('#')) {
+      continue;
+    } else if (messages.has(id)) {
+      messages.set(id, `${messages.get(id)}\n${line}`);
+    } else {
+      messages.set(id, line);
+    }
+  }
+  messages.forEach((value, id) => messages.set(id, value.trim()));
+  return messages;
+}
+
+function stringifyLocale(messages) {
+  const lines = [];
+  messages.forEach((message, id) => {
+    lines.push(`@${id}`);
+    const hasDoubleNewLines = /\n\n/.test(message);
+    message.split('\n').filter(l => l.trim()).forEach((line, index, filtered) => {
+      lines.push(line);
+      if (hasDoubleNewLines && index < filtered.length - 1) lines.push('');
+    });
+    lines.push('');
+  });
+  return lines.join('\n');
+}
+
+function json2i18n(input) {
+  let output = '';
+  for (const key in input) {
+    output += `@${key}\n${input[key].message}\n\n`;
+  }
+  return output;
+}
+
+async function getSupportedLocales() {
+  const entries = await fs.readdir(LOCALES_ROOT).catch(() => []);
+  return entries.filter(f => f.endsWith('.i18n')).map(f => f.replace('.i18n', ''));
+}
+
+async function translate(text, lang) {
+  const url = new URL('https://translate.googleapis.com/translate_a/single');
+  url.search = new URLSearchParams({
+    client: 'gtx', sl: 'en-US', tl: lang, dt: 't', dj: '1', q: text,
+  }).toString();
+  const response = await httpsRequest(url.toString());
+  const data = JSON.parse(response.text());
+  return data.sentences.map(s => s.trans).join('\n').replaceAll(/\n+/g, '\n');
+}
+
+function jsonResponse(res, data, status = 200) {
+  res.writeHead(status, { 'Content-Type': 'application/json' });
+  res.end(JSON.stringify(data));
+}
+
+function serveStatic(req, res) {
+  let filePath = req.url === '/' ? '/tools.html' : req.url;
+  filePath = path.join(__dirname, filePath);
+
+  const ext = path.extname(filePath);
+  if (!MIME[ext]) {
+    res.writeHead(404);
+    res.end('Not found');
+    return;
+  }
+
+  fs.readFile(filePath).then(content => {
+    res.writeHead(200, { 'Content-Type': MIME[ext] });
+    res.end(content);
+  }).catch(() => {
+    res.writeHead(404);
+    res.end('Not found');
+  });
+}
+
+function parseBody(req) {
+  return new Promise((resolve, reject) => {
+    let body = '';
+    req.on('data', chunk => body += chunk);
+    req.on('end', () => {
+      try { resolve(JSON.parse(body)); }
+      catch { reject(new Error('Invalid JSON')); }
+    });
+    req.on('error', reject);
+  });
+}
+
+async function handleAPI(req, res) {
+  const url = new URL(req.url, `http://localhost:${PORT}`);
+  const parts = url.pathname.split('/').filter(Boolean);
+
+  if (parts[0] !== 'api') return false;
+
+  try {
+    switch (parts[1]) {
+      case 'locales': {
+        if (parts[2]) {
+          const filePath = path.join(LOCALES_ROOT, `${parts[2]}.i18n`);
+          const content = await readFile(filePath).catch(() => null);
+          if (!content) {
+            jsonResponse(res, { error: 'Locale not found' }, 404);
+            return true;
+          }
+          const messages = parseLocale(content);
+          const obj = {};
+          messages.forEach((v, k) => obj[k] = v);
+          jsonResponse(res, { locale: parts[2], messages: obj });
+        } else {
+          const list = await getSupportedLocales();
+          const data = {};
+          for (const loc of list) {
+            const content = await readFile(path.join(LOCALES_ROOT, `${loc}.i18n`));
+            const messages = parseLocale(content);
+            const obj = {};
+            messages.forEach((v, k) => obj[k] = v);
+            data[loc] = obj;
+          }
+          jsonResponse(res, { locales: list, data });
+        }
+        return true;
+      }
+
+      case 'translate': {
+        const { text, lang } = await parseBody(req);
+        if (!text || !lang) {
+          jsonResponse(res, { error: 'text and lang required' }, 400);
+          return true;
+        }
+        const result = await translate(text, lang);
+        jsonResponse(res, { translated: result });
+        return true;
+      }
+
+      case 'messages': {
+        if (req.method !== 'POST') {
+          jsonResponse(res, { error: 'Method not allowed' }, 405);
+          return true;
+        }
+
+        const body = await parseBody(req);
+
+        if (parts[2] === 'add') {
+          const { message, customId } = body;
+          if (!message) {
+            jsonResponse(res, { error: 'message required' }, 400);
+            return true;
+          }
+
+          const locales = await getSupportedLocales();
+          const messageId = (customId && customId.trim()) ? customId.trim() : toMessageId(message);
+          const results = { messageId, locales: {} };
+
+          for (const locale of locales) {
+            const filePath = path.join(LOCALES_ROOT, `${locale}.i18n`);
+            const content = await readFile(filePath);
+            const messages = parseLocale(content);
+
+            if (locale === 'en') {
+              if (!messages.has(messageId)) {
+                messages.set(messageId, message);
+                await writeFile(filePath, stringifyLocale(messages));
+                results.locales[locale] = message;
+              } else {
+                results.locales[locale] = { exists: true };
+              }
+            } else {
+              if (messages.has(messageId)) {
+                results.locales[locale] = { exists: true };
+              } else {
+                await timeout(1000);
+                const translated = await translate(message, locale);
+                messages.set(messageId, translated);
+                await writeFile(filePath, stringifyLocale(messages));
+                results.locales[locale] = translated;
+              }
+            }
+          }
+
+          jsonResponse(res, results);
+        } else if (parts[2] === 'delete') {
+          const { messageId, targetLocale } = body;
+          if (!messageId) {
+            jsonResponse(res, { error: 'messageId required' }, 400);
+            return true;
+          }
+
+          const locales = targetLocale ? [targetLocale] : await getSupportedLocales();
+          const deleted = [];
+
+          for (const locale of locales) {
+            const filePath = path.join(LOCALES_ROOT, `${locale}.i18n`);
+            try {
+              const content = await readFile(filePath);
+              const messages = parseLocale(content);
+              if (messages.has(messageId)) {
+                messages.delete(messageId);
+                await writeFile(filePath, stringifyLocale(messages));
+                deleted.push(locale);
+              }
+            } catch { /* skip missing */ }
+          }
+
+          jsonResponse(res, { deleted });
+        } else {
+          jsonResponse(res, { error: 'Unknown action' }, 400);
+        }
+        return true;
+      }
+
+      case 'json2i18n': {
+        if (req.method !== 'POST') {
+          jsonResponse(res, { error: 'Method not allowed' }, 405);
+          return true;
+        }
+        const body = await parseBody(req);
+        if (!body.json) {
+          jsonResponse(res, { error: 'json field required' }, 400);
+          return true;
+        }
+        const result = json2i18n(body.json);
+        jsonResponse(res, { i18n: result });
+        return true;
+      }
+
+      default:
+        jsonResponse(res, { error: 'Unknown endpoint' }, 404);
+        return true;
+    }
+  } catch (err) {
+    jsonResponse(res, { error: err.message }, 500);
+    return true;
+  }
+}
+
+const server = http.createServer(async (req, res) => {
+  if (req.url.startsWith('/api/')) {
+    await handleAPI(req, res);
+  } else {
+    serveStatic(req, res);
+  }
+});
+
+server.listen(PORT, () => {
+  const url = `http://localhost:${PORT}`;
+  console.log(`Addonova Tools UI → ${url}`);
+  console.log(`Working directory locales: ${LOCALES_ROOT}`);
+  openBrowser(url);
+});