コミュ障だから明日が僕らをよんだって返事もろくにしなかった

何かを創る人に憧れたからブログをはじめたんだと思うよ

はじめての拡張 Type-C

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

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



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

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


拡張開始

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

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

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

f:id:andron:20190325221944p:plainf:id:andron:20190325221940p:plain
某県警サイトに行くと無限アラートするクソ拡張機能を作ります。

まずは何はともあれ設定ファイルを作ります。
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(ノΠU\n何回閉じても無駄ですよ~ww\nm9(^Д^)プギャー!!\n");
  }
})
setTimeout(loop, 3000);

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



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


おわり