Добавление сложного HTML с использованием содержимого Chrome script

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

Я сначала протестировал его непосредственно на веб-сайте, но теперь мне нужно добавить его в расширение.

Дело в том, что контент script API для Chrome позволяет только вставлять javascript. Это означает, что для ввода сложных макетов HTML мне нужно будет полностью написать его с объектами JS, которые долго писать, трудно поддерживать и абсолютно не ориентироваться на дизайнеры.

Мне интересно, знает ли кто-нибудь или может подумать о умном способе улучшить рабочий процесс.

Ответ 1

Относительно легко добавить целые веб-страницы, указав свой контент script в iframe. Просто следуйте этим рекомендациям:

Поместите файлы *.htm или *.html в папку источника расширения.
Поместите любые файлы *.css и *.js, которые использует HTML, в папку расширения.

Объявить HTML файл как ресурсы. EG:

"web_accessible_resources": ["Embedded_Hello_world.htm"]

Не используйте встроенный или внешний сервер, javascript в ваших HTML файлах. Это позволяет избежать проблем с политикой безопасности содержимого (CSP).
Этот вопрос не распространяется на связь с страницей /iframe, но если вы хотите это сделать, это немного более активно. Искать здесь на SO; он был покрыт много раз.

Пример:

Вы можете увидеть это в действии:

Создание новой папки расширения.
Загрузите jQuery в него.
Создайте 5 файлов, как указано ниже.
Загрузите распакованное расширение (вы можете увидеть аналогичные шаги в этом ответе.)
Перезагрузить страницу в Chrome; вы увидите страницу "Hello World", встроенную в верхнюю часть.

Создайте эти файлы в папке расширения:

manifest.json:

{
    "manifest_version":         2,
    "content_scripts":          [ {
        "js":       [ "iframeInjector.js" ],
        "matches":  [   "https://stackoverflow.com/questions/*"
        ]
    } ],
    "description":              "Inject a complete, premade web page",
    "name":                     "Inject whole web page",
    "version":                  "1",
    "web_accessible_resources": ["Embedded_Hello_world.htm"]
}

iframeInjector.js:

var iFrame  = document.createElement ("iframe");
iFrame.src  = chrome.extension.getURL ("Embedded_Hello_world.htm");

document.body.insertBefore (iFrame, document.body.firstChild);

Embedded_Hello_world.htm:

<!DOCTYPE html>
<html><head>
    <title>Embedded Hello World</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <link href="HelloWorld.css" rel="stylesheet" type="text/css">

    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="HelloWorld.js"></script>
</head><body>
<p>Hello World!</p>
</body></html>

HelloWorld.css:

body {
    color:              red;
    background-color:   lightgreen;
}

helloworld.js:

$(document).ready (jQueryMain);

function jQueryMain () {
    $("body").append ('<p>Added by jQuery</p>');
}

Ответ 2

У меня была та же проблема, что мое расширение сильно зависит от script templates

Вот что я сделал:

создать templates.html для хранения script шаблонов в
добавьте templates.html в web_accessible_resources, как в приведенном выше ответе ^^
доступ templates.html от content.js с помощью xhr и синтаксический анализ с помощью jQuery

manifest.json

"web_accessible_resources": ["templates.html"]

templates.html

<script id="template1" type="text/template">
    <div class="template1">template1</div>
</script>
<script id="template2" type="text/template">
    <div class="template2">template2</div>
</script>

content.js

function getTemplates(){
    return new Promise(function(resolve){
        $.ajax({
            url: chrome.extension.getURL('/templates.html'),
            success: function(data) {
                var $templates = $('<div></div>').append($.parseHTML(data)).find('script'),
                    templates = {};
                $templates.each(function(){
                    templates[this.id] = this.innerHTML;
                });
                return resolve(templates);
            }
        });
    });
}
getTemplates().then(function(templates){
    console.log(templates.template1); //<div class="template1">template1</div>
});

Ответ 3

Это может быть лучше, без внешней библиотеки и без iframe. Это почти то же самое, что и решение для iautomation.

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        var div = document.createElement('div');
        div.innerHTML = this.responseText;
        document.body.insertBefore(div, document.body.firstChild);
    } else {
        console.log('files not found');
    }
};
xhttp.open("GET", chrome.extension.getURL("/content.htm"), true);
xhttp.send();