如何在构建Chrome扩展时去掉插件中的内联代码

Question

我正在使用midi.js插件构建一个Chrome扩展。插件中的一个函数将一个脚本返回给DOM，我不知道如何直接注入这个脚本，这是我必须做的，因为它违反了安全性。

这是我们的功能-

    var addSoundfont = function(text) {
    var script = document.createElement("script");
    script.language = "javascript";
    script.type = "text/javascript";
    script.text = text;
    document.body.appendChild(script);
};

这叫它-

    connect.webaudio = function(filetype, instruments, conf) {
    if (MIDI.loader) MIDI.loader.message("Web Audio API...");
    // works awesome! safari, chrome and firefox support.
    var queue = createQueue({
        items: instruments,
        getNext: function(instrumentId) {
            DOMLoader.sendRequest({
                url: MIDI.soundfontUrl + instrumentId + "-" + filetype + ".js",
                onprogress: getPercent,
                onload: function(response) {
                    addSoundfont(response.responseText);
                    if (MIDI.loader) MIDI.loader.update(null, "Downloading...", 100);
                    queue.getNext();
                }
            });
        },
        onComplete: function() {
            MIDI.WebAudio.connect(conf);
        }
    });
};

这是我复制到函数中的返回脚本，注入的脚本创建了一个对象，该对象将调用链接到在线声音文件(声音字体)。它可以工作，但不像Xan的解决方案那样优雅：

if (typeof(MIDI.Soundfont) === "undefined") MIDI.Soundfont = {};
MIDI.Soundfont.acoustic_grand_piano = {
    "A0": "data:audio/ogg;base64,T2dn.......

然后它就会永远..。

感谢您的阅读！

Answer 1

您可以不加载脚本，然后内联插入其文本，只需使用适当的<script src="">标记即可。

getNext: function(instrumentId) {
  // Assuming MIDI.soundfontUrl in in "chrome-extension://" origin
  //  Also, see chrome.runtime.getURL()
  var url = MIDI.soundfontUrl + instrumentId + "-" + filetype + ".js";

  var el = document.createElement("script");
  el.src = url;

  // This is synchronous:
  document.body.appendChild(el);
  queue.getNext();
}

这假设js文件包含扩展名。如果不是这样的话：

1. 其来源必须是https://
2. 您需要将源添加到自定义CSP：远程脚本