Добавление сложного HTML с помощью скрипта содержимого Chrome

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

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

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

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

13
content-script google-chrome google-chrome-extension html5 javascript

3 ответов

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

  1. место *.htm или *.html файлы в исходной папке модуля(ы).

  2. разместить любое *.css и *.js файлы, которые использует HTML, в папке(папках) расширения.

  3. объявите HTML-файл(ы) в качестве ресурсов. НАПРИМЕР: 

    "web_accessible_resources": ["Embedded_Hello_world.htm"]


  4. не используйте inline, или внешний сервер, javascript в ваших HTML-файлах. Это позволяет избежать проблем с the Политика Безопасности Контента (CSP).

  5. этот вопрос не охватывает общение со страницей/iframe, но если вы хотите это сделать, это немного сложнее. Ищите здесь на SO; это было покрыто много раз.


пример:

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

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

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

манифест.в 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>');
}
29

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

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

  • создать templates.html для хранения шаблонов скриптов в
  • добавить templates.html до web_accessible_resources как в приведенном выше ответе^^
  • открыть templates.html С content.js С xhr и разбором с в jQuery

манифест.в JSON

"web_accessible_resources": ["templates.html"]

шаблоны.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>

содержание.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>
});
1

Это может быть лучше, без внешней библиотеки и без 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();
1