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

旧石器時代のJavaScriptで30分でChrome拡張機能を作った(Qitta夏祭り)

はじめに

本記事は、普段旧石器時代のJavaScriptで業務をしている私が、
旧石器時代の技術を用いてChrome拡張機能を作ったので、ソースコードを公開する敷居を下げて成果物の公開をためらう人のお役に立てればいいなぁという記事です。
参考になる情報はあまりないため、本当に暇つぶしに読んでいただければ幸いです。

今回作るもの

今回作るものは以下です。

  1. Qitta記事の読了目安時間を表示する。
  2. 記事作成時にタブスペースできるようにする。 ソース全文はこの記事と以下のリポジトリに配置しています。

https://github.com/mamoru12150927/QittaExtension

想定読者

  • JavaScriptよくわからない人
  • 何らかのプログラムを公開してみたいがためらっている人
  • Chrome拡張機能を作って見たい人

Chrome拡張機能とは

文字通り、Webブラウザの1つ「Google Chrome」を拡張するものです。
Web御三家の「HTML」「CSS」「JavaScript」と設定ファイル「manifest.json」
使って作成でき、
公開もとても簡単なためプログラムを公開してみたい人の練習にももってこいです。

早速作ろう

上記の通り、拡張機能はmanifest.jsonと各種言語で作成します。
manifest.jsonはその拡張機能が何を使うか、何をするものかを定義します。
普段お使いのフレームワークやライブラリにも似たようなものがあるはずです。
(pom.xmlとかPackage.jsonとか・・・)
まずは作業ディレクトリを作成し、「manifest.json」から作成しましょう。
今回使うものは以下の内容です。

manifest.json
{
    "name" : "QittaExtensionPack",
    "version" : "1.0",
    "description" : "Qittaでかゆいところに手が届く拡張機能です。",
    "manifest_version" : 2,
    "permissions": ["declarativeContent", "storage"],
    "content_scripts":[
        {
          "matches": ["https://qiita.com/*"],
          "js": ["jquery_3.5.1.js","content.js"]
        }
      ]
}

それぞれの役割は以下の通りです。

キー 役割
name 拡張機能の名前です。公開の際はこの名前が使用されます。
version 拡張機能のバージョンです。任意の数値を指定できます。
description 拡張機能の説明です。公開の際はこの説明が使用されます。
manifest_version ルールで2を指定します。
permissions この拡張機能が使用するブラウザの機能を決めます。
content_scripts matchesで指定したURLでのみ、動作させるjsファイルを指定します。

他にもかなり多くの設定があるのですが、今回はこれだけで十分です。
Qitta夏祭りにChrome拡張機能でエントリーしたい方は、作る機能によってはほとんど同じ設定を流用できます。

content.jsの中身

今回すべてのコードは、JavaScript(ES2015以前) + Jquery3.5.1を利用しています。

コードは以下になります。

content.js
$(function(){
  let readText = $('section').text();
  $('textarea').on('keydown' , 
  function (e){
    if(e.keyCode === 9) {
      e.preventDefault();
      let elm = e.target;
      let val = elm.value;
      let pos = elm.selectionStart;
      elm.value = val.substr(0, pos) + '\t' + val.substr(pos, val.length);
      elm.setSelectionRange(pos + 1, pos + 1);
    }
  });
  $('.it-Tags').append(addText(readText));
});

function addText(text) {
  if(text !== void 0) {
    let textLen = text.length === 0 ? 1 : text.length;
    let calcReadTime = Math.round(textLen / 400);
    return '<p>' + calcReadTime + '分で読めます' + '</p>';
  }
}

$(function()は、ロード時に実行される関数で、ここで
記事内のSection要素のテキストを取得します。
Section要素には、Qittaの記事の全文が記録されており、
これをもとに読了時間を計算します。
また、さり気なくロード時にテキストエリアへのキーダウンを検知するよう設定し、
タブキー(keycode:9)が押されたときにタブスペースを入れるようにします。

実際にChromeで動かす。

上記で作成した「manifest.json」と「content.js」、「Jquery_3.5.1.js」を一つのディレクトリに保存します。
このようなイメージです。
directory構造.png

Google Chromeを開き、拡張機能設定のページを表示します。
ページ上部の「デベロッパーモード」をONにし、その付近の「パッケージ化されていない拡張機能を読み込む」から、先程のディレクトリを指定します。

これで拡張機能のインストールが完了しました。
実際にQittaの記事を表示すると、タグの横に読了目安が表示されているはずです。

実際にやってみた。.png

また、Qittaのテキストエリア全てで、タブスペースが使えるはずです。

終わりに

雑な記事でエントリーになりましたが、Qittaをより便利にするのは
技術力ではなく目の付け所もあると思います。
こういう今となっては微妙なコードでも便利だと感じてくれるひとがいるのであれば、
やる価値は大きいです。
クソレガシーな技術で飯食ってる僕でも作れたので、皆様ならもっと良い機能を作ることができるはず!
今回作ったものはお布施の5ドルが払える給料日後に公開します。

mamoru12150927
常駐エンジニアとして働き出して4年目です。 Python、Java、Node.jsを利用することが多いサーバサイド寄りのエンジニアです。
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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした