daihero0748さんのブログ

daihero0748さんのブログ

ブログの説明を入力します。

Amebaでブログを始めよう!
JavaScriptという言語を勉強して2日
GoogleChromeのサムネイルを消す拡張機能を作ってみました

よかったら使ってみてください

https://chrome.google.com/webstore/detail/sanmata-extensin/gjhgkhjmgnfhanhdpnojfenfobdndfae?hl=ja



これがこうなります↓



バグなどありましたら報告おねがいします
初心者なのでお手柔らかに
必要なもの
メモ帳
画像(あとで説明するのでそのとき用意してください)


1,メモ帳関連
2,画像関連
3,適用関連






1,①ドキュメントを開いて
"左上の整理→フォルダと検索のオプション→表示→
登録されている拡張子は表示しない"のチェックをはずしてください


②わかりやすいところに
chromethemeというファイルを作ってください

③メモ帳を開いてこちらをコピー&ペーストしてください


{
"manifest_version":2,
"name":"chrometheme",
"version":"1.0",
"theme":{
"images":{
"theme_frame": "source/frame.png",
"theme_frame_inactive": "source/frame_inactive.png",
"theme_tab_background": "source/tab_background.png",
"theme_frame_incognito": "source/frame_incognito.png",
"theme_frame_incognito_inactive": "source/frame_incognito_inactive.png",
"theme_tab_background_incognito": "source/tab_background.png",
"theme_toolbar": "source/toolbar.png",
"theme_ntp_background": "source/ntp_background.png",
"theme_window_control_background":"source/window_control_background.png"
}
}
}


こんな感じ


左に詰めてあっても問題はないです(多分)

④ここかなり重要です


ファイルの種類→すべてのファイル
ファイル名→manifest.json
文字コード→UTF-8




2,①デスクトップで右クリックして画面の解像度を開いてください


この解像度の数字にあう画像を探してください

このようにこの画像は背景などになりますです


もしあわなくてもペイントで解像度を変えられます

②chromethemeの中にsourceというフォルダをつくり
そのなかに同じ画像を8つ入れます

③②で増やした画像の名前を変えていきます
frame.png
frame_inactive.png
frame_incognito.png
frame_incognito_inactive.png
ntp_background.png
tab_background.png
toolbar.png
window_control_background.png

こんな感じですね


自分の場合すべて1920x1080の画像です

④一度作ったテーマを適用させてみます
GoogleChromeの右上の3本線をクリックし設定を開きます
そこの拡張機能を選びデベロッパーモードにチェックをつけます



そうするとパッケージ化されてない拡張機能を読み込むとあるのでそれをクリック
そこでchromethemeを選択して適用させてみてください

そこで新しいタブを開きます

すると解像度やタスクバーの設定から個人差はありますが下のタスクバー分画像がずれていると思うのでそれを調整していきます

8枚の画像のうちntp_background.pngをペイントで開いてください
そしたら画像を上下逆さまさせて下の部分を削ります。そしたら上下を元に戻します



だいたい50px~100px削ります
ここでは人それぞれ個人差があるので
削る→④→削る→④
をたんたんと繰り返してブックマークバーとの接続部分が合うようにがんばってください





3,上の段階までできたら
あとはテーマを適用するだけです

これをしないと再起動したときにthemeが消えます

GoogleChromeの設定→拡張機能から"拡張機能のパッケージ化"という項目がありますのでクリック
拡張機能のルートディレクトリにchromethemeのフォルダを参照します
秘密鍵ファイルは空欄でいいです

そのまま拡張機能のパッケージ化をクリック

chromethemeと同じ階層にpenフォルダとcrxフォルダができますので
それはchromethemeのフォルダの中に入れていいです

最後にcrxフォルダをGoogleChromeにドラッグ&ドロップしたら
ダウンロードの欄に処理を続けてもよろしいですか?とでるので"続行"
上に「GoogleChrome」を追加しますか?と出るので追加を押して終わりです。


急ぎで書いてたので画像などを省いてしまったところが多々ありとてもわかりにくかったと思います
今後編集していきますのでご了承ください
またわからないところなどがあれば気軽にコメント欄またはskypeの方まで

skype:daihero0748