javascript - 通过 javascript 加载 jQuery 时 $ 未定义

Question

我正在制作一个 Chrome 扩展，它将从当前选定的选项卡中获取内容。我正在将脚本文件注入(inject)当前页面，并且该脚本与扩展中的脚本进行通信。通过在页面中注入(inject) javascript，我尝试加载 jQuery，以便更容易找到我想要的内容。

(function() {

var script = document.createElement('script');
script.setAttribute("src", "http://code.jquery.com/jquery-latest.min.js")
script.setAttribute("type","text/javascript")


script.onload = script.onreadystatechange = function(){ 

    var port = chrome.runtime.connect({name: "ext"});   
    port.postMessage({ images: getImages(document)});
    port.onMessage.addListener(function(msg) {
    if (msg.request == "message")
        port.postMessage({ message: getText(document)});
    });

};
document.body.appendChild( script ); 

function getText(doc) {
    var textString =  $("div[id*='message'],div[class*='message']").filter(function() {
        return /[0-9]/.test( $(this).text() );
    }).html();
    var text = textString.match(/\d+/);
    return text; 
}

function getImages(doc){
    var result = "";
    var images = document.getElementsByTagName("IMG");
    for(var i = 0; i < images.length; i++){
        if(images[i].height > 200 && images[i].width > 200){
            result = result + images[i].src + ",";
        }
    }
    return result;
}

})();

jQuery 库已加载(我检查了开发人员工具中的“网络”选项卡)并且代码进入 getText() 函数，但“$”未定义。

编辑:

script.onload = script.onreadystatechange = ...

是等待 jQuery 加载的代码。它正在进入那里。但是当它到达

var textString =  $("div[id*='message'],div[class*='message']")

“$”未定义

Answer 1

您正在将 jQuery 加载到主页中，而不是加载到扩展的内容脚本中。

您的 getText() 函数在内容脚本中运行，而不是在页面脚本中运行，因此它处于“孤立的世界”中:https://developer.chrome.com/extensions/content_scripts#execution-environment

因此它无法访问页面的 window 对象，因此 $ (即 window.$)不是无障碍。另请参阅Can the window object be modified from a Chrome extension?

因此您还需要在扩展中加载 jQuery。请参阅How to use jQuery in chrome extension?和 How to use jQuery in Chrome extensions contentscript without conflict和 Load JQuery into a Chrome extension?