0

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.jsoncontent_security_policyにスクリプト属性を追加するための権限を記載しなければならないと考えていますが,どのような権限を追加すればよいかわかりませんでした.
どなたか解決策をご教示いただけないでしょうか.

1 件の回答 1

1

スキームがblobになっているようなので、script-srcblob:を加えてみてはどうでしょうか。

参考
CSP source values - HTTP | MDN

3
  • ご回答ありがとうございます. 以下の設定を試しましたが,エラー内容に変化はありませんでした. "script-src 'scheme-source' 'blob:' 'self' 'unsafe-eval'; object-src 'self';"
    – onishichi
    Commented 2022年5月21日 3:21
  • 'blob:' ではなく blob: かも Commented 2022年5月21日 5:01
  • ありがとうございます. ご指摘の通り,以下のように設定することで解決できました. "script-src 'scheme-source' blob: 'self' 'unsafe-eval'; object-src 'self';"
    – onishichi
    Commented 2022年5月23日 14:28

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。