EZO -いいぞ-

1分で考えたブログ名。特に、意味はない。

Chrome拡張機能の開発で参考にしたサイト

色んなサイトにお世話になりました。
作った拡張機能についてはこちら↓

clank-clack.hateblo.jp

思ったより長くなっちゃったので続きを読む挟んどきます

拡張機能自体について

javascript関係

  • 爆速でわかるjQuery.Deferred超入門 - Yahoo! JAPAN Tech Blog
    学校でプログラムは上から下に動くって聞いたのにAPIでデータ取ってくるあたりで順番がガバってマジで困ったのでこれで無理矢理なおした。同期とか非同期とかその辺の話らしい。
    多分プログラムは上から下に動いているが、データ取ってくる一瞬のラグでまだデータ来てないのにプログラムが先行(?)してしまってundefinedになった。ちゃんと待っててよ(半ギレ)
  • JavaScriptで指定した文字の前後の文字列を切り出す方法(slice、substring、indexOfメソッド) | 株式会社アントレース/UNTRACE Co., Ltd.
    URLをいい感じにするのに使った。URLから動画やチャンネルのIDを抜き出したり、検索ワードを抜き出したり。パラメーターが「&」で始まるので、それを目印にindexOfでアレコレしたらいい感じになった。
    Youtube内でハッシュタグ検索なんて使わないので、Twitter検索に変換したりした。
  • JavaScriptでオブジェクトの配列を filter() を使ってフィルタリングする | Try Lifelog
    オブジェクトってよく出てくる単語だけど何者だよって感じだったので見た。便利ですねこれ。なんかインスタンスとかクラスとかいろんな言葉があるみたいだけどまだちょっとわかってない。あとJSONとの使い分けもわからない。APIでデータ取ってきたらJSONになってるしオブジェクト使い所あるのか?って感じ。
  • JavaScriptのArrayの機能が思ったよりたくさんあった件について - Qiita
    なんで見たのかあまり覚えてない。forEachを使いたかったような気もする。でもよくわかんないので結局使い慣れたiの数を1つずつ上げてループさせるやり方になりがちだと思う。
  • eval() - JavaScript | MDN 外部のファイルに配列を書いて読み込んでもstringにしかならなくてキレてた。友人に相談したらこれを教えてくれて、無事解決。API叩いてたときも思ったけど、配列やJSONの形式に見せかけてただの長大なstring(丁寧に改行やインデントまでいい感じになってる)なの結構ムカつくと思った。紛らわしい。今思い返すとこれ周りで結構混乱して長時間無駄にした。「いやデータ取ってあるじゃん!ログに出せるし!なんでオブジェクト内の要素を指定できないんだ!」的な。
  • XMLHttpRequest の利用 - Web API | MDN
    APIという言葉は知っていたが、そもそもどうやって叩くのか知らなかった。URLらしきものがAPIであることはわかった。keyが必要で、パラメーターで色々変えられることもわかった。「で、どうやってそのデータをプログラムに持ってくるわけ?」ということが概念的に本気で分からなかった。
    代表してこのページを挙げたけど、もっと色んなサイトを見て参考にしてやっと少し理解した。これが一番詰まった点と言っても過言ではない。というのも、ググっても「APIの叩き方」は知ってる前提のブログやQiita記事がほとんどだからだ。違う、APIの活用法が知りたいんじゃない、そのAPIからどうしたらデータをとれるか知りてえんだ…という気持ちだった。
    結局、APIのURLをブラウザに打ち込むとJSON形式なりXML形式なりでいい感じに出ることがわかった。これがstringでプログラムに来て、なんかいい感じに認識させて…という感じっぽい(?)
    とにかくXHRとかいう関数の概念にたどり着くまで1億年かかった。それが言いたかった。
  • changeではできない?JavaScriptでdivの変更を監視する方法 | BeGeek
    Youtube動画を開いた時点でcontent_scriptが起動されてしまうと動画概要欄がまだ無いやん!ってなってしまうので、これでなんとかした。つまり、概要欄のdivが変わったらいい感じに起動してくださいにした。でもYoutubeはよくわかんない読み込みをするので、何重にも起動するようになった。なんとかしないといけない。

APIまわり

これからやる気があったら参照するページ

結論

頑張れば3週間くらいでド素人が拡張機能を作ることは可能。面倒なのは通信周りと動的サイトまわりのアレコレ。普通の静的ページで文字置き換える拡張機能とかならもっと楽に入門できる気がする。