JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 1224
  • Score
    100M100P100Q72085F
  • License MIT

Universal testing framework for Chrome extensions - Fast static analysis without browser dependencies

Package Exports

  • chrome-extension-test-framework
  • chrome-extension-test-framework/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (chrome-extension-test-framework) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Chrome Extension Test Framework

npm version License: MIT GitHub issues GitHub stars

汎用的なChrome拡張機能テストフレームワーク - ブラウザ不要で高速な静的解析を実行

特徴

  • 🚀 高速実行 - ブラウザ不要で100ms以下での実行
  • 🔍 包括的な検証 - Manifest、セキュリティ、パフォーマンス、構造、多言語対応
  • 📊 複数の出力形式 - コンソール、JSON、HTML、Markdown
  • 🛠️ 拡張可能 - カスタムテストスイートとバリデーターの追加が可能
  • 🌍 汎用性 - あらゆるChrome拡張機能に対応
  • 🔧 CI/CD対応 - 終了コードによる自動化サポート
  • 💡 詳細なエラーメッセージ - エラーコード、修正提案、コード例、ドキュメントリンク付き (v1.2.0+)
  • 🔧 自動修正機能 - 一般的な問題を自動的に修正 (v1.3.0+)

インストール

npmからインストール(推奨)

# ローカルインストール
npm install chrome-extension-test-framework

# グローバルインストール
npm install -g chrome-extension-test-framework

# 開発依存としてインストール
npm install --save-dev chrome-extension-test-framework

GitHubからインストール

# 最新版をインストール
npm install git+https://github.com/ibushimaru/chrome-extension-test-framework.git

# 特定のバージョンをインストール
npm install git+https://github.com/ibushimaru/chrome-extension-test-framework.git#v1.0.1

クイックスタート

サンプル拡張機能でテスト

このフレームワークには、動作を確認できるサンプル拡張機能が含まれています:

# 良い例(すべてのテストに合格)
cext-test samples/good-extension

# 悪い例(多くの問題を検出)
cext-test samples/bad-extension

# 最小限の例
cext-test samples/minimal-extension

# すべてのサンプルをテスト
node samples/test-all.js

詳細はsamples/README.mdを参照してください。

使い方

CLIとして使用

# 現在のディレクトリをテスト
cext-test

# 特定の拡張機能をテスト
cext-test /path/to/extension

# 特定のテストスイートのみ実行
cext-test -s manifest,security

# カスタム出力形式
cext-test -o json,html -d ./reports

# 問題を自動修正
cext-test --fix

# 修正内容をプレビュー(実際には変更しない)
cext-test --fix-dry-run

プログラムとして使用

const ChromeExtensionTestFramework = require('chrome-extension-test-framework');

// クイックテスト
ChromeExtensionTestFramework.test('/path/to/extension');

// カスタム設定でテスト
const framework = new ChromeExtensionTestFramework({
    extensionPath: './my-extension',
    output: {
        format: ['console', 'json'],
        directory: './test-results'
    }
});

// ビルトインテストを使用
framework.useBuiltinTests();

// カスタムテストスイートを追加
framework.addSuite({
    name: 'My Custom Tests',
    tests: [
        {
            name: 'Custom validation',
            test: async (config) => {
                // カスタム検証ロジック
            }
        }
    ]
});

// テスト実行
const results = await framework.run();

自動修正機能 (v1.3.0+)

このフレームワークは、一般的な問題を自動的に修正する機能を提供します:

修正可能な問題

manifest.json

  • Manifest V2からV3への移行
  • 不正なバージョン形式の修正
  • 必須フィールドの追加
  • 長すぎる名前・説明の短縮
  • CSPの形式変換とunsafe-eval/unsafe-inlineの削除
  • browser_actionからactionへの変換

ファイル名

  • スペースをアンダースコアに置換
  • 特殊文字の削除
  • 大文字を小文字に変換(README、LICENSE、CHANGELOGを除く)

使用方法

# 修正内容をプレビュー
cext-test --fix-dry-run

# 実際に修正を適用
cext-test --fix

# 詳細な修正内容を表示
cext-test --fix --verbose

修正例

$ cext-test samples/broken-extension --fix

🔧 Running auto-fix on: samples/broken-extension

📊 Auto-fix Summary:
   Total fixes: 11

   By type:
   - UPDATE_FIELD: 1
   - FIX_VERSION: 1
   - TRUNCATE_FIELD: 2
   - MIGRATE_V2_TO_V3: 2
   - RENAME_FILE: 2
   - MIGRATE_CSP: 1
   - REMOVE_UNSAFE: 2

