Netflixの動画再生時に字幕データを外部APIへ送信し、VOICEVOXなどで読み上げるツールを作成したい場合、通信のキャッチとデータ取得が重要なポイントとなります。この記事では、Firefoxのアドオンを使ってNetflixの字幕データ（TTML形式のXML）を取得する方法を解説し、CSP（Content Security Policy）などの問題を回避する具体的な実装方法をご紹介します。
Netflixの字幕データを取得する方法
Netflixの字幕データは、通常、URLに「/?o=」が含まれる形式でやり取りされます。この字幕データは、XML形式で提供され、動画再生に合わせて同期されます。まずは、この字幕データを取得する方法を理解することが大切です。
URL形式が「https://*.nflxvideo.net/?o=…」であることが分かっているため、このURLにアクセスして、XMLデータを取得する必要があります。取得したデータを元に、VOICEVOXなどの外部APIへリクエストを送信するという流れになります。
Content Security Policy（CSP）の影響と回避方法
NetflixはCSPを設定しており、この設定によって、外部のスクリプトやリクエストが制限されることがあります。これにより、content.js内で直接的にwindow.fetchを使用して通信をキャッチするのが難しくなることがあります。
CSPの影響を回避するためには、アドオン側で適切な権限設定を行う必要があります。特に、manifest.jsonファイルで適切な許可を設定し、background.jsでwebRequestやdeclarativeNetRequestを活用することが重要です。
manifest.jsonの権限設定
manifest.jsonファイルで、アドオンが通信をキャッチできるようにするためには、以下のように権限設定を行う必要があります。これにより、アドオンが指定したURLからデータを取得できるようになります。
{
"permissions": [
"",
"webRequest",
"webRequestBlocking"
],
"host_permissions": [
"https://*.nflxvideo.net/*"
],
"background": {
"scripts": ["background.js"]
}
}
この設定により、指定されたURLのリクエストをキャッチし、処理することが可能になります。
background.jsでの通信キャッチ実装例
background.jsでwebRequestを利用して、指定したURLからXMLデータを取得するための実装例を紹介します。このコードは、指定された字幕データのレスポンスをキャッチし、content.jsにデータを渡す方法を示しています。
chrome.webRequest.onCompleted.addListener(function(details) {
if (details.url.includes("/?o=")) {
fetch(details.url)
.then(response => response.text())
.then(data => {
chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
chrome.tabs.sendMessage(tabs[0].id, { subtitleData: data });
});
});
}
}, {
urls: ["https://*.nflxvideo.net/*"]
});
このコードでは、指定されたURLからXMLデータを取得し、データをcontent.jsに送信する処理を行っています。
content.jsでのデータ処理とAPIへのリクエスト送信
取得した字幕データをcontent.jsで処理し、VOICEVOXなどの外部APIにリクエストを送信する方法について説明します。再生時間に合わせてデータを処理することで、字幕の読み上げが実現します。
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
if (request.subtitleData) {
const subtitle = parseXML(request.subtitleData);
const apiUrl = "https://voicevox.api.url";
fetch(apiUrl, {
method: "POST",
body: JSON.stringify({ text: subtitle.text, time: subtitle.time }),
headers: { "Content-Type": "application/json" }
}).then(response => response.json())
.then(data => console.log(data));
}
});
このコードでは、background.jsから送られた字幕データを受け取り、それを解析してVOICEVOX APIに送信しています。
まとめ
Netflixの字幕データを外部APIに送信するための実装方法について、manifest.jsonの設定、background.jsでの通信キャッチ、content.jsでのデータ処理について解説しました。これらのステップを踏むことで、CSPの影響を回避し、効果的にデータを取得・処理して外部APIへのリクエストを送信することができます。
コメント