javascript - 在内容脚本中使用 JQuery

Question

我正在尝试在我的内容脚本中使用 JQuery，但 chrome 控制台显示“ Uncaught ReferenceError :$ 未定义”。我可以在我的后台脚本中成功使用 JQuery，所以我不确定发生了什么。

这是 list 文件:

{
    "name": "Something",
    "version": "1.0",
    "description": "SOmething",
    "background": {
        "scripts": ["background.js", "jquery.js"],
        "persistent": true
    },
    "browser_action": {
        "default_icon": "favicon.png",
        "default_popup": "popup.html"
    },
    "permissions": [
        "declarativeContent",
        "http://localhost/",
        "http://*/*",
        "https://localhost/",
        "https://*/*",
        "tabs"
    ],
    "icons": {
        "48": "icon-48p.png"
    },

    "content_scripts": [{
        "matches": [
            "http://*/*",
            "https://*/*"
        ],
        "js": ["content.js", "jquery.js"]
    }],
    "web_accessible_resources": ["button.PNG", "jquery.js"],
    "manifest_version": 2
}

这是内容脚本:

var btn = document.createElement("input");
btn.id = "btn";
btn.type = "image";
btn.setAttribute("src", chrome.extension.getURL("button.PNG"));
btn.onclick = function() {
    alert("Currently under development");
};
btn.className = "";


if (window.location.href.indexOf("mysite") > -1) {
    $('#pageContainer').append('<ol><li>CATS</li><ol>'); //Fails here

}


if (window.location.href.indexOf("myother") > -1) {
    document.getElementById("maindiv").appendChild(btn); //works
}

编辑:JQuery 在项目中，它确实在 background.js 中工作。问题是如何让它在我的内容脚本中工作？我在 list 中指定我希望将 jquery 与 content.js 一起注入(inject)。

Answer 1

使 jQuery 成为 content_scripts -> js 数组中列出的第一个内容脚本。喜欢:

"content_scripts": [{
    "matches": [
        "http://*/*",
        "https://*/*"
    ],
    "js": ["jquery.js", "content.js"]
}],

您的内容脚本在加载之前尝试访问 jquery。您现在设置 list 的方式，仍然应该加载 jQuery。要验证这一点，请在内容脚本页面的控制台中键入类似 window.jQuery 的内容，并确保它已定义。