皆さん、こんにちは！
現在開発中の拡張機能を紹介させていただき、ぜひ皆さんのご意見やフィードバックをいただければと思います。
できるだけ簡潔にまとめます。詳しい内容に興味がある方のために、詳細記事へのリンクも載せています。
Njectify は、あらゆるWebサイトでCSSとJavaScriptを編集できるブラウザ拡張機能です。ページの見た目をカスタマイズしたり、独自のスクリプトを作成したり、それらを1か所で管理できます。複数の拡張機能を組み合わせる必要はありません。
特にフロントエンド開発者や、UIを頻繁に調整する方、日常的にWebサイトを自動化している方に役立つと思います。
Stylus、Stylebot、Tampermonkeyを使ったことがある方も多いと思います。Njectifyの目的はそれらを置き換えることではなく、CSSとJavaScriptの編集をより統合された、使いやすい体験にすることです。操作性には特にこだわって設計しました。
主な機能:
• DevToolsを開かずにCSSを編集し、その場でリアルタイムに変更を確認できます。
• ビジュアルエディターで、色、タイポグラフィ、レイアウト、アニメーション、Flexbox、Grid、フィルター、シャドウなどをGUIから編集できます。手書きでCSSを書く必要はありません。
• Inspectorを搭載。ショートカットでページ上の任意の要素を選択し、CSSプロパティを確認したり、編集に適したセレクターを取得できます。
• VS Codeと同じMonaco Editorを採用したJavaScriptエディター。オートコンプリート、シンタックスハイライト、ホットリロードに対応しています。スクリプトはページ上で直接実行されるため、DOM操作やリクエスト、自動化も自由に行えます。
• 統合デバッグコンソールで、console.logの出力を拡張機能内から確認できます。
• URLルールごとのプロジェクト管理、複数ファイル、ファイル間の依存関係に対応しています。
• プロジェクトのエクスポートとバックアップ機能。標準ではすべてローカル保存で、希望する場合のみGoogle Driveとの同期が可能です。
このほかにも機能はありますが、投稿が長くなりすぎるため省略しています。
プライバシーにも配慮しています。データ収集は行っておらず、Google Drive同期を有効にしない限り、データはすべてローカルに保存されます。
試していただける方がいれば、感想、改善点、批判など、どんなフィードバックでも大歓迎です。実際に使う方の意見をもとに、今後も改善を続けていきたいと考えています。
現時点ではオープンソース化の予定はありません。プロジェクトを適切に維持する時間を確保できないためです。ただし、将来的な可能性は残しています。
お時間がありましたら、ぜひお試しください。よろしくお願いします！
Chrome Web Store:
https://chromewebstore.google.com/detail/njectify/eapjloogpkcdhpangehknokaljebcfgc