2020-05-25に更新

無限にいいね出来るChrome拡張

無限にいいね出来るChrome拡張

たった1度のいいねじゃ足りない

もっといいのに。
いいねボタンを10万回押しても、100万回押しても、表示されるのは「未いいね」
この世界は間違っている。

そんな貴方に捧げるChrome拡張「Infinity like」を作りました。
https://github.com/kin-mi/infinity-like

inifinity like demo

これで無限に愛を伝えられます。やったね!
※ この拡張はジョークアプリです。伝わりません。

きっかけ

nabettuさんの記事を見て、Chrome拡張開発用のテンプレートがあると知り、前々からチャレンジしてみたかったのでweb2daysで作ってみました。

やりたかった実装

最初は「いいね済」の要素を「未いいね」の要素に変えて、いいね数をカウントアップすれば出来るんじゃないかと考えましたが甘かったです。
というか、SPAなので簡単に書き換え可能だったらガチで無限いいねの送信出来ちゃうんですよね。そんな脆弱性は無かったです。
いいね数のみ監視して、変更前後で下がったらカウントアップする、みたいな実装にしています。
実際には、いいねボタンを連打しているのと変わらない為、問題無いはず。

ハマりポイント

Chrome拡張の開発自体はとてもスムーズに出来ると感じました。
ただテンプレートに含まれているwebpackプラグインのCopyWebpackPluginがアップデートされていて、その対応が含まれていないので初回ビルドで下記のエラーが発生しました。

Invalid options object. Copy Plugin has been initialized using an options object that does not match the API schema.
 - options[0] misses the property 'patterns'. Should be:
   [non-empty string | object { from, to?, context?, globOptions?, toType?, force?, flatten?, transform?, cacheTransform?, transformPath?, noErrorOnMissing? }, ...] (should not have fewer than 1 item)
ValidationError: Invalid options object. Copy Plugin has been initialized using an options object that does not match the API schema.

 
config/webpack.common.js の該当部分を下記の様に書き換えて対応しました。

    // Copy static assets from `public` folder to `build` folder
    new CopyWebpackPlugin({
      patterns: [{ from: '**/*', context: 'public' }],
    }),

言い訳

カウントアップ出来た所で満足して他の所はテンプレートのママです。
アイコンはデフォルトだし、ツールバーをクリックすると謎のカウンターが表示されます。
謎のカウンター

あと、いいね1万超えのツイートは未対応です。
今後やる気があれば1万1, 1万2 〜 となるように対応します。

それからストアに公開するには申請が必要なのでリポジトリで勘弁してください。
https://github.com/kin-mi/infinity-like
READMEも作ってないですが、クローンしてビルドしてchrome://extensions/から追加してあげれば動くはずです。

良き無限いいねライフを

次回こそは間に合わせます・・・


きんみ
コメント