Web開発の基本（HTML/CSS/JS）

Chrome拡張機能を開発する上で、Web開発の基本技術である HTML / CSS / JavaScript の理解は不可欠です。以下では、それぞれの技術がどのようにChrome拡張で使われるか、基本的な役割と合わせて詳しく説明します。

1. HTML（HyperText Markup Language）

概要

HTMLはWebページの構造を記述するマークアップ言語です。見出し、段落、リンク、ボタンなどの要素を定義し、ページの骨組みを作成します。

Chrome拡張における使用例

  • popup.html：拡張機能のポップアップUI

  • options.html：ユーザー設定ページ

  • devtools.html：開発者ツール拡張用のUI

  • content_script.jsがアクセスするページのDOM構造

基本構文例

html
<!DOCTYPE html>
<html>
<head>
  <title>My Extension</title>
</head>
<body>
  <h1>Hello Extension</h1>
  <button id="clickMe">Click Me</button>
</body>
</html>

2. CSS（Cascading Style Sheets）

概要

CSSはWebページの見た目やレイアウトを指定するスタイルシート言語です。フォントサイズ、色、マージン、配置などを定義します。

Chrome拡張における使用例

  • popup.htmlやoptions.htmlのUI装飾

  • コンテントスクリプトからページ内の要素を動的にスタイリング

  • ユーザーにわかりやすいUIを提供するために使用

基本構文例

css
body {
  font-family: Arial, sans-serif;
  background-color: #f5f5f5;
}

button {
  padding: 8px 16px;
  background-color: #4CAF50;
  color: white;
  border: none;
}

3. JavaScript（JS）

概要

JavaScriptはWebページやChrome拡張の動作・ロジックを制御するプログラミング言語です。ユーザーの操作に反応した処理や、拡張機能の内部ロジックを実装します。

Chrome拡張における使用例

  • popup.js：ポップアップUIの動作制御

  • background.js / service_worker.js：常駐処理やイベント監視

  • content_script.js：ページ上のDOMにアクセス・変更

  • options.js：設定内容の保存・読み込み

基本構文例

javascript
document.getElementById('clickMe').addEventListener('click', function() {
  alert('Button clicked!');
});

まとめ：Chrome拡張における役割の対応

技術 主な役割 主なファイル例
HTML UIの構造を定義 popup.html, options.html
CSS UIの見た目を整える style.css, 埋め込みCSS
JavaScript イベント処理やロジック制御 popup.js, content_script.js

Chrome拡張機能は、これらWeb開発3技術（HTML/CSS/JS）を連携させることで実現されます。特にセキュリティ制約や**権限管理（permissions）**と連動するため、基本的なWeb開発スキルに加えて、Chrome拡張特有のアーキテクチャ（マニフェスト、サービスワーカー、メッセージ通信）を理解することが求められます。

生成日：2025/05/18