Как вставить HTML и CSS в веб-страницу из файла шаблона HTML, используя JavaScript? - Chrome Расширение

Question

Я разрабатываю расширение Chrome и пытаюсь вставить большое количество HTML и CSS в веб-страницу при нажатии кнопки действия браузера.

Пока у меня есть рабочий тест версия, но это беспорядок, и я хочу очистить его.

В настоящее время фоновый файл. js вызывает файл содержимого. js файл для запуска, передавая ему сообщение при действии браузера нажата. Файл content. js содержит функцию, которая затем вызывается. Затем он генерирует HTML и CSS с помощью таких команд, как:

function buildExtensionUI() {
    var myDiv = document.createElement("div");
    myDiv.id = "myDiv";
    myDiv.style.position = "fixed";
}

Этот div также содержит другие элементы div, текст, кнопки и т. Д. c. В настоящее время функция имеет около 100 строк кода javascript, аналогично тому, как показано выше для генерации HTML, присвоения им всех идентификаторов и стиля CSS, и я хочу добавить гораздо больше. Я протестировал код, который у меня есть, и сейчас он делает то, что мне нужно.

Однако я хочу извлечь код в HTML и CSS «шаблонные файлы», чтобы я мог работать с ними и редактировать их правильно. В конечном итоге это будет очень большое приложение, поэтому я хочу сделать это сейчас, прежде чем продвинуться дальше.

Я много гуглил и пока не нашел работающего решения. Я создал файл шаблона HTML - например:

<template>
    <div id="myDiv">
        <div id="closeButton">
            &times;
        </div>

        <div id="centerDiv">
            <h1 id="title">
                My Title
            </h1>

            <h2 id="subTitle">

            </h2>

            <textarea name="textBox" id="textBox" cols="50" rows="4"></textarea>

            <button type="submit" id="button">Submit</button>
        </div>
    </div>
</template>

и файл стиля. css, который ссылается на идентификатор файла HTML. HTML необходимо будет динамически обновлять с помощью Javascript, в конечном итоге также.

Можно ли создать переменную или объект Javascript, который загружает файл шаблона HTML, который затем может быть введен в веб-страница, когда пользователь активирует действие браузера? Можно ли это сделать в фоновом режиме. js, а затем отправить в качестве объекта / переменной для содержимого. js?

Какие есть еще возможные решения?

Любые вопросы, пожалуйста, задавайте, и я могу уточнить.

Спасибо.

Answer 1

Фоновый скрипт может отправлять только простые JSON -совместимые данные в сообщениях, поэтому он не может отправлять DOM-элементы, такие как template. Он может считывать файлы из каталога расширений в строку через fetch('/file.html'), а затем отправлять его в сценарий содержимого, который либо назначит его innerHTML элемента, либо использует DOMParser API. Но HTML разбор такой большой строки будет медленным. Вам также придется использовать ShadowDOM для изоляции CSS.

. Существует более простое и быстрое решение: создайте элемент iframe в скрипте содержимого, который указывает на файл html в вашем расширении, который открывается через * 1007. * web_accessible_resources в манифесте. json. Внутри этого HTML файла вы можете делать все что угодно, загружать любые скрипты, которые вам нужны. Следующим шагом будет использование библиотеки вроде React или Vue или Svelte внутри этого файла, которая компилирует ваш HTML в виртуальный DOM. Ищите учебники по этому вопросу, прибегая к помощи «web_accessible_resources iframe content script».