最強動画ダウンローダーchrome拡張機能開発2

ピン留めした拡張機能アイコンを１クリックで動画がダウンロードできるchrome拡張機能が完成しました。

７日間試用版（通常版は下の有料記事内でダウンロードできます）

ydl_trial.zip

14.9 MB

ファイルダウンロードについて

ダウンロード

※有料記事部分に期限なしバージョンとソースコードがあります。

使用方法＆説明動画

作り方

どのような仕組みで動いているのか（概要）

chromeの拡張機能より、開いているタブのURLをpythonで動いているサーバーに送信し、pythonのyt-dlpにurlを渡し、ダウンロード可能か、ダウンロード不可能かを判定し、chrome拡張機能に返します。ダウンロード可能であればchrome拡張機能のアイコンを「ダウンロード可能」のアイコンに変更します。
「ダウンロード可能」アイコンをクリックしたら、chromeの拡張機能より、開いているタブのURLをpythonで動いているサーバーに送信し、pythonのyt-dlpにurlを渡し、yt-dlpにて動画をダウンロードするようにしています。

まずは、chrome拡張機能に必要なmanifest.jsonを作ります。

{
    "manifest_version": 3,
    "name": "動画ダウンローダー",
    "version": "1.0",
    "permissions": [
      "activeTab",
      "storage",
      "alarms",
      "tabs",
      "scripting"
    ],
    "host_permissions": [
      "*://*/*"
    ],
    "background": {
      "service_worker": "background.js"
    },
    "content_scripts": [
      {
        "matches": ["http://*/*","https://*/*"],
        "run_at":"document_start",
        "js": ["content.js"]
      }
    ],
    "options_ui": {
      "open_in_tab": false,
      "page": "options.html"
   },
    "action": {
      "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"
    }
  }

簡単にmanifest.jsonの説明をします。
・manifest_version: これはマニフェストファイルのバージョンを指定します。現在の最新バージョンは3です。バージョン3を使用することで、最新のAPIとセキュリティ機能を利用することができます。

・name: 拡張機能の名前です。「動画ダウンローダー 試用版」という名前がユーザーに表示されます。

・version: 拡張機能のバージョン番号。これは拡張機能のアップデートを管理する際に重要です。

・permissions: 拡張機能が正常に機能するために必要な権限をリストアップします。ここで指定された権限は、ユーザーによるインストール時に確認され、承認が必要です。

・activeTab: 拡張機能がアクティブなタブとその内容にアクセスできるようにします。

・alarms: 時間ベースのタスクをスケジュールすることができます。

・tabs: タブに関する情報を取得し、タブを操作することができます。

・scripting: ページにスクリプトを注入するなどのスクリプティング機能を使用できます。

・host_permissions: 拡張機能が動作するウェブサイトの範囲を指定します。ここでは、すべてのウェブサイト(*://*/*)で動作することを許可しています。

・background: バックグラウンドで実行されるスクリプトの設定です。service_worker を指定して background.js をバックグラウンドで常時実行することができます。

・content_scripts: 特定のページに自動で注入されるスクリプトを設定します。matches で指定したURLパターンのページに content.js が注入され、document_start でページの読み込みが始まるとすぐにスクリプトが実行されます。

・options_ui: 拡張機能のオプションページに関する設定です。options.html をオプションページとして使用し、ポップアップではなく新しいタブで開くように設定しています。

・action: ブラウザツールバーに表示されるアイコンを設定します。異なるサイズのアイコンが指定されています。

・icons: 拡張機能自体のアイコンを設定します。これらはブラウザの拡張機能ページやウェブストアで表示されます。

次にbackground.jsを作ります。