如何在单击按钮时调整 chrome 弹出扩展扩展 'x'%

Question

我正在尝试制作一个 chrome 扩展，我需要能够使用我包含的设置调整大小。其中之一是 + 和 - 按钮，用于在 50% 和 250% 之间增加和减少弹出窗口大小（和 canvas）。我尝试调整主体和 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 < 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 => 0.5 && num <= 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:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=168, height=219, initial-scale=1.0" id="dimensions">
   <link rel="stylesheet" type="text/css" href="style.css"/>
    <title>Chrome-Extension</title>
  </head>
  <body class="body">
    <canvas id="canvas" width="224px" height="292px"></canvas>
    <button id="plus">+</button>
    <button id="minus">-</button>
    <script src="script.js"></script>
  </body>
</html>

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;
}

不确定是否需要，但这是清单文件：

{
    "manifest_version" : 2,
    "name" : "Help",
    "version" : "1789.4",
    "description" : "Whosebug 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'"
}

Answer 1

是的，您可以这样做，但是原始 js 和 CSS 存在一些问题。 manifest.json 或 index.html 无需更改。这是一个工作示例，经过修改以实现此行为。

style.css

注意 html,body 和 canvas 我已经删除了所有对 width/height 的引用，因为这些将以编程方式设置和更改。此外，按钮选择器存在问题，因此我已经修复了这些问题。我向 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) => {
    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', () => adjustScreenSize(-step));
plusButton.addEventListener('click', () => 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);

脚本的第一部分定义了一些可配置的选项：min/max屏幕大小、初始大小和比例等

请注意，adjustScreenSize 的实现已更改为执行以下操作：计算新的屏幕尺寸，其中该值被限制在最小和最大尺寸之间。如果大小应该改变，那么改变会应用到 body 标签和 canvas（没有必要调整 <html/> 节点）。为此，必须删除这些节点的 min-width/max-width/min-height/max-height 的 css 值。我建议根本不要在 CSS 中设置这些，因为调试起来会很棘手。

脚本的最后一部分为按钮注册点击处理程序并设置弹出窗口的初始大小。我看到意图是使用 localstorage 来保留这些设置，因此调整初始化以使用那里的值（如果存在）。

请注意，扩展弹出窗口有最大允许大小。这些参数 (0.5 - 2.5) 似乎有点溢出；我会仔细检查它。

如何在单击按钮时调整 chrome 弹出扩展扩展 'x'%

How to resize chrome popup extension on button click to make it larger by 'x'%

javascript

html

css

canvas

google-chrome-extension