はじめに (対象読者・この記事でわかること)

この記事は、Web開発に興味がある方や、YouTube Studioをよく利用するクリエイターを対象にしています。特に、JavaScriptとCSSの基本的な知識がある方を想定しています。

この記事を読むことで、Chrome拡張機能の基本的な作成方法から、YouTube Studioの背景色をカスタマイズする具体的な実装手法までを理解できます。また、自作のChrome拡張機能をChromeストアに公開するための基本的な手順も学べます。

最近、YouTubeのインターフェースが更新され、個人の好みに合わせてカスタマイズしたいという要望が増えています。特に長時間動画編集を行う際、目に優しい背景色に変更できると作業効率が向上します。本記事では、そんなニーズに応えるChrome拡張機能の作成方法を具体的に解説します。

前提知識

この記事を読み進める上で、以下の知識があるとスムーズです。 - HTML/CSSの基本的な知識 - JavaScriptの基本的な知識 - Chrome拡張機能の基本的な仕組み（あると望ましい）

なぜYouTube Studioの背景色をカスタマイズする必要があるのか

YouTube Studioは、動画のアップロード、編集、分析など、クリエイターにとって欠かせないツールです。しかし、デフォルトのインターフェースは白を基調としており、長時間作業する際には目の疲れを感じることがあります。

特に、夜間や薄暗い環境で作業を行う場合、明るい背景は目に負担をかけます。また、個人の作業効率を上げるために、自分好みの配色にカスタマイズしたいというニーズも多くあります。

幸いなことに、Chrome拡張機能を利用することで、YouTube Studioの外観を自由にカスタマイズできます。この記事では、そんなニーズに応えるChrome拡張機能の作成方法を具体的に解説します。

YouTube Studioの背景色を変更するChrome拡張機能の作成方法

ステップ1：Chrome拡張機能の基本構造を作成する

まずは、Chrome拡張機能の基本的なファイル構造を作成します。以下のファイルとフォルダを準備します。

youtube-studio-theme/
├── manifest.json
├── background.js
├── content.js
└── styles/
    └── custom.css

ステップ2：manifest.jsonの作成

Chrome拡張機能の設定ファイルであるmanifest.jsonを作成します。以下は基本的な設定例です。

Json

{
  "manifest_version": 3,
  "name": "YouTube Studio Custom Theme",
  "version": "1.0",
  "description": "Customize the background color of YouTube Studio",
  "permissions": [
    "activeTab",
    "storage"
  ],
  "host_permissions": [
    "https://studio.youtube.com/*"
  ],
  "content_scripts": [
    {
      "matches": ["https://studio.youtube.com/*"],
      "css": ["styles/custom.css"],
      "js": ["content.js"]
    }
  ],
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icons/icon16.png",
      "48": "icons/icon48.png",
      "128": "icons/icon128.png"
    }
  },
  "icons": {
    "16": "icons/icon16.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  }
}

ステップ3：カスタムCSSの作成

次に、YouTube Studioの背景色を変更するためのCSSを作成します。stylesフォルダ内にcustom.cssという名前でファイルを作成し、以下の内容を記述します。

Css

/* YouTube Studioの背景色を変更 */
.skeleton-bg,
.ytcp-scrollbar-track,
.ytcp-scrollbar-corner,
.ytcp-scrollbar-button,
.ytcp-scrollbar-thumb {
  background-color: #2e2e2e !important;
}

/* テキストの色を調整 */
.yt-formatted-string,
.ytd-video-primary-info-renderer,
.ytd-video-secondary-info-renderer,
.ytcp-e-a {
  color: #ffffff !important;
}

/* リンクの色を調整 */
a {
  color: #90caf9 !important;
}

/* ボタンの色を調整 */
.ytd-button-renderer,
.ytcp-button {
  background-color: #3f51b5 !important;
  color: white !important;
}

/* ホバー時のボタン色を調整 */
.ytd-button-renderer:hover,
.ytcp-button:hover {
  background-color: #303f9f !important;
}

ステップ4：コンテントスクリプトの作成

次に、content.jsというファイルを作成し、以下の内容を記述します。このスクリプトは、YouTube Studioのページが読み込まれたときに実行されます。

