Go to Qiita Advent Calendar 2024 Top
LoginSignup
6
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

身の回りの困りごとを楽しく解決！ by Works Human IntelligenceAdvent Calendar 2024

Day 20
@Maji3289

Chrome拡張機能開発[～ゆりかごから墓場までGitHub Copilotにおんぶしてもらおう～]

Posted at

自作拡張機能「WebConcentrater」でブラウザを自動カスタマイズして集中力を高められたらよかったかなと思った話

はじめに

「最近、どうも成績や作業効率が落ちてきている…」という方はいませんか？
原因のひとつは“ブラウザ”にあるかもしれません。SNSやYouTubeの誘惑に負けて、気づいたら何時間も浪費してしまうこと、ありますよね。

そこで今回紹介するのが、Chrome拡張機能「WebConcentrater」です。

  • 一定時間作業したあとに、ページ全体をYouTube動画の埋め込みへ上書きする
  • しかも自動再生してくれるので、強制的に“気合”を入れなおす

勉強や仕事中についブラウザで遊んでしまう人にはうってつけの拡張機能です。

この記事のポイント

  • Manifest V3 の拡張機能開発におけるセキュリティとプライバシーへの配慮
  • コンテンツスクリプトでDOM操作をするサンプルコード
  • GitHub CopilotなどAIアシスタントを使って、どう効率的に開発を進めるか

「やりたいことはシンプルだから、なるべくラクして作りたい！」そんな人向けの内容になっています。

WebConcentrater とは

「集中力を阻害するブラウザ画面を操作してしまおう！」という発想から生まれたChrome拡張機能です。
設定したn秒後、Webページ全体をYouTubeの埋め込み動画に上書きし、自動再生します。例えば以下のような使い方ができます。

  • 松岡修造さんの激励動画で気合を入れる
  • 有名YouTuberの「勉強してください！」コールをループ再生する
  • 作業用BGMを強制的にスタートさせる
  • ライブカメラ映像でリラックス…などなど

「どうしても気が散ってしまう…」「あと○秒だけこのページを見たら強制終了！」といった状況で活躍します。

セキュリティとプライバシーへの配慮

1. Manifest V3 の基本的なセキュリティ強化

Manifest V3 では、拡張機能のセキュリティが大幅に向上しています。主なポイントは以下です。

  • リモートコードの禁止による、拡張機能内で実行可能なコードの厳格管理
  • service_worker でのバックグラウンド処理
  • 宣言的コンテンツスクリプト (declarativeNetRequest APIs など)
  • 任意文字列の実行機能が削除
  • パッケージに含まれる審査済みコードのみが実行可能

2. セキュリティポリシーの強化

コンテンツセキュリティポリシー（CSP）がさらに厳格になり、以下の値のみ許可されるようになっています。

  • self
  • none
  • wasm-unsafe-eval

これにより、不正なリモートコード呼び出しなどのリスクを低減できます。
ただし、Manifest V3 でも、不要な権限の付与やコード改ざん対策を怠るとリスクは残ります。開発者側のセキュリティ意識が重要です。

3. DOM 操作のリスクと対策

拡張機能から自動的にWebページを操作できるのは魅力的ですが、リスクも存在します。

  • ユーザーの意図しないスクリプト挿入
  • 実行内容の隠ぺい
  • 個人情報が外部送信される恐れ

対策例

  1. コンテンツスクリプトに最小限の権限だけ付与
  2. ビルド時のチェックサム活用やバージョン管理を徹底し、改ざんを防ぐ
  3. 不要なホスト権限（アクセス先サイトの絞り込み）を付与しない

さらに、プライバシーの観点から、ユーザーの閲覧履歴や個人情報を外部に送信しないよう徹底する必要があります。

カスタマイズ例

ここでは、実際に Manifest V3 での設定例と、DOM を書き換えるコンテンツスクリプトのサンプルコードを紹介します。

1. 最小限の権限を持つ拡張機能

  • permissions には「activeTab」と「scripting」の2つだけを指定
  • content_scripts では <all_urls> に対して contentScript.js を注入

2. コンテンツスクリプトで DOM をカスタマイズする例

以下のサンプルは YouTube のサイドバーやコメント欄を非表示にするコードです。必要に応じて、他のサイトへのカスタマイズを自由に追加できます。

// contentScript.js
(() => {
  // 例: YouTube のサイドバーとコメントを非表示にする
  const hideYouTubeElements = () => {
    const sidebar = document.getElementById('related');
    const comments = document.getElementById('comments');

    if (sidebar) {
      sidebar.style.display = 'none';
    }
    if (comments) {
      comments.style.display = 'none';
    }
  };

  // 例: 他サイトでヘッダーやフッターを固定するなどの処理
  const customizeOtherSite = () => {
    // 必要に応じて自由に編集
  };

  // URL に応じて処理を分岐
  if (location.href.includes('youtube.com')) {
    hideYouTubeElements();
  } else {
    customizeOtherSite();
  }
})();

