2018/04/01 ブログのテーマをcocoonに変更しました。

【超簡単】Chrome拡張でWebページの画像を回転させるやつを作った

 

今回はChrome拡張の練習として作ったしょうもないChrome拡張を公開したいと思います!!

Chrome拡張とは

Chromeをカスタマイズするツールです。ブラウザでJavaScriptやHTMLやCSSをいじれます。

例えば、Adblock PlusというChrome拡張。この拡張は広告をブロックしてくれる優れものです。うっとうしい広告はこの拡張を入れるだけで、ほとんど消えます。とても便利です。

Chromeをデフォルトブラウザにしている方は、Chrome拡張を使っている人も多いのではないでしょうか。

ちなみにオーカワは20個ほどChrome拡張を入れてます。(最近整理してもこの数!!)

作成したChrome拡張

GitHubで公開をしています。(5$払うの嫌だったので)

https://github.com/masamasa9841/chrome-example

iconなどは面倒なので用意をしていません。必要最低限の設定しか書いていないです。

僕のツイッターのフォロワーねぎさんがChromeウェブストアに公開してくれました!!ありがとうございます。

こちらからダウンロード出来るそうです。

雑記

近頃このツイートがタイムラインに流れてきました。

あまり機能は変わらないのにバズってるなーと関心しておりまして、Chrome拡張はウェブストアに上げたほうがバズりやすいのかなぁと思っていた所でした。

グットタイミングです。(2017/10/29追記)

画像が回る仕組み

CSSで画像を回転する記述を書いてるだけです(笑)

超簡単で、わかりやすいです。

たったこれだけです。

img{
-webkit-animation: spin 0.5s linear infinite;
}
@-webkit-keyframes spin {
0% {-webkit-transform: rotate(0deg);}
100% {-webkit-transform: rotate(360deg);}
}

 

使い方

GitHubからダウンロードしてください。(もしzipでダウンロードしたら、解凍してくださいね。)

 

ダウンロードが終わったら、Chromeの拡張機能の設定ページから、パッケージ化されていない拡張機能を読み込むを押して、ダウンロードしたフォルダーを選択します。

正しく読み込めたら、このような画面になるはずです。

後はブラウザを更新すれば画像が回るはずです。

結果

どのWebサイトでも、画像があるなら回ります。

頭おかしいを通り越してアホです。

感想

今回は練習で作ったものですが、しょうもない物を作ってしまいました。

たまにはありかな???

 

今度は便利なChrome拡張を作るつもりですよー仕組みは理解したので......

また作ったら公開したいと思います。ありがとうございました!!

 

コメント