Javascript

// ページ読み込み完了時に実行
document.addEventListener('DOMContentLoaded', function() {
  // 背景色を変更する関数
  function applyCustomTheme() {
    // ストレージから設定値を取得
    chrome.storage.sync.get(['backgroundColor', 'textColor', 'buttonColor'], function(data) {
      // デフォルト値の設定
      const bgColor = data.backgroundColor || '#2e2e2e';
      const txtColor = data.textColor || '#ffffff';
      const btnColor = data.buttonColor || '#3f51b5';

      // CSSを動的に適用
      const style = document.createElement('style');
      style.innerHTML = `
        .skeleton-bg,
        .ytcp-scrollbar-track,
        .ytcp-scrollbar-corner,
        .ytcp-scrollbar-button,
        .ytcp-scrollbar-thumb {
          background-color: ${bgColor} !important;
        }

        .yt-formatted-string,
        .ytd-video-primary-info-renderer,
        .ytd-video-secondary-info-renderer,
        .ytcp-e-a {
          color: ${txtColor} !important;
        }

        .ytd-button-renderer,
        .ytcp-button {
          background-color: ${btnColor} !important;
          color: white !important;
        }

        .ytd-button-renderer:hover,
        .ytcp-button:hover {
          background-color: ${adjustBrightness(btnColor, -20)} !important;
        }
      `;
      document.head.appendChild(style);
    });
  }

  // 色の明るさを調整する関数
  function adjustBrightness(color, amount) {
    const num = parseInt(color.replace("#", ""), 16);
    const r = Math.max(0, Math.min(255, (num >> 16) + amount));
    const g = Math.max(0, Math.min(255, ((num >> 8) & 0x00FF) + amount));
    const b = Math.max(0, Math.min(255, (num & 0x0000FF) + amount));
    return "#" + ((r << 16) | (g << 8) | b).toString(16).padStart(6, '0');
  }

  // テーマの適用
  applyCustomTheme();

  // ページの変更を監視
  const observer = new MutationObserver(function(mutations) {
    applyCustomTheme();
  });

  // 変更を監視する対象とオプションを設定
  const targetNode = document.body;
  const config = { childList: true, subtree: true };

  // 監視を開始
  observer.observe(targetNode, config);
});

ステップ5：バックグラウンドスクリプトの作成

background.jsというファイルを作成し、以下の内容を記述します。このスクリプトは拡張機能のバックグラウンドで実行されます。

Javascript

// 初期設定の保存
chrome.runtime.onInstalled.addListener(() => {
  chrome.storage.sync.set({
    backgroundColor: '#2e2e2e',
    textColor: '#ffffff',
    buttonColor: '#3f51b5'
  });
});

ステップ6：ポップアップの作成

ユーザーが拡張機能のアイコンをクリックしたときに表示されるポップアップを作成します。popup.htmlというファイルを作成し、以下の内容を記述します。

Html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    body {
      width: 300px;
      padding: 10px;
      font-family: Arial, sans-serif;
    }
    .form-group {
      margin-bottom: 15px;
    }
    label {
      display: block;
      margin-bottom: 5px;
    }
    input[type="color"] {
      width: 100%;
      height: 30px;
    }
    button {
      width: 100%;
      padding: 10px;
      background-color: #3f51b5;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    button:hover {
      background-color: #303f9f;
    }
  </style>
</head>
<body>
  <h2>YouTube Studio テーマ設定</h2>

  <div class="form-group">
    <label for="bgColor">背景色:</label>
    <input type="color" id="bgColor" value="#2e2e2e">
  </div>

  <div class="form-group">
    <label for="txtColor">文字色:</label>
    <input type="color" id="txtColor" value="#ffffff">
  </div>

  <div class="form-group">
    <label for="btnColor">ボタン色:</label>
    <input type="color" id="btnColor" value="#3f51b5">
  </div>

  <button id="save">保存</button>

  <script src="popup.js"></script>
</body>
</html>

ステップ7：ポップアップ用のJavaScriptの作成

popup.htmlで参照しているpopup.jsというファイルを作成し、以下の内容を記述します。

