Chrome拡張の作り方~準備編~
無職で暇なので(暴論)フロントの勉強がてら、Chrome拡張を作ってみたりしてるので
とりあえず書き残しておこうとか思った、みんな作ってみてね
とりあえず最低限
こいつらを同一フォルダにぶち込んでやるぜ!
設定 > その他のツール > 拡張機能 を開いて
「パッケージ化されていない拡張機能を読み込む…」でフォルダを選択してあげる
"manifest.json"はマニュアルみたいなもの、名前はこれ指定
最低限のことしか書いてないので、公式を参照にするとベネ
Manifest File Format - Google Chrome
/* manifest.json */ { "manifest_version": 2, "name": "Chrome拡張の名前", "description": "Chrome拡張の説明", // Chrome拡張のバージョン(アップデートの度に更新必須) "version": "1.0", "browser_action":{ // ツールバーに常駐するアイコンの読み込み(同一フォルダ内に入れておく) // 指定しないと拡張機能の名前の頭文字になる "default_icon":"icon.jpg", // ツールバーのアイコンをクリックするとポップアップ表示 // そのための html "default_popup":"popup.html" }, "content_scripts":[{ // このページで動く(必要に応じて指定) "matches": ["https://*/*", "http://*/*"], // 使うjsを読み込む "js":["main.js"] }] }
これはあくまでも一例なのであしからず
ポップアップの横幅を270pxで指定してるのはゴリ押し
本当は文字幅に合わせて余白とか取る方法あるからーーー
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!-- CSSを読み込む --> <link rel="stylesheet" href="style.css"> </head> <body> <div class = "ext_container"> <style> .ext_container{ width: 270px; } </style> <h1 class = "comment">ブラウザを閉じる前に<br> 確認ダイアログを表示するchrome拡張だよ!</h1> <p>※ http, https のみ対応<br> 何かあっても自己責任でお願いだよ(´・ω・`)<br> <br> 制作者:denden_kata</p> </div> </body> </html>
んで、さみしいのでCSSでちょっと飾って
/* style.css */ /* 見出し用 */ .comment { font-size: 13px; } /* その他文章 */ p { font-size: 12px; }
ポップアップはこんなのになります
あとは"main.js"に拡張機能を実装して終わり(つらい)
onbeforeunloadの挙動がよくわからんちんしてる
金と職くれ