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

Question

sochi-russia @sochi-russia

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

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

style1.css

и

style2.css

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

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

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

Подписаться 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

Простой
Почему перестало работать меню?
- 1 подписчик
- вчера
- 129 просмотров
1

ответ
JavaScript

Простой
Какая логика у перебора массива таким способом?
- 1 подписчик
- вчера
- 149 просмотров
5

ответов
JavaScript

+1 ещё

Простой
Как перевести перевести top в translateY?
- 1 подписчик
- вчера
- 73 просмотра
1

ответ
JavaScript

Простой
E.target видит лишь малую область блока?
- 1 подписчик
- вчера
- 47 просмотров
0

ответов
JavaScript

Простой
Как при открытии блока закрыть предыдущий блок?
- 1 подписчик
- вчера
- 105 просмотров
0

ответов
JavaScript

Простой
Можно ли использовать Intersection Observer API для не дочерних элементов?
- 1 подписчик
- вчера
- 47 просмотров
0

ответов
JavaScript

+1 ещё

Простой
Как предотвратить работу onBlur?
- 1 подписчик
- 20 нояб.
- 63 просмотра
1

ответ
JavaScript

+2 ещё

Простой
Cypress «syntax error, unrecognized expression». Что за ошибка и как решить?
- 1 подписчик
- 19 нояб.
- 38 просмотров
1

ответ
JavaScript

+2 ещё

Средний
Как построить код, чтобы гугл таблица на сайте выдавала только значение из конкретной ячейки?
- 1 подписчик
- 19 нояб.
- 39 просмотров
0

ответов
JavaScript

Простой
Как обойти контроль просмотра видео на сайте образовательного ресурса?
- 1 подписчик
- 19 нояб.
- 134 просмотра
3

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

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

Rocket • Смоленск

от 80 000 до 130 000 ₽

Fullstack разработчик JavaScript, php

Дорстрой-36 • Воронеж

от 100 000 до 200 000 ₽

JavaScript FullStack developer

Wanted. • Санкт-Петербург

До 220 000 ₽

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

22 нояб. 2024, в 00:55

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

Разработка алгоритма на python (Data engineering)

21 нояб. 2024, в 23:30

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

Верстка Flutter + API

21 нояб. 2024, в 22:21

3000 руб./в час

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 окна?

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

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

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