npmx-replace-extension の紹介

Tool

概要

npmx-replace-extension は、ブラウザで npmjs.com のパッケージページ(例: https://www.npmjs.com/package/パッケージ名)を開こうとした際に、同パッケージの npmx.dev 上のページへ自動的にリダイレクトするシンプルな拡張です。導入するとリンククリックやアドレスバー移動の際に自動で置換されるため、開発者は npmx.dev の軽量な UI や追加情報をすぐに利用できます。設定画面や複雑なオプションは無く、軽量さと目的特化が特徴です。

GitHub

リポジトリの統計情報

  • スター数: 3
  • フォーク数: 0
  • ウォッチャー数: 3
  • コミット数: 2
  • ファイル数: 10
  • メインの言語: JavaScript

主な特徴

  • npmjs.com の /package/* へのリンクを npmx.dev へ自動リダイレクト
  • 実装が非常にシンプルで軽量(ファイル数・コード量が少ない)
  • Chrome Web Store に公開申請中(レビュー段階)
  • UI やオプションを持たないため導入・削除が容易

技術的なポイント

本拡張は背景処理(background.js)からブラウザのリクエストやナビゲーションを監視し、対象となる URL パターンを検出したら npmx.dev の対応 URL に変換してリダイレクトする、という単純明快な仕組みを採っています。具体的には正規表現やパス操作で /package/ 部分を抽出し、スコープ付きパッケージ(@scope/name)やクエリ・ハッシュを適切に保持してリライトする実装が想定されます。ブラウザ拡張 API としては、従来の webRequest.onBeforeRequest によるブロッキングリダイレクトか、Manifest V3 環境では service worker と declarativeNetRequest などの宣言的ルールを使うアプローチが考えられます。リダイレクト処理は軽量でパフォーマンス負荷が小さく、権限は対象ドメイン(npmjs.com)へのアクセス許可が必要です。運用面では、npm 側の URL 構造変更や npmx.dev のパス仕様変更に対する耐性を保つためのテストや単純な文字列変換ロジックの堅牢化、オプションで対象ドメインを追加・除外する拡張性を検討すると良いでしょう。また、プライバシー観点では単なるリダイレクトなのでデータ収集は不要ですが、最小限の権限で動作する設計が望まれます。

プロジェクトの構成

主要なファイルとディレクトリ:

  • .github: dir
  • .gitignore: file
  • README.md: file
  • background.js: file
  • icons: dir
  • manifest.json: file
  • LICENSE: file
  • package.json: file
  • popup.html: file
  • popup.js: file

…他 5 ファイル

まとめ

シンプルさを重視した、npm ページを npmx.dev に置き換える小さな実用拡張です(導入が容易)。

リポジトリ情報:

READMEの抜粋:

npmx-redirect

A simple extension to redirect links to npmjs.com/package/* to npmx.dev

Currently just published to the Chrome Web Store (in review) …