jQuery尝试下载图像

问题描述

我正在尝试使用jQuery编写某种HTML解析器。我有两个文件：

content.js

let messageInterval = 500;
let timer;
$(function () {
    const extensionID = chrome.runtime.id;
    sendHTMLPage(extensionID)
    $(this).on('DOMNodeInserted DOMNodeRemoved',function () {
        clearTimeout(timer);
        timer = setTimeout(function () {
            sendHTMLPage(extensionID)
        },messageInterval)
    })

    chrome.runtime.onMessage.addListener(function (message) {
        if (!jQuery.isEmptyObject(message.content))
            sendHTMLPage(extensionID)
    })

})

function sendHTMLPage(extensionID) {
    chrome.runtime.sendMessage(extensionID,{pageHTML: $('body').html()});
}

panelScript.js

let pageHTML;
let inputField = $('input');
let resultsDiv = $('#results')

$.fn.startTag = function () {
    return this[0].outerHTML.split('>')[0] + '>';
};

$(function () {
    const tabId = chrome.devtools.inspectedWindow.tabId.valueOf();
    chrome.tabs.sendMessage(tabId,{content: 'content'})
    chrome.runtime.onMessage.addListener(function (message,sender) {
        if (!$.isEmptyObject(message.pageHTML) && sender.tab.id === tabId) {
            pageHTML = message.pageHTML
        }
    })
    inputField.trigger('focus')
})

inputField.on('keyup',function () {
    resultsDiv.empty();
    $(pageHTML.toString()).find(inputField.val().toString()).each((index,element) => {
        resultsDiv.append('<div class="row-fluid">\n' +
            '<div><code></code></div>\n' +
            '<div class="text"></div>\n' +
            '</div>' +
            '<hr>');
        $('code').get(index).innerText = $(element).startTag().toString()
        $('.text').get(index).innerText = $(element).get(0).innerText.toString()
    })
})

应该如何工作：当页面加载内容脚本时，将页面的HTML发送到devtools脚本，然后由jQuery使用我在devtools选项卡上输入字段中的选择器对它进行解析，并将其放入我的devtools选项卡中。

但是我不断收到类似这样的错误：

GET chrome-extension://miagiiggbmmjgihjnnnajjkjafloiemm/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png net::ERR_FILE_NOT_FOUND
Image (async)
xe @ jquery-3.5.1.min.js:2
S.parseHTML @ jquery-3.5.1.min.js:2
S.fn.init @ jquery-3.5.1.min.js:2
S @ jquery-3.5.1.min.js:2
(anonymous) @ panelScript.js:25
dispatch @ jquery-3.5.1.min.js:2
v.handle @ jquery-3.5.1.min.js:2

好像jQuery试图从页面下载图像，但是为什么呢？我要做的就是将其作为文本粘贴到页面中。

更新我发现，即使我没有在devtools页面中插入任何内容，它仍然显示错误。下面的代码仍在尝试下载图片：

inputField.on('keyup',element) => {
        // resultsDiv.append('<div class="row-fluid">\n' +
        //     '<div><code></code></div>\n' +
        //     '<div class="text"></div>\n' +
        //     '</div>' +
        //     '<hr>');
        // $('code').get(index).textContent = $(element).startTag().toString()
        // $('.text').get(index).textContent = $(element)
        // console.log($(element).startTag())
        // console.log($(element).innerText)
    })
})

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

google-chrome-extension html html-parsing javascript jquery