Qiita
JavaScript
Chrome
chrome-extension
QAccelerator

Qiitaをより便利にするChrome拡張機能をつくりました

More than 1 year has passed since last update.

筆者が「Qiitaにこういう機能があったらもっと使いやすいのに」

と思っていた機能をChrome拡張機能として実装しました。

ぜひインストールしてみてください。

Q Acceleratorと名付けました。

Qiitaでの活動を加速させるもの、といった感じです。

※Accelerator(アクセラレーター)は「加速装置」「加速器」などの意味があります。


2017/03/03 時点ユーザー数

910ユーザーの方が使われています。

image


TL;DR

インストールはChrome ウェブストアから

https://chrome.google.com/webstore/detail/mheleidccioamimekojienbdfclcbaan/

現在(2018/4/29)提供している機能


  • 行番号を表示

  • 記事の更新時間を表示

  • コピーアイコンを表示

  • 自動いいね/自動ストック

  • ヘッダー固定機能

  • 新規投稿時のテンプレート

  • 閲覧履歴の検索

全ての機能はON/OFFを切り替え可能

Qiitaへのログインは任意です

「会社でQiitaのログインなんて許可されてない」って方でも利用可能です。


インストール

インストールはChrome ウェブストアから行います。

https://chrome.google.com/webstore/detail/mheleidccioamimekojienbdfclcbaan/

OSSです。

https://github.com/howdy39/q-accelerator

Babel, Webpack, Karma, Mocha, Chai, Sinon.JS, Vue.JS, Material Design Lite

あたりを使っています。


提供機能

全ての機能は「デフォルトで全てON」にしてありますが、全てON/OFFの切り替えが可能です。

この機能は要らないというのがあればOFFにしてください。


設定画面を表示

ブラウザ右上のアクションから設定画面を表示できます。

image


行番号を表示

コードの左部分に行番号を追加します。


Before

image


:sparkles: After

image


記事の更新時間を表示

記事上部の更新日(投稿日)に時間を付与します。


Before

image


:sparkles: After

image


コピーアイコンを表示

コードの上部にコピーアイコンを追加します。

クリックすればクリップボードにコードをコピーできます。


Before

image


:sparkles: After

image

コピーアイコンをクリックする

image


:information_source: diff形式のコードのコピー

以下のようなdiff形式のコードをコピーした際は差分を解釈します。

image


コピーされる内容

module.exports = {

entry: './src/app.js',
output: {
path: 'dist',
filename: 'bundle.js'
}
};

行頭がマイナスの場合は、コピーから外します

行頭がプラスの場合は、プラスを除いてコピーします

※スペースで揃えていた場合は、インデントがずれてしまうのが難点ではあります。


自動いいね/自動ストック

「いいね」や「ストック」を押した際の挙動をカスタマイズします。

以下は「ストック」をした場合の例です。


Before

「ストック」だけしかされない

image


:sparkles: After

自動で「いいね」される

image


:information_source: 細かい設定が可能

この機能は人によって好みが別れると思います。

以下のように全パターンの自動設定が可能です。

image


ヘッダーを固定

ヘッダーを固定します。


Before

スクロールするとヘッダーが消えてしまう。

image.png


:sparkles: After

スクロールしてもヘッダーが表示される。

image.png


新規投稿時のテンプレート

新規で記事を作成する際に、自動で入力済みにする機能です。


Before

何も入力されていません。

image


:sparkles: After

テンプレートの内容で入力済みになります。

image


:information_source: テンプレートの内容を変更する

もちろんテンプレートは自身で変更可能です。

image


閲覧履歴の検索

拡張機能をインストールしてから閲覧した記事の履歴を表示します。

検索機能があるので最近見た記事を探す場合にも利用できます。

image


注意点

この拡張機能はQiitaの画面の造りに大きく依存しています。

突然動かなくなったらQiitaのDOMの構造が変わった可能性が高いです。

なるべく早く対応しますが、使えない間はすみません:bow:


参考

本拡張機能は以下の記事で書かれていたコードやアイデアを参考にさせてもらいました。


あとがき

質問や不具合などありましたらQiitaのコメントでもTwitterGitHubでもお気軽にどうぞ:ok_hand: