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

Question

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

$('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. Что не так?

Answer 1

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

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

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

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

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

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

это не позволит вам из-за политики кросс-происхождения. Фоновые страницы не имеют этого ограничения, поэтому вам нужно будет загрузить туда HTML и передать результат в скрипт содержимого:

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 только один раз, а затем использовали его снова.

Answer 2

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

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