✅ Fixes applied successfully!
💡 Run tests again to verify the fixes

ビルトインテストスイート

1. Manifest Validation

  • Manifest V3準拠チェック
  • 必須フィールドの存在確認
  • バージョン形式の検証
  • アイコンファイルの存在確認
  • Service Worker設定の検証

2. Security Validation

  • CSP(Content Security Policy)の検証
  • 外部スクリプトの検出
  • eval()使用の検出
  • HTTPS強制の確認
  • 最小権限の原則チェック

3. Performance Validation

  • ファイルサイズの制限チェック
  • 画像最適化の確認
  • JavaScript/CSSの最適化
  • メモリリークの潜在的リスク検出
  • アニメーションパフォーマンス

4. Structure Validation

  • ディレクトリ構造の検証
  • ファイル命名規則
  • 開発用ファイルの除外確認
  • モジュール構造の検証
  • 重複ファイルの検出

5. Localization Validation

  • 多言語対応の構造確認
  • messages.jsonの形式検証
  • ロケール間の一貫性チェック
  • RTL言語サポートの確認
  • 国際化APIの使用状況

カスタムテストの作成

TestSuiteクラスを使用

const { TestSuite } = require('chrome-extension-test-framework');

class MyTestSuite extends TestSuite {
    constructor(config) {
        super({
            name: 'My Custom Suite',
            description: 'カスタム検証スイート'
        });
        
        this.setupTests();
    }
    
    setupTests() {
        this.test('My test', async (config) => {
            // テストロジック
            const manifest = await this.loadManifest(config);
            if (!manifest.my_field) {
                throw new Error('my_field is required');
            }
        });
    }
}

TestCaseクラスを使用

const { TestCase } = require('chrome-extension-test-framework');

// 簡単なアサーション
const myTest = TestCase.assertion(
    'Check custom field',
    async (config) => {
        const manifest = require(path.join(config.extensionPath, 'manifest.json'));
        return manifest.custom_field === 'expected_value';
    }
);

// 期待値の比較
const versionTest = TestCase.expect(
    'Version check',
    async (config) => {
        const manifest = require(path.join(config.extensionPath, 'manifest.json'));
        return manifest.version;
    },
    '1.0.0'
);

設定ファイル

cext-test.config.jsまたは.cextrc.jsonを作成:

module.exports = {
    extensionPath: './src',
    output: {
        format: ['console', 'json', 'html'],
        directory: './test-reports',
        filename: 'extension-test'
    },
    validation: {
        manifest: true,
        permissions: true,
        csp: true,
        icons: true,
        locales: true
    },
    rules: [
        // カスタムルール
    ],
    timeout: 30000
};

CI/CD統合

GitHub Actions

- name: Test Chrome Extension
  run: |
    npm install chrome-extension-test-framework
    npx cext-test ./extension -o json

GitLab CI

test:
  script:
    - npm install chrome-extension-test-framework
    - npx cext-test ./extension -o json,html
  artifacts:
    paths:
      - test-results/

API リファレンス

ChromeExtensionTestFramework

Constructor

new ChromeExtensionTestFramework(config)

Methods

  • loadConfig(configPath) - 設定ファイルを読み込み
  • addSuite(suite) - テストスイートを追加
  • useBuiltinTests() - ビルトインテストを使用
  • use(plugin) - プラグインを使用
  • addValidator(name, validator) - カスタムバリデーターを追加
  • run() - テストを実行

TestSuite

Methods

  • test(name, testFn, options) - テストケースを追加
  • skip(name, testFn, options) - スキップするテストを追加
  • before(fn) - beforeAllフックを設定
  • after(fn) - afterAllフックを設定

TestCase

Static Methods

  • TestCase.create(name, test, options) - 基本的なテストケース作成
  • TestCase.assertion(name, assertion, options) - アサーションテスト
  • TestCase.expect(name, getter, expected, options) - 期待値比較テスト
  • TestCase.match(name, getter, pattern, options) - パターンマッチングテスト

トラブルシューティング

Q: ブラウザがインストールされていなくても動作しますか?

A: はい、このフレームワークは静的解析のみを使用するため、ブラウザは不要です。

Q: 実際のDOM操作やchrome.* APIのテストはできますか?

A: いいえ、このフレームワークは静的解析に特化しています。実際のブラウザ環境でのテストには別のツールが必要です。

Q: カスタムルールを追加するには?

A: addValidatorメソッドを使用するか、カスタムTestSuiteクラスを作成してください。

ライセンス

MIT

貢献

プルリクエストを歓迎します。大きな変更の場合は、まずissueを作成して変更内容を議論してください。