How to resize Popup window using buttons in Chrome extension?

Question

JavaScript

There is an extension. By clicking on the button on the browser panel, a Popup window opens, for which popup.html is responsible.
There are 2 css files in the root of the extension folder. Let's
call them

style1.css

and

style2.css

The extension generates a table, 1 style is responsible for the PC version, the second is for the mobile response.
Is it possible to place two buttons above the table in the popup.html file, clicking on which brought the table to the desktop view, and clicking the second one for the mobile response?

Answer 1

There is no API in chrome to change the poput size! All these configurations are read from manifest.json once and it is impossible to resize from JS!

Answer 2

And if, when you click on the button using JS, add / remove the class from the top element
.mobile | .desktop, or just add and remove the .mobile class.
Well, tweak the style file a little so that it takes this into account.

Answer 3

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

The bottom line is to listen to clicks in the block where your popup with buttons is, with any click inside it, you check who initiated the event, if this is your button, do what you need, otherwise nothing