Как в расширении для Хрома кнопками изменять размер Popup окна?

Question

sochi-russia @sochi-russia

Как в расширении для Хрома кнопками изменять размер Popup окна?

Есть расширение. Нажав на кнопку на панели браузера открывается Popup окно, за которое отвечает popup.html
В корне папки расширения есть 2 файла css
Назовем их

style1.css

и

style2.css

Расширение генерирует таблицу, 1 стиль отвечает за версию для ПК, второй за mobile response.
Возможно ли в файле popup.html над таблицей разместить две кнопки, нажатие на которых приводило таблицу в вид для ПК, а нажатие второй для mobile response?

Вопрос задан более трёх лет назад
141 просмотр

Комментировать

Подписаться 1 Средний Комментировать

Пригласить эксперта

Ответы на вопрос 3

5 комментариев

16 комментариев

sochi-russia @sochi-russia Автор вопроса

Было бы супер, посмотреть бы пример кода

Написано более трёх лет назад
Дмитрий Арушанов @daruwanov
sochi-russia,
Эмм...
Ну вешаете обработчик на кнопку onclick а в обработчике, что то такое можно
const element = document.getElementById("yourID"); element.classList.toggle("mobile");
Написано более трёх лет назад
sochi-russia @sochi-russia Автор вопроса

Дмитрий Арушанов, так делал, онклик воспринимается как скрипт, а в файле popup.html не должно быть скриптов
Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'self' blob: filesystem: chrome-extension-resource:". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...')

Написано более трёх лет назад

Дмитрий Арушанов @daruwanov

sochi-russia, Попробуйте вынести в отдельный файл (js) и подключить его + повесить обработчик через скрипт

popup.html

<html>
<head>
</head>
<body>
<div>
    <button id="buttonView"">change view</button>
</div>
<script src="popup.js"></script>
</body>
</html>

popup.js

function changeView () {
  const element = document.getElementById("yourID");
  element.classList.toggle("mobile");
}
const button = document.getElementById("buttonView");
button.addEventListener('click', changeView, false);

Должно работать

Написано более трёх лет назад

sochi-russia @sochi-russia Автор вопроса

Дмитрий Арушанов, Дмитрий спасибо большое, вечером проверю и отпишусь!

Написано более трёх лет назад
sochi-russia @sochi-russia Автор вопроса

Дмитрий Арушанов, Дмитрий а document.getElementById("yourID"); заместо yourID от чего ID вписывать?

Написано более трёх лет назад
sochi-russia @sochi-russia Автор вопроса

Дмитрий Арушанов, Понял, вечером проверю, спасибо

Написано более трёх лет назад
Дмитрий Арушанов @daruwanov
Ну если рассматривать мое предложение выше, то допустим ваша верстка вашей страницы
... <body> <div id="wrapper"> <div>...<.div> <span>...</span> ..... </div> </body>

И грубо говоря это обычная версия
#wrapper div {}
#wrapper span {}

а

#wrapper.mobile div {}
#wrapper.mobile span {}

Это мобильная

element.classList.toggle("mobile"); - лишь убирает\добавляет класс mobile (как переключатель)
и следовательно в данным случае искомый id это wrapper.
Написано более трёх лет назад
sochi-russia @sochi-russia Автор вопроса

Дмитрий Арушанов, Контент у меня Table, Внутри Div может находится?

Написано более трёх лет назад
Дмитрий Арушанов @daruwanov

Ну так работайте с table) Я лишь привел пример.

Написано более трёх лет назад
sochi-russia @sochi-russia Автор вопроса

Не работает

Написано более трёх лет назад
Дмитрий Арушанов @daruwanov

Ну с вашими входными данными могу сказать,
а у меня работает
)

Покажите ваш код. Что конкретно не работает? не вызывается функция (с той же самой ошибкой что и вышу было описано)? или не переключаются стили?

Написано более трёх лет назад
sochi-russia @sochi-russia Автор вопроса

