v1.0.0

.github/workflows/build.yml

@@ -0,0 +1,59 @@
+name: Build
+
+on:
+  push:
+    branches: [ main ]
+  pull_request:
+    branches: [ main ]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [18.x, 20.x]
+
+    steps:
+    - uses: actions/checkout@v4
+
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v4
+      with:
+        node-version: ${{ matrix.node-version }}
+        cache: 'npm'
+
+    - name: Setup Bun
+      uses: oven-sh/setup-bun@v1
+      with:
+        bun-version: latest
+
+    - name: Install dependencies
+      run: bun install
+
+    - name: Build
+      run: bun run build:prod
+
+    - name: Check build artifacts
+      run: |
+        if [ ! -d "dist" ]; then
+          echo "dist directory does not exist"
+          exit 1
+        fi
+        
+        if [ ! -f "dist/manifest.json" ]; then
+          echo "manifest.json is missing in dist"
+          exit 1
+        fi
+        
+        if [ ! -f "dist/content.js" ]; then
+          echo "content.js is missing in dist"
+          exit 1
+        fi
+    
+    - name: Upload build artifacts
+      uses: actions/upload-artifact@v4
+      with:
+        name: extension-build-${{ matrix.node-version }}
+        path: dist/
+        retention-days: 7 

.github/workflows/check.yml

@@ -0,0 +1,38 @@
+name: Type Check & Lint
+
+on:
+  push:
+    branches: [ main ]
+  pull_request:
+    branches: [ main ]
+
+jobs:
+  check:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [18.x, 20.x]
+
+    steps:
+    - uses: actions/checkout@v4
+
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v4
+      with:
+        node-version: ${{ matrix.node-version }}
+        cache: 'npm'
+
+    - name: Setup Bun
+      uses: oven-sh/setup-bun@v1
+      with:
+        bun-version: latest
+
+    - name: Install dependencies
+      run: bun install
+
+    - name: Type check
+      run: bun run type-check
+
+    - name: Lint
+      run: bun run lint 

.prettierrc

@@ -0,0 +1,8 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "printWidth": 100,
+  "bracketSpacing": true
+} 

README.md

@@ -1,24 +1,46 @@
 # NanoKVM Capture - Chrome Extension
 
-A Chrome extension that allows you to capture screenshots and record videos of NanoKVM control interface.
+![NanoKVM Capture](./docs/screenshot.png)
 
-## Features
+A Chrome extension that adds screenshot and video recording capabilities to NanoKVM.
 
-- Take screenshots of NanoKVM interface
-- Record video of NanoKVM interface
-- Save captured media locally
-- Easy-to-use interface integrated with Chrome browser
+## Features
 
