Chrome拡張の作り方～準備編～ - ひよっこゲームブログ

無職で暇なので（暴論）フロントの勉強がてら、Chrome拡張を作ってみたりしてるので
とりあえず書き残しておこうとか思った、みんな作ってみてね

とりあえず最低限

・json
・html
・css
・js

こいつらを同一フォルダにぶち込んでやるぜ！
設定 > その他のツール > 拡張機能　を開いて
「パッケージ化されていない拡張機能を読み込む…」でフォルダを選択してあげる

"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; }

ポップアップはこんなのになります

f:id:denden_kata:20170828190047p:plain

あとは"main.js"に拡張機能を実装して終わり（つらい）
onbeforeunloadの挙動がよくわからんちんしてる

金と職くれ