Дмитрий Арушанов, Нажатие кнопки ни к чему не приводит

Написано более трёх лет назад
Дмитрий Арушанов @daruwanov

sochi-russia, А стили вы поправили?

Написано более трёх лет назад
sochi-russia @sochi-russia Автор вопроса

Дмитрий Арушанов, Да, подправил

Написано более трёх лет назад
Дмитрий Арушанов @daruwanov

А после нажатия на кнопку проверяли, класс добавляется?
Покажите, ваш код, что бы было понятно, что может быть не так)

Написано более трёх лет назад

Комментировать

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

JavaScript

Простой
Почему в букмарклете должным образом не выполняется Alt + Click?
- 1 подписчик
- час назад
- 7 просмотров
0

ответов
JavaScript

Средний
Как создать кроссбраузерный функиональный плеер?
- 1 подписчик
- час назад
- 12 просмотров
0

ответов
JavaScript

+1 ещё

Средний
Почему функция mnemonicToWalletKey из библиотеки тон генерирует неверный адрес кошелька?
- 1 подписчик
- 9 часов назад
- 41 просмотр
1

ответ
JavaScript

+1 ещё

Простой
Как передавать данные гугл таблицы в телеграм при добавлении новой записи?
- 1 подписчик
- 9 часов назад
- 48 просмотров
0

ответов
JavaScript

Простой
Проблема с добавлением полей товара в куки, почему-то при клике ничего в куки не записывает, что делать?
- 1 подписчик
- 11 часов назад
- 26 просмотров
2

ответа
JavaScript

+3 ещё

Средний
Какие есть способы организовать редкое добавление статей на сайт?
- 1 подписчик
- 12 часов назад
- 87 просмотров
1

ответ
JavaScript

Простой
Как следить за всей страницей разом через IntersectionObserver?
- 1 подписчик
- 13 часов назад
- 50 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Как сделать авто подтверждение?
- 2 подписчика
- 15 часов назад
- 121 просмотр
1

ответ
JavaScript

+2 ещё

Средний
Проблемы с telegram bot, а именно с сообщениями, как исправить?
- 1 подписчик
- 15 часов назад
- 61 просмотр
1

ответ
JavaScript

+1 ещё

Средний
Как реализовать анимацию текста при выходе за границу блока?
- 2 подписчика
- вчера
- 107 просмотров
1

ответ
Показать ещё Загружается…

Junior JavaScript Developer

КРАФТТЕК • Санкт-Петербург

от 60 000 до 80 000 ₽

JavaScript разработчик

вАйТи

от 5 000 до 25 000 ₽

JavaScript Fullstack

OnClass

от 200 000 до 600 000 ₽

Каталог AI tools

18 апр. 2024, в 01:12

150000 руб./за проект

Загрузка характеристик из xml/csv файла в карточки товаров WordPress

18 апр. 2024, в 00:58

5000 руб./за проект

Нарисовать подарки для соц сети

18 апр. 2024, в 00:10

50000 руб./за проект

Answer 1 · 2019-09-06 14:10:05

В chrome нету API для изменения poput размера! Все эти конфигурации читаются из manifest.json один раз и менять размер из JS невозможно!

Answer 2 · 2019-09-06 11:31:35

А если при нажатии на кнопку при помощи JS добавлять \ убирать класс у верхнего элемента
.mobile | .desktop ну или просто добавлять убирать .mobile класс.

Ну и немного подправить файл стилей, что бы он учитывал это

Answer 3 · 2019-09-06 13:34:07

//Вешаем обработчик событий на контейнер с popup
document.querySelector('.container')
  .addEventListener('click', ({target}) => /<Id твоей кнопки>/.test(target.classList.join('')) 
   ? /** Делаешь, что тебе нужно */ 
   : false)/** Ничего не делаешь /*

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

Как в расширении для Хрома кнопками изменять размер Popup окна?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт