88958


[ffmpeg.wasm](https://github.com/ffmpegwasm/ffmpeg.wasm)を使用したChrome拡張機能を作成しています．  
拡張機能のアイコンクリック時に表示されるポップアップ内で以下のコードを動かした場合にエラーが発生します．

コード

[code]

    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;
    
[/code]

エラーメッセージ

[code]

    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.
    
[/code]

エラー発生個所

[code]

    getCreateFFmpegCore.js:52 
    
[/code]

また，ffmpeg.wasm内の`getCreateFFmpegCore.js:52`付近は以下のようになっており，`ここでエラーが発生`と記述した部分でエラーが発生しています．

[code]

    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,
      });
    };
    
[/code]

`manifest.json`は以下のように設定しています．

[code]

    {
        "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": [
            "*"
        ]
    }
    
[/code]

エラーメッセージ，エラーの発生個所から`manifest.json`の`content_security_policy`にスクリプト属性を追加するための権限を記載しなければならないと考えていますが，どのような権限を追加すればよいかわかりませんでした．  
どなたか解決策をご教示いただけないでしょうか．


CC BY-SA 4.0
2022-05-21T02:48:49.810
88957
2022-05-21T05:01:28.377
27493
question
javascript ffmpeg chrome-extension
Chrome拡張機能ポップアップ内でappendChildする方法


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

参考  
[CSP source values - HTTP | MDN](https://developer.mozilla.org/en-
US/docs/Web/HTTP/Headers/Content-Security-Policy/Sources#sources)


CC BY-SA 4.0
2022-05-21T03:01:00.783
88958
2022-05-21T05:01:28.377
2022-05-21T05:01:28.377
45045
45045
88957
answer