目次
- はじめに
- インストール方法
- Chrome拡張機能の開発方法
はじめに
この拡張機能はデフォルトで旧版のバックエンド（https://i1.cnblogs.com/）を使用します。
ブログパークでの活動が2年近くになりましたが、コミュニティに貢献できればと常々考えていました。最近ブログを書く際に、Markdownの愛用者として、ブログパークのテキストエリアベースのMarkdownエディタが使いにくいと感じたため、より高機能なChrome拡張機能を開発しました。目次の自動生成機能も追加しています。効果はスクリーンショットをご覧ください：
既存の便利なドラッグ＆ドロップ画像アップロード機能を維持しつつ、CodeMirrorを利用してコードハイライト、インデント、行番号表示などの一般的なエディター機能を提供し、さらに目次の自動生成も可能にしました。ソースコードはGitHubで公開しています（cnblogs-mdEditor）。ぜひ体験、フォーク、スターをお願いします。気に入っていただけたら、右下のいいねボタン👍をクリックしていただけると嬉しいです。
2018年11月28日更新：絵文字の挿入に対応
2018年12月6日更新：ハイライト設定のカスタムCSSに対応（詳細はGitHubを参照）
2019年1月15日更新：皆様のご要望にお応えし、Chromeウェブストアに公開しました。こちらから>>
2019年1月26日更新：基本的な文字色設定機能に対応
2019年1月31日更新：検索と人気のスタンプ挿入機能に対応
検索された画像をクリックすると記事に挿入でき、デフォルトの幅は30%です。以下の図をご覧ください：
インストール方法
Chrome拡張機能の経験がある方にはインストールはお馴染みでしょうが、ここで簡単に説明します：
- ブラウザで`chrome://extensions`と入力
- デベロッパーモードを有効にする
- リポジトリをクローン
- 「パッケージ化されていない拡張機能を読み込む」をクリックし、クローンしたプロジェクトの`app`フォルダを選択
- すべてが正常であれば、新しい記事作成時に新しいMarkdownエディタが表示されます。うまくいかない場合は下にコメントを残してください
テーマの設定方法も紹介します。Chromeのバージョンによって拡張機能のオプションの場所が異なります。最新のChrome（私のは67.0.3396.99）では、拡張機能の左下にある「詳細」を開くと設定オプションが表示されます。少し古いバージョンでは、詳細の隣にオプションボタンがあります。以下は新しいChromeの設定画面です：
Chrome拡張機能の開発方法
これは広範なテーマですが、私の経験に基づいて、初心者向けに簡単に説明します。間違いがあればご指摘ください。公式ドキュメントによると、Chrome拡張機能には以下の1つまたは複数の部分が含まれる場合があります：
- Manifest（マニフェスト）
- Background Script（バックグラウンドスクリプト）
- UI Elements（UI要素）
- Content Script（コンテンツスクリプト）
- Options Page（オプションページ）
manifest.jsonはJSONファイルで、Chrome拡張機能の設定ファイルです。Chrome拡張機能の名前、バージョン番号、必要な権限（ストレージ、クロスドメインなど）を定義します。例を挙げます：
...
"content_scripts": // ページアドレスがmatchesに一致する場合、以下のjsとcssファイルを注入し、ページ読み込み完了時に実行
[
{
"matches": ["https://i.cnblogs.com/*"],
"js": ["scripts/jquery.js","scripts/codemirror.js","scripts/markdown.js","scripts/marked.js","scripts/cnblogs.js"],
"css": ["styles/3024-night.css","styles/codemirror.css"],
"run_at": "document_end"
}
],
"options_ui": {//設定ページの設定
"chrome_style": true,
"page": "options.html"
},
"permissions": [// 権限フィールド、ストレージ、クロスドメイン、ウェブリクエスト、クロスドメインはここで設定する必要あり
"storage",
"clipboardRead",
"clipboardWrite",
"activeTab",
"webRequest",
"*://*.cnblogs.com/"
],
...
Background Scriptはバックグラウンドで実行され、拡張機能が必要なブラウザイベント情報を監視し、対応するロジックを呼び出します。
UI Elementsにはポップアップ、新しいタブページに表示されるHTMLページ、または右クリックメニューに追加される項目が含まれます。対応する設定フィールドは以下の通りです：
...
"default_popup": "popup.html",
"chrome_url_overrides" : {
"newtab": "override_page.html"
},
...
上記のフィールドの値はJSONファイルに対する相対パスです。相対パスが正しければ、ウェブページを書くのと同じように拡張機能のUIを開発できます。例えば、popup.htmlを使用して、GitHubで毎日人気の新しいプロジェクトを取得する拡張機能を開発できます（こちらから）：
Content Scriptは特定のウェブページに機能を追加するためのもので、本記事で紹介する拡張機能がこれにあたります。manifest.jsonで`content_scripts`を設定することで、特定のタイミングで特定のウェブページに拡張機能のコードとスタイルを注入できます。
Options Pageは拡張機能のユーザーに提供される設定ページで、これも通常のHTMLページです。manifest.jsonの`options_ui`フィールドに対応し、設定ページの相対パスを設定します。
まとめ
全体として、Chrome拡張機能の開発は比較的簡単で、Chromeが提供するAPIを利用することで、満足感の得られる拡張機能を作成できます。VPNを使用できる方は公式ドキュメントでより詳細なチュートリアルを確認するか、このブログの詳細な記事を参照してください。
issueやPRを歓迎します。