-## Development
+- Screenshot Capture of NanoKVM Interface
+  - High-quality PNG image capture
+  - One-click saving
+  - Automatic timestamped filenames
+- Video Recording of NanoKVM Interface
+  - High-quality WebM recording with VP9 codec
+  - Start/stop recording at any time
+  - Real-time recording duration display
+  - Visual recording indicator
+- Local Storage of Captured Media
+  - Automatic saving with timestamped filenames
+  - PNG format for screenshots
+  - WebM format for videos
+- Easy-to-use Interface Integrated with Chrome Browser
+  - Simple and intuitive floating controls
+  - Visual feedback for recording status
+
+## Technical Details
+
+- Video Format: WebM with VP9 codec
+- Image Format: PNG
+- Browser Support: Chrome with VP9 codec support
+- Interface Detection: Automatic detection of NanoKVM interface
+- Performance: Optimized for minimal resource usage
+
+## Development Setup
 
 ### Requirements
 
 - [Bun](https://bun.sh/) 1.0.0 or later
 - Chrome Browser
 
-### Setup
+### Setup Steps
 
-1. Clone this repository
+1. Clone the repository
 ```bash
 git clone https://github.com/koedame/webextension-nanokvm-capture.git
 cd webextension-nanokvm-capture
@@ -31,7 +53,7 @@ bun install
 
 ### Development Mode
 
-Run the following command to start development mode with hot reload:
+To start development mode with hot reload:
 ```bash
 bun run dev
 ```
@@ -52,10 +74,31 @@ bun run build:prod
 
 ### Development Tips
 
-- After making changes to the code, the extension will automatically rebuild
-- You may need to click the refresh button on the extension card in `chrome://extensions` to apply the changes
+- After making changes to the code, the extension will automatically rebuild in development mode
+- You may need to click the refresh button on the extension card in `chrome://extensions` to apply changes
 - Check the browser console for any errors or logs
+- The extension automatically detects the NanoKVM interface by checking for specific DOM elements
 
 ## License
 
-[License information to be added] 
+MIT License
+
+Copyright (c) 2024 koedame
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE. 

docs/PRIVACY_POLICY.md

@@ -0,0 +1,34 @@
+# Privacy Policy
+
+NanoKVM Capture (hereinafter referred to as "this extension") respects user privacy and handles data in accordance with the following policy.
+
+## Information We Collect
+
+This extension only collects the following information:
+
+- Screenshots of the NanoKVM interface (only when explicitly captured by the user)
+- Screen recordings of the NanoKVM interface (only when recording is explicitly initiated by the user)
+
+## How We Use Your Data
+
+- All collected data (screenshots and recordings) is stored only in your local environment
+- Collected data is never transmitted to external servers
+- Collected data is retained in your local environment unless explicitly deleted by you
+
+## Data Sharing
+
+This extension does not share any collected data with third parties.
+
+## Security
+
+This extension handles all collected data only in your local environment and implements appropriate security measures.
+
+## Changes to This Privacy Policy
+
+This privacy policy may be updated as needed. We will notify you of any significant changes through extension updates.
+
+## Contact Us
+
+If you have any questions or concerns about this privacy policy, please contact us through the GitHub Issues page.
+
+Last Updated: January 12, 2024 

eslint.config.js

@@ -0,0 +1,40 @@
+import eslint from '@eslint/js';
+import tseslint from '@typescript-eslint/eslint-plugin';
+import tseslintParser from '@typescript-eslint/parser';
+import prettierPlugin from 'eslint-plugin-prettier';
+import prettierConfig from 'eslint-config-prettier';
+import globals from 'globals';
+
+export default [
+  {
+    ignores: ['dist/**', 'node_modules/**'],
+  },
+  eslint.configs.recommended,
+  {
+    files: ['**/*.ts'],
+    languageOptions: {
+      parser: tseslintParser,
+      parserOptions: {
+        ecmaVersion: 2021,
+        sourceType: 'module',
+      },
+      globals: {
+        ...globals.browser,
+        chrome: 'readonly',
+      },
+    },
+    plugins: {
+      '@typescript-eslint': tseslint,
+      'prettier': prettierPlugin,
+    },
+    rules: {
+      ...tseslint.configs.recommended.rules,
+      ...prettierConfig.rules,
+      'prettier/prettier': 'error',
+      '@typescript-eslint/explicit-function-return-type': 'off',
+      '@typescript-eslint/no-explicit-any': 'warn',
+      '@typescript-eslint/no-unused-vars': 'warn',
+      'no-undef': 'off',
+    },
+  },
+]; 

manifest.json

@@ -3,6 +3,12 @@
   "name": "NanoKVM Capture",
   "version": "1.0.0",
   "description": "Chrome extension for capturing NanoKVM interface",
+  "icons": {
+    "16": "icons/icon16.png",
+    "32": "icons/icon32.png",
+    "48": "icons/icon48.png",
+    "128": "icons/icon128.png"
+  },
   "permissions": [
     "scripting"
   ],

package.json

@@ -2,16 +2,29 @@
   "name": "webextension-nanokvm-capture",
   "version": "1.0.0",
   "description": "Chrome extension for capturing NanoKVM interface",
+  "type": "module",
   "scripts": {
     "dev": "bun run scripts/watch.ts",
     "build": "bun run scripts/build.ts",
-    "build:prod": "NODE_ENV=production bun run scripts/build.ts"
+    "build:prod": "NODE_ENV=production bun run scripts/build.ts",
+    "lint": "eslint \"src/**/*.ts\"",
+    "lint:fix": "eslint \"src/**/*.ts\" --fix",
+    "format": "prettier --write \"src/**/*.ts\"",
+    "type-check": "tsc --noEmit"
   },
   "devDependencies": {
-    "bun-types": "latest",
-    "typescript": "^5.0.0",
+    "@eslint/js": "^9.18.0",
     "@types/chrome": "^0.0.254",
+    "@typescript-eslint/eslint-plugin": "^8.19.1",
+    "@typescript-eslint/parser": "^8.19.1",
+    "bun-types": "latest",
+    "chokidar": "^4.0.3",
     "esbuild": "^0.24.2",
-    "chokidar": "^4.0.3"
+    "eslint": "^9.18.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.2.1",
+    "globals": "^15.14.0",
+    "prettier": "^3.4.2",
+    "typescript": "^5.0.0"
   }
 }

scripts/build.ts

@@ -1,20 +1,31 @@
 import * as esbuild from 'esbuild';
-import { copyFile, mkdir } from 'node:fs/promises';
+import { copyFile, mkdir, cp, rm } from 'node:fs/promises';
 import { resolve } from 'node:path';
 
 const DIST_DIR = 'dist';
 const ASSETS = ['manifest.json'];
+const DIRS = ['icons'];
+
+async function cleanDist() {
+  await rm(DIST_DIR, { recursive: true, force: true });
+}
 
 async function copyAssets() {
   await mkdir(DIST_DIR, { recursive: true });
-  await Promise.all(
-    ASSETS.map((asset) =>
+  await Promise.all([
+    ...ASSETS.map((asset) =>
       copyFile(asset, resolve(DIST_DIR, asset))
+    ),
+    ...DIRS.map((dir) =>
+      cp(dir, resolve(DIST_DIR, dir), { recursive: true })
     )
-  );
+  ]);
 }
 
 async function build() {
+  // distディレクトリをクリーンアップ
+  await cleanDist();
+
   // ビルド設定
   await esbuild.build({
     entryPoints: ['src/content.ts'],