GitHub の Diff Navigator Chrome OffiDocsで

DESCRIPTION

コードは https://github で入手できます。

com/daattali/github-diff-navigator-extension/ 説明 ========= これは、GitHub で編集されたファイルの変更を簡単にナビゲートできる Chrome 拡張機能です。

GitHub を介してファイルを編集し、変更をプレビューした後、「次/前の変更」の方法で変更をナビゲートする簡単な方法がないことに気付いたかもしれません。

ほとんどのファイル形式では、変更された行と周囲のいくつかの行のみが表示されるため、通常はそれほど不便ではありませんが、マークダウン ドキュメント (.

md) 状況が異なります。

GitHub は、加えられた変更をプレビューするときにマークダウン ドキュメント全体を表示します。つまり、大きなドキュメントにいくつかの小さな編集を加えている場合、それらの編集を見つけて何が変更されたかを確認するのは非常に困難です。

Rマークダウン (.

Rmd) ドキュメントも同様に動作し、他のマークダウン タイプのドキュメントも同様に動作する可能性があります。

入力: GitHub Diff Navigator。

動機 ========= この拡張機能のアイデアは、Hadley Wickham の Advanced R の本を読んでいたときに思いつきました。

章 (単一のマークダウン ドキュメント) でいくつかのタイプミスを見つけるたびに、GitHub で編集してプル リクエストを作成しました。

自分を馬鹿にしないように、[プレビュー] タブで自分の編集内容を再確認したかったのですが、上記の問題に気付きました。

このような大きなファイルでいくつかの編集を見つけるのに自分の目が信頼できなかったので、DOM + JavaScript コンソールを使用して、編集がどこにあったかを見つけるのに役立ちました。

それから、JavaScript コンソールで遊ぶだけではハードコアではないと判断し、今後このような変更をすばやく見つけるのに役立つ拡張機能を作成することに次の XNUMX 日間を費やすことにしました。

機能 ========= - GitHub Diff Navigator は邪魔にならず、GitHub を使用してファイルに加えられた編集のプレビューを見ているときにのみ表示されます。

- 有効な GitHub 編集ページを開いていない場合、GitHub Diff Navigator はリソースを使用したり、Chrome のタスク マネージャーに表示されたりしません。

- 同時に開いている複数の GitHub タブで動作します (タブを切り替えるたびに、拡張機能が更新され、そのタブの編集内容が表示されます)。

- 編集中のファイルがマークダウン形式であるかどうかを自動的に検出し、両方に対してシームレスに動作します。

- 編集が見つからない場合に役立つメッセージが表示される、クリーンで直感的な UI。

免責事項 ========= Chrome 拡張機能の作成方法を学習するためのテンプレートまたはリソースとしてコードを使用することはお勧めしません。

拡張機能の書き方を学び、XNUMX 日で完全にビルドしたので、ベスト プラクティスとは何か、コードを適切に構成する方法はわかりません。

Chrome 拡張機能がどのように機能するかをテストするための言い訳に過ぎませんでした。

私はそこに醜いコードを少し残しました - 判断しないでください:)

追加情報：

- deanattali.com提供
- 平均評価 : 5 つ星 (とても気に入りました)
-開発者 このメールアドレスは、スパムロボットから保護されています。 アドレスを確認するにはJavaScriptを有効にする必要があります。

GitHub Web の Diff Navigator extension OffiDocsと統合 Chromium オンライン