Loading html into page element (chrome extension)

Question

I\'m trying to write a Chrome extension that will have a bar at the top of certain webpages. If I have my content script like this:

$(\'body\').prepend(\'&l         


        

Answer 1

FYI, now in 2020, chrome.extension.onRequest is deprecated and causes an error when loading the extension. Instead, chrome.runtime.sendMessage should be used. For content.js, the code would now be:

chrome.runtime.sendMessage({cmd: "read_file"}, function(html){
    $("#topbar").html(html);
});

and for background.js the code would now be:

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    if(request.cmd == "read_file") {
        $.ajax({
            url: chrome.extension.getURL("topbar.html"),
            dataType: "html",
            success: sendResponse
        });
       return true;
    }
})

be sure to note the 'return true' after the ajax, that tripped me up