Как внедрить HTML вместе с CSS и JS в один файл HTML? - Расширение Chrome

Мое расширение предназначено для внедрения некоторых элементов HTML с использованием локальных библиотек JavaScript, таких как PrimeUI, jQueryUI и соответствующие им таблицы стилей CSS.

Лучший способ, который я нашел для этого, - ввести HTML следующим образом:

// test.js
$.get(chrome.extension.getURL('/overlay.html'), function(data) {
    $($.parseHTML(data)).appendTo('body');
}

// manifest.json
{
"name": "Test",
"version": "1.0",
"manifest_version": 2,
"options_page": "",
"description": "Test",
"browser_action": {
  "default_title": "Test",
  "default_popup": ""
},
"content_scripts": [
{
  "matches": [
    "<all_urls>"
  ],
  "js": [
    "js/jquery-3.1.1.min.js",
    "js/test.js"
  ]
}
],
"permissions": [
  "tabs"
],
"web_accessible_resources": [
  "overlay.html",

  "css/font-awesome.min.css",
  "css/jquery-ui.min.css",
  "css/primeui-all.min.css",

  "js/jquery-3.1.1.min.js",
  "js/jquery-ui.min.js",
  "js/primeelements.min.js",
  "js/primeui-all.min.js",
  "js/main.js"
]
}

У меня есть необходимые библиотеки JavaScript в папке "js" в корневом каталоге, из соображений безопасности я не получаю их из CDN.

Мой HTML содержит CSS и JS на <head> раздел, но стили и сценарии не применяются в любом случае.

<html>
<head>
    <link rel="stylesheet" href="css/font-awesome.min.css"/>
    <link rel="stylesheet" href="css/jquery-ui.min.css"/>
    <link rel="stylesheet" href="css/primeui-all.min.css"/>

    <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui.min.js"></script>
    <script type="text/javascript" src="js/primeui-all.min.js"></script>
    <script type="text/javascript" src="js/x-tag-core.min.js"></script>
    <script type="text/javascript" src="js/primeelements.min.js"></script>
</head>
<body>
    <button id="btn-show" type="button">Show</button>
    <div id="dlg" title="Godfather I">
        <p>The story begins as Don Vito Corleone, ...</p>
    </div>

</body>
</html>

// main.js
$(function() {
$('#dlg').puidialog({
    showEffect: 'fade',
    hideEffect: 'fade',
    minimizable: true,
    maximizable: true,
    responsive: true,
    minWidth: 200,
    modal: true,
    buttons: [{
        text: 'Yes',
        icon: 'fa-check',
        click: function() {
            $('#dlg').puidialog('hide');
        }
    },
        {
            text: 'No',
            icon: 'fa-close',
            click: function() {
                $('#dlg').puidialog('hide');
            }
        }
    ]
});
$('#btn-show').puibutton({
    icon: 'fa-external-link-square',
    click: function() {
        $('#dlg').puidialog('show');
    }
});
}

Кнопка успешно отображается, но без прикрепленных событий и стилей.

То есть: если я внедряю этот код в Stackru, моя кнопка получает стили из SO, а не из моего.

Я хочу по возможности избегать JavaScript для создания элементов или внедрения тегов программно, чтобы отделить View от Controller.

Как мне удается использовать мои стили и сценарии с моим введенным HTML, как мы обычно делаем? Я пытался добавить их в web_accessible_resources и другие поля манифеста безуспешно.

Источник

1 ответ

Решение

Макьен объяснил:

Невозможно проанализировать HTML с <head> элементы жестко закодированы такими <script> а также <link>, Вместо этого это должно быть введено другим способом.

Способы, которые я выбрал для введения файлов:

Для CSS:

// Test.js

/** CSS Injection */
var link = document.createElement("link");
link.href = chrome.extension.getURL("css/jquery-ui.min.css");
link.type = "text/css";
link.rel = "stylesheet";
document.getElementsByTagName("head")[0].appendChild(link);

Для JS:

// Test.js

/** JavaScript Injection */
var s = document.createElement('script');
s.src = chrome.extension.getURL('js/jquery-3.1.1.min.js');
// "When an inline script is inserted in the document, it's immediately executed 
// and the <script> tag can safely be removed". – Rob W.
s.onload = s.remove;
(document.head || document.documentElement).appendChild(s);

Попытка вставить большое количество кода / библиотек в контекст страницы с помощью тегов имеет значительный шанс помешать текущему содержимому /JavaScript страницы. Есть ли причина, по которой вы вставляете скрипты в контекст страницы? Как правило, эти вставленные сценарии (и CSS) будут использоваться в качестве сценариев содержимого (manifest.json content_scripts или chrome.tabs.executeScript()/chrome.tabs.insertCSS(). Не в контексте страницы. - Makyen

С помощью приведенного выше кода я успешно внедрил файлы, но стили и функции применяются только иногда, я буду редактировать, когда исправлю это.

Источник
Другие вопросы по тегам