从 Safari 扩展创建 JSONP 回调

Question

我正在尝试通过 Safari 扩展从 Reddit 加载一些数据。我正在使用 JSONP 模式来创建回调函数并将新的 src 附加到脚本。但是，看起来有两个窗口命名空间，并且我动态创建的函数不适用于动态添加的脚本的上下文。

此链接似乎详细说明了 chrome 的问题，我猜这与我在 Safari 中的问题相似。

JSONP request in chrome extension, callback function doesn't exist?

这是代码（在扩展之外工作）：

function jsonp(url, callback) {
    var callbackName = 'jsonp_callback_' + Math.round(100000 * Math.random());
    window[callbackName] = function(data) {
        delete window[callbackName];
        callback(data);
    };
    console.log('about to create script');
    var script = document.createElement('script');
    script.src = url + (url.indexOf('?') >= 0 ? '&' : '?') + 'jsonp=' + callbackName;
    document.body.appendChild(script);
    console.log('script should be appended');
}


function getImages(){
    jsonp('http://www.reddit.com/r/cats/.json', function(data) {
        data.data.children.forEach(function(el){
            console.log(el.data.url);
        });
    });    
}

有什么想法和解决方法吗？

谢谢！

Answer 1

在同一个窗口中有两个命名空间是对的。注入的脚本无法访问网页的全局变量，反之亦然。当您在注入的脚本中启动 JSONP 时，插入的 <script> 标签的脚本会在网页的命名空间中运行。

我知道有两种方法可以在 Safari 扩展程序中解决此限制。

可能更好的方法是使用扩展的全局页面通过标准 XHR 或 jQuery Ajax 方法（全局页面脚本支持）与外部 API 进行通信，并使用 messages 将获取的数据传递给注入的脚本.

另一种方法是继续使用注入脚本中的 JSONP，但让 JSONP 回调函数将获取的数据添加到页面的 DOM， 可以由注入脚本访问。例如，您可以将数据放在隐藏的<pre> 元素中，然后使用该元素的innerHTML 属性来检索它。当然，这种技术确实使页面自己的脚本可以看到内容，所以要小心。