Javascript

// 保存ボタンの要素を取得
const saveButton = document.getElementById('save');
const bgColorInput = document.getElementById('bgColor');
const txtColorInput = document.getElementById('txtColor');
const btnColorInput = document.getElementById('btnColor');

// ストレージから現在の設定値を取得して表示
chrome.storage.sync.get(['backgroundColor', 'textColor', 'buttonColor'], function(data) {
  bgColorInput.value = data.backgroundColor || '#2e2e2e';
  txtColorInput.value = data.textColor || '#ffffff';
  btnColorInput.value = data.buttonColor || '#3f51b5';
});

// 保存ボタンがクリックされたときの処理
saveButton.addEventListener('click', function() {
  // 入力された値を取得
  const bgColor = bgColorInput.value;
  const txtColor = txtColorInput.value;
  const btnColor = btnColorInput.value;

  // ストレージに保存
  chrome.storage.sync.set({
    backgroundColor: bgColor,
    textColor: txtColor,
    buttonColor: btnColor
  }, function() {
    // 保存完了の通知
    const notification = document.createElement('div');
    notification.textContent = '設定が保存されました';
    notification.style.position = 'fixed';
    notification.style.bottom = '20px';
    notification.style.left = '20px';
    notification.style.backgroundColor = '#4caf50';
    notification.style.color = 'white';
    notification.style.padding = '10px';
    notification.style.borderRadius = '4px';
    notification.style.zIndex = '1000';
    document.body.appendChild(notification);

    // 3秒後に通知を削除
    setTimeout(function() {
      notification.remove();
    }, 3000);
  });
});

ステップ8：アイコンの準備

拡張機能のアイコンを準備します。iconsフォルダを作成し、以下のサイズのアイコン画像を配置します。 - icon16.png (16x16ピクセル) - icon48.png (48x48ピクセル) - icon128.png (128x128ピクセル)

ステップ9：拡張機能の読み込み

すべてのファイルを準備したら、Chrome拡張機能をローカルで読み込んでテストします。

  1. Chromeブラウザを開き、アドレスバーに chrome://extensions と入力して拡張機能管理ページにアクセスします。
  2. 右上の「デベロッパーモード」を有効にします。
  3. 左上の「パッケージ化されていない拡張機能を読み込む」をクリックします。
  4. 先ほど作成した youtube-studio-theme フォルダを選択します。

これで、拡張機能がChromeに読み込まれ、YouTube Studioのページでテーマが適用されるはずです。

ハマった点やエラー解決

エラー1：CSSが適用されない

問題点： 作成したCSSがYouTube Studioのページに適用されない。

原因： YouTube Studioは動的にコンテンツを生成しており、CSSが適用される前に要素が削除されてしまう可能性がある。

解決策： MutationObserverを使用して、ページの変更を監視し、変更があった場合に再度CSSを適用するように修正。

エラー2：拡張機能が機能しない

問題点： 拡張機能がYouTube Studioで機能しない。

原因： manifest.jsonのhost_permissionsにYouTube Studioのドメインが含まれていない。

解決策： manifest.jsonのhost_permissionsに "https://studio.youtube.com/*" を追加。

エラー3：設定が保存されない

問題点： ポップアップで設定を変更しても、変更が保存されない。

原因： permissionsにstorageが含まれていない。

解決策： manifest.jsonのpermissionsに "storage" を追加。

まとめ

本記事では、YouTube Studioの背景色を自作Chrome拡張機能でカスタマイズする方法を解説しました。

  • Chrome拡張機能の基本的なファイル構造の作成方法
  • manifest.jsonの設定方法
  • CSSを用いたYouTube Studioの外観変更
  • JavaScriptによる動的なテーマ適用
  • ユーザーが設定を変更できるポップアップの作成
  • Chrome拡張機能のローカルでの読み込み方法

この記事を通して、読者は自作のChrome拡張機能を作成し、YouTube Studioの外観を自由にカスタマイズできるようになるでしょう。今後は、より高度なテーマ機能や、他のYouTube関連サイトへの対応などについても記事にする予定です。

参考資料