ffmpeg.wasmを使用したChrome拡張機能を作成しています.
拡張機能のアイコンクリック時に表示されるポップアップ内で以下のコードを動かした場合にエラーが発生します.
コード
import { createFFmpeg } from '@ffmpeg/ffmpeg';
const ffmpeg = createFFmpeg({ log: true });
/**
*
* @param {Uint8Array} audio
* @returns {Promise<Uint8Array>}
*/
const audio2mp3Async = async (audio) => {
await ffmpeg.load(); //ここでエラーが発生
console.log('1');
ffmpeg.FS('writeFile', 'rawAudio', audio);
console.log('2');
await ffmpeg.run('-i', 'rawAudio', 'test.mp3');
console.log('3');
const mp3Audio = await ffmpeg.FS('readFile', 'test.mp3');
await ffmpeg.exit();
return mp3Audio;
};
export default audio2mp3Async;
エラーメッセージ
Refused to load the script 'blob:chrome-extension://*************/***********' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-eval'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.
エラー発生個所
getCreateFFmpegCore.js:52
また,ffmpeg.wasm内のgetCreateFFmpegCore.js:52
付近は以下のようになっており,ここでエラーが発生
と記述した部分でエラーが発生しています.
module.exports = async ({ corePath: _corePath }) => {
if (typeof _corePath !== 'string') {
throw Error('corePath should be a string!');
}
const coreRemotePath = resolveURL(_corePath);
const corePath = await toBlobURL(
coreRemotePath,
'application/javascript',
);
const wasmPath = await toBlobURL(
coreRemotePath.replace('ffmpeg-core.js', 'ffmpeg-core.wasm'),
'application/wasm',
);
const workerPath = await toBlobURL(
coreRemotePath.replace('ffmpeg-core.js', 'ffmpeg-core.worker.js'),
'application/javascript',
);
if (typeof createFFmpegCore === 'undefined') {
return new Promise((resolve) => {
const script = document.createElement('script');
const eventHandler = () => {
script.removeEventListener('load', eventHandler);
log('info', 'ffmpeg-core.js script loaded');
resolve({
createFFmpegCore,
corePath,
wasmPath,
workerPath,
});
};
script.src = corePath;
script.type = 'text/javascript';
script.addEventListener('load', eventHandler);
document.getElementsByTagName('head')[0].appendChild(script); //ここでエラーが発生
});
}
log('info', 'ffmpeg-core.js script is loaded already');
return Promise.resolve({
createFFmpegCore,
corePath,
wasmPath,
workerPath,
});
};
manifest.json
は以下のように設定しています.
{
"name": "Getting Started Example",
"description": "Build an Extension!",
"version": "1.0",
"manifest_version": 2,
"permissions": [
"webRequest",
"webRequestBlocking",
"downloads",
"<all_urls>"
],
"browser_action": {
"default_popup": "popup/build/index.html"
},
"background": {
"scripts": [
"background/background.bundle.js"
]
},
"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
"web_accessible_resources": [
"*"
]
}
エラーメッセージ,エラーの発生個所からmanifest.json
のcontent_security_policy
にスクリプト属性を追加するための権限を記載しなければならないと考えていますが,どのような権限を追加すればよいかわかりませんでした.
どなたか解決策をご教示いただけないでしょうか.