こんな感じで、自分好みに contentScript.js を編集すれば、好きなサイトの外観・機能を切り替えられます。

試行錯誤してみる

動画再生時にフルスクリーンにしたい

// フルスクリーン化
if (document.documentElement.requestFullscreen) {
    document.documentElement.requestFullscreen();        // 標準
} else if (document.documentElement.webkitRequestFullscreen) {
    document.documentElement.webkitRequestFullscreen();  // Safari
} else if (document.documentElement.msRequestFullscreen) {
    document.documentElement.msRequestFullscreen();      // IE/Edge
}

動画を自動で再生したい

const iframe = document.createElement("iframe");
iframe.src = `https://www.youtube.com/embed/${randomVideoId}?autoplay=1&t=0`;
iframe.allow = "autoplay; fullscreen";
iframe.allowFullscreen = true;
document.body.appendChild(iframe);

「作業の邪魔をしない程度にBGMをかける」「強制的に応援動画をフルスクリーン再生してテンションをUPする」など、発想次第でいろいろな工夫ができます。

GitHub Copilot くんとの付き合い方

「WebConcentrater」を作る過程では、GitHub Copilotを大いに活用しました。本当にコードを書く手間が激減します。以下はその一例です。

評判がいいモデルはClaude 3.5 sonnetとのこと。モデル選びは好みですね。

  1. まずは GitHub Copilot の “edit” タブで一括生成する
    image.png

    • 新しいファイルを自動生成してくれるので、手動でファイル作成する手間が省けます。

  2. README とカスタム指示を作成
    image.png

    • プロジェクト概要をCopilotにしっかり伝え、それを元にコードを書いてもらうイメージです。

    • カスタム指示の使い方詳細↓

  3. 拡張機能に追加できそうな機能を提案してもらう
    image.png

    • わざわざ調べなくても、候補を一気に出してくれるのがありがたいポイント。

  4. 実装→デザイン→テスト……を繰り返す

    • 次々に飛んでくるエラーをCopilotのEditに貼り付けて修正してもらいます。
    • GUIのデザインを整える段階では、TailwindCSSのようなCSSフレームワークを意識させたり、アニメーション指定を伝えたりするのも非常にラク。
    設定ページを限りなくきれいなデザインにして。

- CSSはTailwindCSSを意識して
- 要素・色のアニメーションをつけて
- クリックする部分にはよりアグレッシブなアニメーションをつけて
- ダークモードに対応して
- Noto Sans JPフォントを利用して、font-feature-settings:"palt";をつけて
- 文字の折り返し処理も適切に行って
- **見やすさを第一優先にして**

画像例：ダークモード対応、Noto Sans JPフォントなどの指定追加

image.png

こうしてAIと壁打ちしながら、コードがほぼ自動で生成されるという快感が得られます。

まとめ ─ GitHub Copilot と楽しく拡張機能を作ろう

どのように作ったかをざっくり紹介しましたが、実際はほとんどコードを書かなくても拡張機能が完成してしまうのが今の時代のすごいところ。
Manifest V3 の詳しい仕様を全部把握していなくても、CopilotなどAIアシスタントの提案を活用すれば“なんとなく”作り上げられるのは、やはり大きなメリットです。

  • WebConcentrater は「一定時間作業→強制的にYouTubeなどの動画差し替え」で集中力をサポートする仕組み
  • Manifest V3 によるセキュリティ対策やCSPの厳格化により、安全性にも配慮しやすい
  • GitHub Copilot を使えば、コード生成やドキュメントの下準備が超ラク

「自分も集中力不足をどうにかしたい」「Chrome拡張機能に興味がある」「AI活用で開発効率を爆上げしたい」――そんな方は、ぜひ参考にしてみてください！

もし本記事がお役に立ちましたら、ストック・いいねなどしてもらえると励みになります。最後まで読んでいただき、ありがとうございました。

p.s.1
この記事はo1で推敲しました。記事公開まで、ちょっとおんぶしてもらったというわけです。pro modeじゃなくても割といけますね。Gensparkによるファクトチェックも一応行っています。

あ、ちなみにこのo1はなんと無料です。今度紹介しますね。

p.s.2

ちなみにこの拡張機能をChromeWebStoreに出しても良いかなとちょっと考えたのですが、単純に面倒なのに加え、制作者自身が一日もたたずに拡張機能をオフにしちゃったもんですから、やめました。ほかの方法考えないとね。

6
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
6
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?