chrome 拡張機能の開発

概要

以前も作っていましたが、まだまだ自分の理想としているchrome拡張機能が作成できていないので継続して作ります
結果として本記事だけで理想のものができましたとはならないかもしれませんが、完成できるまで継続してやったこと・試したことについてまとめていきたいと思います

本題

まず情報の整理として、自分の作りたい拡張機能を記します
「Youtubeの広告ボタンを自動でクリックする」
というツールを作りたいです

自分のYoutubeの広告に対する印象・想いについてですが、表示したくない/ブロックしたいということではなく、広告が流れても良いのでスキップボタンがあるならスキップボタン自動で押させてよというスタンスです(もちろん興味がある広告はリンク飛んだりします)

Youtube Premium入れば解決じゃんという方がいると思いますが、ここはやはり節約を目指したいですね(ファミリープラン誘ってください)

と少し脱線しましたが、次に作りたいもののイメージを書きたいと思います

• must
  • バックグラウンドで実行される
  • 拡張機能を有効にするだけで、そのほかの設定は不要
  • 広告が再生される→スキップボタンが表示される→自作のchrome拡張機能がスキップボタンを押す→本編動画が再生される
• should
  • youtubeのサイト上でしか動かない
  • 個人情報を収集しない

一旦は上記で十分かと思います

mustに関しては以前学習した際の内容で問題なく突破できると思います
shouldに関しては正直実装していくうちにもしかすると壁が出てきてぶち当たる可能性があるので、mustにしています

開発の記録

イメージを整理したところで次に開発に進んでいきたいと思います
とりあえずGoogleのリファレンスを一通り読みました
https://developer.chrome.com/docs/extensions/get-started?hl=ja

またチュートリアルでは、読んで同じことをしていくだけで手軽に拡張機能の実装ができたり、ページに新しい要素を挿入するなどなど結構実践的なものまでありました

次に、デベロッパーガイドを読んで知識を入れました
https://developer.chrome.com/docs/extensions/develop?hl=ja

拡張機能を有効・実行するには「なんらかのユーザー操作が必要です」とのこと
方法としてはサイドパネルを開いたり、ツールバーのアイコンをクリックして操作を選択したり色々あるそうです

知識得ている中で完成系のイメージの具体化が進んできました
追加されたイメージとしては、「chromeでyoutubeを開いて別で作業している間に刻々が表示されても、youtubeのあるウィンドウやタブがアクティブになることなく裏側で広告スキップボタンを押してスキップしてくれるようにしたい」です

今回で目指すところとしてはyoutubeが開かれたら通知が来るというところを最低限に、可能であれば再生/停止ボタンを押すぐらいをチェックポイント目標として進めていければと思っています

ページを開くと上部に緑色で通知が表示され、拡張機能のアイコンをクリックすると裏側でスクリプトを呼び出すコードになります(manifest.jsにもあるようにyoutube限定)
1点だけbackgroundの検証は注意点があり、chromeの開発者ツールでは確認できないということです
確認するところは別に存在しており、拡張機能の管理ページから自作した拡張機能の詳細ページを開き、ビューを検証のService Workerから確認する必要がある模様です

manifest.js

{
    "manifest_version": 3,
    "name": "yt extension",
    "version": "1.0",
    "description": "chrome extension for youtube",
    "permissions": [
        "tabs",
        "notifications"
    ],
    "host_permissions": [
        "https://www.youtube.com/*"
    ],
    "action": {
        "default_title": "youtube auto clicker",
        "default_icon": "icon.png"
    },
    "background": {
        "service_worker": "background.js"
    },
    "content_scripts": [
        {
            "matches": [
                "https://www.youtube.com/*"
            ],
            "js": [
                "content.js"
            ]
        }
    ]
}

background.js

// 拡張機能のアイコンがクリックされたら実行
chrome.action.onClicked.addListener(() => {
    console.log('拡張機能のアイコンがクリックされました')
})

content.js

// ページ上に通知要素を作成して追加する関数
function showNotification(message) {
    // 既に通知が存在する場合は、新しい通知を作成しない
    if (document.getElementById('my-extension-notification')) {
        return;
    }

    // 通知用のコンテナ要素を作成
    const notificationBar = document.createElement('div');
    notificationBar.id = 'my-extension-notification';

    // スタイルを適用して、通知バーを画面上部に固定表示
    notificationBar.style.cssText = `
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #28a745;
    color: white;
    text-align: center;
    padding: 10px;
    font-size: 16px;
    z-index: 9999;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    transition: transform 0.3s ease-in-out;
    `;

    // メッセージを設定
    notificationBar.textContent = message;

    // ページに通知バーを追加
    document.body.appendChild(notificationBar);

    // 3秒後に通知を非表示にする
    setTimeout(() => {
        notificationBar.style.transform = 'translateY(-100%)';
        // アニメーションが完了した後に要素を削除
        notificationBar.addEventListener('transitionend', () => {
            if (document.body.contains(notificationBar)) {
                document.body.removeChild(notificationBar);
            }
        });
    }, 3000);
}

// ページが読み込まれたときに通知を表示
window.addEventListener('load', () => {
    showNotification("拡張機能からの通知です！");
});

終わりに

今週はここで力尽きてしまいましたので、ここまでにします
次回はより完成系に近づいたものを共有できればと思います