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);
        }
    });
};

这是我复制到函数中的返回脚本。注入的脚本创建了一个对象，该对象将调用链接到在线声音文件（soundfonts）。它有效，但它不如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文件包含扩展名。如果他们不是：

原点必须是https://
您需要将原点添加到自定义CSP：Remote Script

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

1 个答案: