Google拡張機能を作成してみる

何となく、いろんなツールを使っていて「こんな機能あったらなー」と思う事ってありませんか?

そんなにアクセス数は気にしている方でもないですし、管理しているわけでもないのですが最近GoogleSearchConsoleを使っていて時間がずれている。と感じたんですよね。

調べてみるとGoogleSearchConsoleはデフォルトで太平洋夏時間というものになっていてそれをユーザーが設定する事が出来ないとの記事を見つけました。

つまり、僕の感覚を太平洋夏時間に合わせて行かないといけないという事なんですよね。

時差的には日本の時間の16時間前になるそうなのですが時間の計算が苦手な僕なのでパッとボタンポチ!で太平洋夏時間を表示出来たらステキだなーと思いました。

そういえばChromeの拡張機能って…

そうです。そういえばChromeの拡張機能ってユーザーが作る事が出来るんでしたよね。

という事は自分でも16時間前の時間を表示するくらいの拡張機能なら作れるんじゃないのか??というのが今回の発端です。

調べてみると意外とディレクトリをそのままアップロード出来るっぽいので早速挑戦してみました。

ファイルを作成

という事でファイルを作ってみました。

今回はHTML・CSS・JavaScriptで作成しました。

HTMLファイル

CSSファイル

 JavaScriptファイル

こんな感じですね。

こいつを表示するとこんな感じです。

manifest.json!?

どうやらこいつをアップロードする為にはmanifest.jsonなるものを作らなければいけないようです。

という事でググりつつ作ってみました。

ここでは拡張機能の名前やら表示されるもののファイル名やらアイコン画像やらショートカットキーやらを設定するようですね。

そしてここまで作ったファイルたちとアイコンとなる画像(png)を一緒のフォルダに格納しておきます。

いざ登録!

という事でファイル自体はサクッと作りましたが登録してみましょう。

手順は…

まずはChromeを開いて右上の点々が3つ縦に並んでいるやつ(メニューですね)をクリック

その他ツール→拡張機能を選択

この右上の「デベロッパーモード」クリックしてONにすると上にメニューが展開されます。

この左上の「パッケージ化されていない拡張機能を埋め込む」を押します。

そうすると「フォルダーの参照」というものが出てきますので先程作ったファイルが入っているディレクトリを選択します。

すると…Chromeの右上に自分が作ったアイコンが表示されています。

そのアイコンをクリックすると…

時計が出てきました!

拡張機能のパッケージ化

これで終わりかと思いきや、次は先程の

このメニューから「拡張機能をパッケージ化」を選択します。

するとこんなポップアップが出てきますので拡張機能のルートディレクトリを「閲覧」ボタンを押して選択します。

これはつまり先程作ったファイルがあるフォルダを選択しようってことですね。

もう一つある秘密鍵ファイルは省略した場合勝手に作ってくれますのでディレクトリだけ選んで「拡張機能をパッケージ化」を押しましょう。

こんなポップアップが出ればOKです。

そうするとここに書いてあるフォルダの場所にcrxとpemという拡張子のファイルが出来上がっています。

この秘密鍵はmanifest.jsonファイルとかを修正して再アップする時とかに使うっぽいので大切にとっておきましょう。

そしてちょっと前まではこのcrxというファイルをChromeを開いてドラッグ&ドロップするとインストール出来たようなのですが今は出来なくなっているようです。

これを誰でもインストールできるような拡張機能として公開する為には5$払って登録するしかないみたいですね。

という事で今回はChromeの拡張機能を作ってみましたのでその流れをご紹介させて頂きました。

ちなみに完全に理解したわけではないので質問は受けかねます(正確にはわからなくてお答えできない可能性の方が高いです)。

結局何が言いたいのかというと

結論、色々と難しいんじゃないのかとか自分じゃ無理じゃないのかとか思ったりするんですけどやっぱり何でもやってみるもんだなぁーっていうのを一番お伝えしたかったわけですね。

今回の記事がこういった事に興味がある方の励みや参考に少しでもなれば幸いです。

スポンサーリンク

シェアする

フォローする

スポンサーリンク