如何在單擊按鈕時調整 chrome 彈出擴展的大小以使其變大 'x'%

Question

我正在嘗試制作一個 chrome 擴展，我需要能夠使用我包含的設置來調整大小。 其中之一是 + 和 - 按鈕，用於在 50% 和 250% 之間增加和減少彈出窗口大小（和畫布）。 我嘗試調整主體和 html 尺寸，我嘗試了變換：scale() function，然后我重新加載 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" : "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'"
}

Answer 1

是的，您可以這樣做，但是原始 js 和 CSS 存在一些問題。 manifest.json 或 index.html 無需更改。 這是一個工作示例，經過修改以實現此行為。

樣式.css

注意html,body和canvas我已經刪除了所有對寬度/高度的引用，因為這些將以編程方式設置和更改。 此外，按鈕選擇器存在問題，所以我已經修復了這些問題。 我為 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;
}

腳本.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);

腳本的第一部分定義了一些可配置的選項：最小/最大屏幕尺寸、初始尺寸和縮放等。

請注意， adjustScreenSize的實現已更改為執行以下操作：計算新的屏幕尺寸，其中值被限制在最小和最大尺寸之間。 如果大小應該改變，那么改變應用到body標簽和canvas（不需要調整<html/>節點）。 為此，必須刪除這些節點的最小寬度/最大寬度/最小高度/最大高度的 css 值。 我建議不要在 CSS 中設置這些，因為調試起來很棘手。

腳本的最后一部分為按鈕注冊點擊處理程序並設置彈出窗口的初始大小。 我看到意圖是使用 localstorage 來保存這些設置，因此調整初始化以使用那里的值（如果存在）。

請注意，擴展彈出窗口的最大允許大小。 這些參數（0.5 - 2.5）似乎有點溢出； 我會仔細檢查它。

如何在單擊按鈕時調整 chrome 彈出擴展的大小以使其變大 'x'%

問題描述

1 個解決方案

解決方案1
0 2021-12-02 23:38:58

如何在單擊按鈕時調整 chrome 彈出擴展的大小以使其變大 'x'%

問題描述

1 個解決方案

解決方案1 0 2021-12-02 23:38:58

解決方案1
0 2021-12-02 23:38:58