0

Я делаю расширение, в котором нажимая на его иконку, на странице появляется сайдбар (на скриншоте). Сейчас это сделано в background-scripts. Но у меня есть проблемы с отладкой, и я хочу переписать это всё как отдельный шаблон HTML с собственными стилями и скриптами. Вопрос, как вставить такой шаблон в веб-страницу, используя расширение Chrome, чтобы остался доступ к DOM оригинальной страницы?

manifest.json:

{
    "name": "TestAppExtension",
    "version": "0.0.1",
    "manifest_version": 2,
    "browser_action": {
        "default_title": "Test App"
    },
    "background": {
        "scripts": ["app/background.js"]
    },
    "permissions": ["activeTab"]
}

введите сюда описание изображения

3
  • 2
    предназначение background.js в другом, для создания своего шаблона, создайте popup.html и подключите отдельные свои файлы с стилями JS
    – Arsen
    12 мар 2018 в 11:38
  • @Arsen мне как раз и не нужен popup.html, потому что у него слишком много ограничений в плане стилей. Нужно чтобы контент страницы сужался влево на 20% и эти 20% занимал сайдбар, как на скрине. Просто сейчас этот сайдбар надо переделать чтобы он подключался как отдельный html-файл к странице на которой было запущено расширение и чтобы он получал доступ к её DOM. 12 мар 2018 в 11:53
  • 2
    Popup.html это как пример, вы можете создать любой html файл в котором вставите вашу вёрстку и стили, после через JS вставите содержимое данного html в DOM страницы
    – Arsen
    12 мар 2018 в 11:58

1 ответ 1

1

Запихайте HTML-шаблон в popup.html или options.html, или в любую другую страницу, подключенную к расширению. Потом возьмите содержимое шаблона (да хоть document.children[0].innerHTML, если нужно вместе с ) и воткните скриптом в сайдбар. На ограничения в плане стилей вам при этом будет абсолютно наплевать, т.к. все элементы будут уже не в popup.html, а в вашем сайдбаре.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.