Help us understand the problem. What is going on with this article?

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:

howdy39
heyinc corporate engineer https://techthetoaster.booth.pm/
https://howdy39.dev/
storesjp
インターネットビジネスの企画・開発・運営、マーケティング、プロモーション、コンテンツの企画・制作
https://about.stores.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away