Загрузка html в элемент страницы (расширение хром)

Я пытаюсь написать расширение Chrome, которое будет иметь панель вверху некоторых веб-страниц. Если у меня есть мой контент script следующим образом:

$('body').prepend('<div id="topbar"><h1>test</h1></div>');

все выглядит хорошо, но в конечном итоге я хочу что-то вроде этого:

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

где topbar.html:

<h1>test</h1>

Когда я меняю это на это, веб-страница сбивается. Большая часть контента исчезает, и я просто вижу некоторые объявления. Я даже не вижу заголовок "test". Я проверил, чтобы на странице не было другого идентификатора "topbar". Что не так?

Ответ 1

URL-адрес файла внутри папки extenion имеет следующий формат:

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

Вы можете получить этот путь, выполнив:

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

Теперь, если вы попытаетесь сделать:

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

это не позволит вам из-за политики кросс-происхождения. Фоновые страницы не имеют этого ограничения, поэтому вам нужно будет загружать HTML-код и передавать результат в контент 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
        });
    }
})

В реальном мире вы, вероятно, будете читать topbar.html только один раз, а затем повторно его использовать.

Ответ 2

В то время как вышеприведенное решение действительно работает, стоит обратить внимание на то, что вам нужно вернуть true из обработчика событий, чтобы порт связи все еще был доступен после успешного вызова $.ajax.

см. ниже для получения дополнительной информации. https://code.google.com/p/chromium/issues/detail?id=307034