Блог

Я пытаюсь создать расширения Chrome, которые мне нужны, чтобы иметь возможность изменять размер с помощью настроек, которые я включил. Одним из которых являются кнопки и — для увеличения и уменьшения размера всплывающего окна (и холста) от 50% до 250%. Я попытался настроить размеры тела и html, я попробовал функцию transform: scale() и перезагрузил CSS, чтобы получить обновленные значения. У меня есть некоторый успех, но размеры никогда не бывают правильными. Я не знаю, что делать.

Если кто-нибудь сможет заставить это работать, я буду вечно благодарен. Это не давало мне покоя всю последнюю неделю, и я не думаю, что пойму это.

Соответствующие методы Javascript:

 const refreshCSS = function()   {  // geeksforgeeks.org/how-to-reload-css-without-reloading-the-page-using-javascript/  let links = document.getElementsByTagName('link');  for (let i = 0; i lt; links.length; i  ) {  if (links[i].getAttribute('rel') == 'stylesheet')   {  let href = links[i].getAttribute('href').split('?')[0];  let newHref = href   '?version='   new Date().getMilliseconds();  links[i].setAttribute('href', newHref);  }  }  //location.reload()  }   const adjustScreenSize = function(num) // 'num' is the scale to adjust to  {  var body = document.getElementsByTagName("body")[0]  var html = document.getElementsByTagName("html")[0]  if (num =gt; 0.5 amp;amp; num lt;= 2.5)  {  html.style.display = "none"  body.style.width = "" (224*num) "px"  body.style.height = "" (292*num) "px"  html.style.width = "" (224*num) "px"  html.style.height = "" (292*num) "px"    localStorage.scale = num  scale = num  //html.style.transform = ('scale('   scale   ')')  refreshCSS()  html.style.display = "block"  }  }  

HTML:

 lt;!DOCTYPE htmlgt; lt;htmlgt;  lt;headgt;  lt;meta charset="utf-8"gt;  lt;meta name="viewport" content="width=168, height=219, initial-scale=1.0" id="dimensions"gt;  lt;link rel="stylesheet" type="text/css" href="style.css"/gt;  lt;titlegt;Chrome-Extensionlt;/titlegt;  lt;/headgt;  lt;body class="body"gt;  lt;canvas id="canvas" width="224px" height="292px"gt;lt;/canvasgt;  lt;button id="plus"gt; lt;/buttongt;  lt;button id="minus"gt;-lt;/buttongt;  lt;script src="script.js"gt;lt;/scriptgt;  lt;/bodygt; lt;/htmlgt;  

CSS:

 html, body {  display: block;  justify-content: center;  align-content: center;  min-width: 112px;  min-height: 146px;  max-width: 560px;  max-height: 730px;  width: 224px;  height: 292px; }  canvas {  width: 224px;  height: 292px;  position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%, -50%);  z-index: -1; /* Make it appear beneath everything */ }  #plus button {  /* Position doesn't matter, just that it works */  position: absolute;   width: 20px;  height: 20px;  top: 25%;  background-color: rgb(128, 128, 0);  font-size: 20px; }  #minus button {  /* Position doesn't matter, just that it works */  position: absolute;  width: 20px;  height: 20px;  top: 75%;  background-color: rgb(128, 128, 0);  font-size: 20px; }  

Not sure if needed, but this is the manifest file:

 {  "manifest_version" : 2,  "name" : "Help",  "version" : "1789.4",  "description" : "Stackoverflow help request",  "icons" : {  "128" : "images/Icon.png",  "48" : "images/Icon.png",  "16" : "images/Icon.png"  },  "browser_action" : {  "default_icon" : "images/Icon.png",  "default_popup" : "index.html"  },  "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'" }  

Да, вы можете это сделать, но есть несколько проблем с оригинальными js и CSS. Никаких изменений в манифесте.json или index.html. Вот рабочий пример с изменениями для достижения такого поведения.

style.css

Обратите html,body внимание, и canvas я удалил все ссылки на ширину/высоту, так как они будут установлены и изменены программно. Кроме того, возникла проблема с селекторами кнопок, поэтому я их исправил. Я добавил красный фон на холст, чтобы включить отладку изменения его размера.

 html, body {  display: flex;  justify-content: center;  align-content: center; }  canvas {  background: red;  position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%, -50%);  z-index: -1; /* Make it appear beneath everything */ }  #plus {  /* Position doesn't matter, just that it works */  position: absolute;  width: 20px;  height: 20px;  top: 25%;  background-color: rgb(128, 128, 0);  font-size: 20px; }  #minus {  /* Position doesn't matter, just that it works */  position: absolute;  width: 20px;  height: 20px;  top: 75%;  background-color: rgb(128, 128, 0);  font-size: 20px; }  

script.js

Я изменил здесь довольно много вещей, поэтому вместо того, чтобы объяснять, что изменилось, я расскажу вам об этом примере, чтобы объяснить, как это работает.

 // window zoom parameters const minSize = 0.5, maxSize = 2.5, step = 0.1;  // initial window size, at 100% const baselineWidthPx = 224, baselineHeightPx = 292;  // start at zoom = 100 % let scale = 1;  // DOM selectors const minusButton = document.getElementById('minus'); const plusButton = document.getElementById('plus'); const canvasElement = document.getElementById('canvas');  /**  * helper method to resize some DOM element  */ const applySize = (elem, width, height) =gt; {  elem.style.width = `${width}px`;  elem.style.height = `${height}px`; }  /**  * New implementation for adjusting screen size  */ const adjustScreenSize = function (change) {   // clamp the next window size between min and max size  const newScale = Math.max(Math.min(scale   change, maxSize), minSize);   // if window size should be changed, apply the change  if (newScale !== scale) {  const width = Math.round(baselineWidthPx * newScale);  const height = Math.round(baselineHeightPx * newScale);   // apply the change  applySize(document.body, width, height);  applySize(canvasElement, width, height);   // update the scale locally and persist in storage  localStorage.scale = newScale;  scale = newScale;  } }  // register click event handlers minusButton.addEventListener('click', () =gt; adjustScreenSize(-step)); plusButton.addEventListener('click', () =gt; adjustScreenSize( step));  // initialize size of body and canvas // should change to use value from localStorage if exist applySize(document.body, baselineWidthPx, baselineHeightPx); applySize(canvasElement, baselineWidthPx, baselineHeightPx);  

Первая часть сценария определяет некоторые настраиваемые параметры: минимальный/максимальный размер экрана, начальный размер и масштаб и т.д.

Обратите внимание, что реализация adjustScreenSize была изменена, чтобы выполнить следующее: вычислите новый размер экрана, где значение зажато между минимальным и максимальным размером. Если размер должен измениться, то изменение применяется к тегу тела и холсту (нет необходимости настраивать lt;html/gt; узел). Для этого необходимо было удалить значения css min-width/max-width/min-height/max-height для этих узлов. Я рекомендую вообще не устанавливать их в CSS, так как отладка становится сложной.

В последней части скрипта регистрируются обработчики щелчков для кнопок и устанавливается начальный размер всплывающего окна. Я вижу, что цель состоит в том, чтобы использовать localstorage для сохранения этих настроек, поэтому отрегулируйте инициализацию, чтобы использовать значение оттуда, если оно существует.

Обратите внимание, что существует максимально допустимый размер всплывающего окна расширения. Кажется, что он немного переполнен этими параметрами (0,5 — 2,5); я бы перепроверил это.