これは自分のGitHub Wikiから持ってきただけの記事です

誰でもカンタン! クソコラ拡張機能の作り方 

【Chromeウェブストアで公開されました! 12/17追記】

本記事はUEC Advent Calendar 2020の9日目の記事です。

前日はニー子くんのカクテルの記事です.まだ18歳の人もいるんですよ!!!

明日はCra2yPierr0tさんです.予告がすでに強そう. 追記:こちらです.自宅で簡単☆計算加速装置

誰?

20生のSuzukeです.ネタっぽいこと以上はできない程度の技術と,ネタにしないと気がすまない残念さを足し合わせたような人間です.

image

ところで,予定と大きく異なってますね.ちょっとまだ完成してないので別の機会にということでお願いします.

ちなみに結論はこれです.

nikuec

イントロ

Chrome拡張機能とは

そもそも拡張機能ってなんじゃい!という方のためにサクッと説明すると,

ブラウザに新機能を追加し、ブラウザ環境をパーソナライズできる簡易プログラムです。

だそうです.「Chrome 拡張機能」で検索したときのChromeウェブストアのディスクリプションに書いてありました.

ほんとうにつくれるの?

コンリテを履修した任意のあなたなら作れます.拡張機能に必要な最低限の内容は

  • manifest.jsonとかいう中身はただのテキストベースの設定ファイル
  • chaos.jsみたいな,適当な動作をするJavaScriptのファイル

こんなもんです.まあ実質マニフェストなんてCSSみたいなもんですし(ホントか?),JavaScriptはコンリテでちょっとやりましたよね.

もちろんコンリテ履修しただけでは全てを書くことはできません.人生で<script>って書いたの3回ぐらいって人は,いわゆるコピペプログラミングってやつになるでしょう.

私もそうなりました.

あなたもそうなりましょう.

クソコラ拡張機能の作り方

ネタを用意する

ある程度鮮度はあったほうがいいかと思いますが,それはこの際置いときましょう.未だに5000兆円コンバーター入れてる私みたいな人間もいますから.とにかくネタを用意してください.

今回私が用意したのはNIKUECです.MIKUEC2020(ファンメイドミクライブ)においてMCのネタとして登場したパワーワード,それがNIKUECです.

みく ≒ にく = 焼き肉   !!!MCで焼き肉やるか!!!

ということで,ここからは今回私が制作した「NIKUECコンバーター」を例にとって話していきます.

機能を考える

なにはともあれ,MIKUECのページを眺めてみましょう.

image

ほうほう.

これをNIKUECでイジるにはどうするか,と考えるわけです.先程言及した5000兆円コンバーターですが,これはページの中の「5000兆円」などをいい感じに例のフォントの画像で置き換えてくれる素敵な拡張機能です.これを参考にすれば答えは自ずと見えてきます.

つまり,ページの内容を

  • MIKUEC → NIKUEC
  • ライブ → 焼き肉

と置換するわけです.画像のもとの文を見てください.次に,置換した結果を想像しながら読んでみてください.

めっちゃ面白いですね(圧

Tips: 文字数は揃えたほうが良いでしょう.

実装の仕方を考える

これを実装することを考えていきましょう.まあ置換なんて簡単にかけますよね.私はできません.はい,ググりましょう.

image

こんなアホみたいな調べ方でも1ページ目に求める答えが出てきます.「2. 実践編~」ってやつです.このサイトによると

このプログラムを理解するにはいくつかのことを学ぶ必要があります。

  • 正規表現による文字列の操作
  • HTML の操作 (Document Object Model)
  • 関数の再帰的呼び出し

とのことです.まあ作りたいだけなので,サンプルを脳死でコピーしてください.

改変する部分は当然「正規表現による文字列の操作」です.

c.textContent = c.textContent.replace(/です。/g, "でござるよ。");

がサンプルにおける置換を担う部分であることは容易にわかります.正規表現もコンリテのEmacsのあたりでやっているはずです.しかしこのサイトは超親切で,

2種類以上の書き換えを行う場合には "ビールもワインも大好きです".replace(/ビール|麦酒/, "🍺").replace(/ワイン/, "🍷") のように数珠つなぎに書くことができます。

と解説してくれています.恐ろしくわかりやすい説明.

さて,作りたいのは

  • MIKUEC → NIKUEC
  • ライブ → 焼き肉

という置換でした.つまり,このようにサンプルを改変すればよいわけです.

c.textContent = c.textContent.replace(/MIKUEC/g, "NIKUEC").replace(/ライブ/g, "焼き肉");

このJavaScriptは保存しておきましょう.後のために適当なディレクトリを作っておくと楽です.

NIKUEConverter
| nikueconverter.js
│

拡張機能にする

JavaScriptで実際に置換する部分はできました.あとはこれをchromeくんに 「お前が見ているのは拡張機能だ」 と教えてやる必要があるわけです.それがmanifest.jsonの役割です.これはさすがにコンリテではやってないので,とりまググりましょう.

いや待ってください.よく見たらさっきのサイトにありました.完璧だなここ.

これはフォーマットだけ使う感じで,各所を変更していきます.どの項目が何を示しているかというのは,ほとんど英単語どおりです.

{
	"manifest_version": 2,
	"description" : "Converting the story about MIKUEC into about NIKUEC.",
	"name": "NIKUECコンバーター",
	"short_name": "NIKUEConv",
	"version": "0.2.9",
	"icons": {
	    "16": "icon16.png",
	    "48": "icon48.png",
	    "128": "icon128.png"
	},
	"permissions": [
		    "activeTab"
	],
	"content_scripts": [
		{
		    "matches": ["<all_urls>"],
		    "js": ["nikueconverter.js"]
		}
	]
}

ただし,"manifest_version": 2,だけは変更しないでください.このファイルの更新とか言う意味ではなく,マニフェストのフォーマット自体のバージョンを示しています.バージョンが2じゃないとインストール時に弾かれます.

これも先程のディレクトリに保存しときましょう.

NIKUEConverter
| nikueconverter.js
| manifest.json

アイコン

ちらっとmanifest.jsonに出てきましたが,アイコン画像は

  • 128*128 px

  • 48*48 px

  • 16*16 px

を用意しました.アイコンは用意しなくても動作に支障はありません.保存先は同じディレクトリにしました.

NIKUEConverter
| nikueconverter.js
| manifest.json
| icon128.png
| icon48.png
| icon16.png

ちなみに画像はこれです.

niku

インストールする

12/17追記 Chromeウェブストアで公開されました.より手軽に試せます. NIKUECコンバーター

さあようやく念願のインストールです.

  1. Chrome拡張機能のページ(chrome://extensions/)を開く

  2. 右上のデベロッパーモードのトグルをオンにする

デベロッパーモード

  1. 左上の「パッケージ化されていない拡張機能を読み込む」からNIKUEConverterフォルダを選択して読み込む

遊ぶ

インストールできたので,“MIKUEC"等と書いてあるサイト(まさにMIKUECとか)を開くと冒頭の画像のようになります.ちなみに比較するとこんな感じです.

比較

ありえん面白さを体感したい人向けのリンク

NIKUECコンバーターの完成品はこちらです.

NIKUEC-Converter (GitHub)

また,こちらの方々のめっちゃありがたい感想が唐突にシュールになるので,がっかり感を得たい人には特におすすめです.

終わりに

現在Chromeウェブストアの審査待ちです.いずれはストアに並び,もっと手軽に試せるようになると思います.

審査通ってNIKUECコンバーターはChromeウェブストアから入れられるようになりました.

image

!!!!!!!!!!!!!うおおおおおお!!!!!!!!!!!!!

image