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('<div id="topbar"><h1>test</h1></div>'); 

everything looks good, but what I ultimately want is something like this:

$('body').prepend('<div id="topbar"></div>'); $('#topbar').load('topbar.html'); 

where topbar.html is:

<h1>test</h1> 

When I change it to this, though, the webpage is clobbered. Most of the content disappears, and I just end up seeing some of the ads. I can't even see the 'test' header. I've checked to make sure there's no other 'topbar' id on the page. What's wrong?

Answer 1

URL of a file inside an extenion folder has the following format:

chrome-extension://<ID>/topbar.html 

You can get this path by running:

chrome.extension.getURL("topbar.html") 

Now if you try to do:

$('#topbar').load(chrome.extension.getURL("topbar.html")); 

it wouldn't let you because of cross-origin policy. Background pages don't have this limitation, so you would need to load HTML there and pass result to a content script:

content_script.js:

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

background.html:

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

In a real world you probably would read topbar.html only once and then reuse it.