Question

我正在尝试使用Chrome扩展程序将jQuery UI的“可调整大小”功能添加到现有网页。使用以下代码时，在Chrome控制台中出现错误“未捕获的ReferenceError：jQuery未定义”。

的manifest.json：

{
    "manifest_version": 2,
    "name": "Resizeable",
    "permissions": [
          "tabs"
        ],
    "content_scripts": [{
        "all_frames": true,
        "matches": ["https://abcde.net/Tools/*"],
        "js": ["jquery-1.9.1.js","jquery-ui.js","contentscript.js"],
        "run_at": "document_end" 
        }]
}

contentscript.js：

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

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

if (window.jQuery && jQuery.ui) {
    alert('loaded');
} else {
    alert('not loaded');
}

我可以通过将三个“段落”中的每一个单独粘贴到Chrome控制台来绕过错误消息。因此，我假设出现错误是因为在添加jQuery UI时尚未完全加载jQuery。接下来，我尝试了以下内容：

contentscript.js：

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

checkJquery();

function checkJquery() {
    if(window.jQuery) {
        var jq = document.createElement('script');
        jq.type = 'text/javascript';
        jq.src = 'https://code.jquery.com/ui/1.10.4/jquery-ui.js';
        document.head.appendChild(jq);
        alert('jQ is loaded');
        checkJqueryUI();
    } else {
        setTimeout(function() {
            checkJquery();
        }, 1000);
    }
}

function checkJqueryUI() {
    if(jQuery.ui) {
        alert('UI is loaded');
        furtherCode();
    } else {
        setTimeout(function() {
            checkJqueryUI();
        }, 1000);
    }
}

function furtherCode() {
    var s = document.createElement('link');
    s.rel = 'stylesheet';
    s.href= 'https://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css'
    document.head.appendChild(s); 

    var s = document.createElement('style');
    var css = '#resizable { width: 470px; height: 320px; padding: 0.5em; } #resizable h3 { text-align: center; margin: 0; }'
    s.appendChild(document.createTextNode(css));
    document.head.appendChild(s); 

    document.getElementById('bigDocFrame').parentNode.setAttribute("id", "resizable");
    document.getElementById('bigDocFrame').parentNode.setAttribute("class", "ui-widget-content");
    document.getElementById('bigDocFrame').height='100%'; 

    var s = document.createElement('script');
    s.type = 'text/javascript';
    s.language = 'javascript';
    var script = 'jQuery.noConflict();'
    s.appendChild(document.createTextNode(script));
    document.head.appendChild(s); 

    var s = document.createElement('script');
    var script = 'jQuery(function() {jQuery( "#resizable" ).resizable();});'
    s.appendChild(document.createTextNode(script));
    document.head.appendChild(s); 
}

~~但条件“if（window.jQuery）”始终为false。我预计一段时间后它会成真。我犯了错误吗？~~ （解决方法是将jquery-1.9.1.js和jquery-ui.js添加到manifest.json中）

仍然出现错误消息“Uncaught ReferenceError：jQuery is defined defined”。它被称为“VM5466：1”，它由一行代码组成：

jQuery.noConflict();

Chrome扩展程序：将jQuery添加到网站

0 个答案: