はじめての拡張 Type-C

どちらからでも拡張できる次世代拡張!!

USBにType-Cっていうやつあるじゃないですか上下どちらからでも使えるって言うやつ。あれと同じで拡張界隈でも上下左右どちらからでも区別なく利用できるアレがあるらしいんですよ。そんな夢みたいな拡張があるっていうのを聞いたら使わないとならないですよね。

Rampow USB Type C ケーブル【1m/黒/保証付き】USB3.1 タイプc ケーブル QuickCharge3.0対応 Sony Xperia XZ/XZ2, Samsung Galaxy S9/S8/A3/A7/A9/C5/7pro/C9, Macbook Pro, Nexus 5X/6P, GoPro Hero 5/6 アンドロイド多機種対応 3A急速充電 5Gbps高速データ転送

はい、何言ってんですかね、僕は……。ということで以前FireFoxの拡張記事書いてたんですけど、やっぱりユーザのシェアで言ったらクロームなわけでクローム拡張についての記事でも書こうと思い筆を取りました。

関連：FireFox拡張機能
inujini.hatenablog.com

拡張開始

クローム拡張ですが基本的にはFireFoxに同じく設定ファイル書いて、アイコンとかに使う画像ねじ込んで、中身のスクリプト(JavaScript)書けば完成です。そんなわけで作っていきましょう。まずは何はともあれ設定ファイルを書きます。細かいルールを知らないで作ってるので詳細を知りたい場合は参考リンク参照でお願いします。

参考
Manifest File Format - Google Chrome
Content Scripts - Google Chrome

そんなわけでこれ作ります。

某県警サイトに行くと無限アラートするクソ拡張機能を作ります。

まずは何はともあれ設定ファイルを作ります。
manifest.json

{
    "name": "無限の警告",
    "description": "――― 体は短縮URLで出来ている",
    "manifest_version": 2,
    "version": "1.0.0.0",
    "icons": {
        "128": "vsPolice.png"
    },    
    "content_scripts": [{
      "js": ["infiniteAlert.js"],
      "matches": ["http://www.police.pref.hyogo.lg.jp/"]
    }],
    "browser_action": {
      "default_icon": "vsPolice.png",
      "default_title": "対某県警法具"
    }
}

その他にも色々設定項目あるけどとりあえず今回は最低限書いていきます。browser_actionが右上あたりにでてくるアイコンに相当するそうです。

書いたら、実行するスクリプトを記述します。

// 3秒後に無限アラート
const loop = (()=>{
  for ( ; ; ) {
    window.alert("　∧_∧　ババババ\n（ ・ω・)=つ≡つ\n（っ ≡つ=つ\n`/　　)\n(ノΠＵ\n何回閉じても無駄ですよ～ww\nm9（＾Д＾）プギャー！！\n");
  }
})
setTimeout(loop, 3000);

これで完成です。３秒後にしたのは某サイト少し待たないとレンダリングされなかったから。manifest.jsonのrun_atプロパティいじればなんかレンダリング解決できるそうだけど、スクショの見栄えが気に入らなくて挿入しただけなのでDOMがどうなろうかとか待つ必要全然ないんですよね……、なのでこれで……。どうせ犯罪スクリプトだし……。

とまあ、そんな感じに拡張できるらしいですよ。それじゃあ拡張の話したんで拡張ついでにぷっちょ置いときますね。

味覚糖 ぷっちょグミ ぶどう 38G×10袋

おわり