通过Safari扩展将jQuery注入网页

Question

我只是想将Safari浏览器扩展程序中的jQuery注入网页。 但是仅对某些页面有效，因为将jQuery添加为开始/结束脚本会将其注入所有页面，这会使浏览变慢。 我通过使用其onload函数创建脚本标签来进行尝试：

var node = document.createElement('script');    
node.onload = function(){
    initjquerycheck(function($) {
        dosomethingusingjQuery($);
    });
};
node.async = "async";
node.type = "text/javascript";
node.src = "https://code.jquery.com/jquery-2.0.3.min.js";
document.getElementsByTagName('head')[0].appendChild(node);

检查是否加载了jQuery，我使用：

initjquerycheck: function(callback) {
    if(typeof(jQuery) != 'undefined'){
        callback(jQuery);
    }else {
        window.setTimeout(function() { initjquerycheck(callback); }, 100);
    }
}

但是typeof（jQuery）仍未定义。 （使用console.log（）检查）。 仅当我从调试控制台调用console.log（typeof（jQuery））时，它才会返回“功能”。 任何想法如何解决？ 提前致谢！

Answer 1

扩展注入的脚本无法访问网页的JavaScript名称空间。 您注入的脚本会创建一个<script>元素，并将其添加到页面的DOM中，但是由该脚本实例化的jQuery对象属于页面的名称空间，而不是您注入的脚本的名称空间。

至少有两个潜在的解决方案。 一种，使用扩展API，以正常方式将jQuery插入页面。 仅当可以使用URL模式对要定位的网页进行分类时，此方法才可行。

第二，使用Window.postMessage在注入的脚本和网页的名称空间之间进行通信。 您将需要向页面添加另一个<script> ，并且在此脚本中，具有message事件的侦听器。 侦听器将能够使用jQuery，就好像它是页面本身的“本机”一样。

如果需要，这里有一些代码可以帮助您入门。

在扩展注入脚本中：

var s0 = document.createElement('script');
s0.type = 'text/javascript';
s0.src = 'https://code.jquery.com/jquery-2.0.3.min.js';
document.head.appendChild(s0);

var s1 = document.createElement('script');
s1.type = 'text/javascript';
s1.src = safari.extension.baseURI + 'bridge.js';
document.head.appendChild(s1);

window.addEventListener('message', function (e) {
    if (e.origin != window.location.origin)
        return;
    console.log(e.data);
}, false);

window.postMessage('What jQuery version?', window.location.origin);

在bridge.js中：

window.addEventListener('message', function (e) {
    if (e.origin != window.location.origin)
        return;
    if (e.data == 'What jQuery version?') {
        e.source.postMessage('Version ' + $.fn.jquery, window.location.origin);
    }
}, false);