从Safari扩展注入jQuery到网页 [英] Injecting jQuery to webpage from Safari extension

问题描述

我只想将jQuery从safari扩展注入网页。但仅限于某些页面，因为将jQuery添加为start- / endscript会将其注入所有页面，这会使浏览速度变慢。
我通过使用onload函数创建脚本标记来尝试它：

I just want to inject jQuery into a webpage from a safari extension. But only to some pages because adding jQuery as a start-/endscript would inject it to all pages and this makes browsing slow. I tried it by creating a script tag using its onload function:

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我使用：

to check if jquery is loaded i use:

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

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

But typeof(jQuery) remains undefined. (checked that using console.log()). Only if I call console.log(typeof(jQuery)) from the debugging console it returns 'function'. Any ideas how to fix that? Thanks in advance!

推荐答案

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

Extension injected scripts cannot access the web page's JavaScript namespace. Your injected script creates a <script> element and adds it to the page's DOM, but then the jQuery object instantiated by the script belongs to the page's namespace, not to your injected script's.

至少有两种可能的解决方案。一，使用扩展API以正常方式将jQuery注入页面。只有当您定位的网页可以使用网址格式进行分类时，此方法才有效。

There are at least two potential solutions. One, inject jQuery into the page the normal way, using the extension API. This method is only viable if the web pages that you are targeting can be categorized using URL patterns.

两个，使用 Window.postMessage 在您注入的脚本和网页的命名空间。您需要在页面中添加另一个< script> ，并在此脚本中有一个消息的监听器事件。监听器将能够使用jQuery，就好像它是页面本身的原生一样。

Two, use Window.postMessage to communicate between your injected script and the web page's namespace. You will need to add another <script> to the page, and in this script, have a listener for the message event. The listener will be able to use jQuery as if it were "native" to the page itself.

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

Here's some code to get you started, if needed.

在扩展注入脚本中：

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中：

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

这篇关于从Safari扩展注入jQuery到网页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！