Skip to main content

转换图标尺寸

转换图标尺寸​

假设你的原始图标文件名为 icon.png，你可以使用以下命令将其转换为 16x16、48x48 和 128x128 尺寸的图标。

示例​

假设你的项目结构如下：

passkeys-extension/
│
├── icons/
│   └── （空文件夹）
│
├── icon.png
├── background.js
├── manifest.json
├── popup.html
├── popup.js
└── styles.css

你可以在项目根目录运行以下命令：

# 创建 icons 文件夹
mkdir -p icons

# 转换图标尺寸
npx sharp-cli -i icon.png -o icons/icon16.png resize 16 16
npx sharp-cli -i icon.png -o icons/icon48.png resize 48 48
npx sharp-cli -i icon.png -o icons/icon128.png resize 128 128
npx sharp-cli -i icon.png -o icons/icon128.png --quality 50

更新 manifest.json​

确保你的 manifest.json 文件中包含对图标的引用，如下所示：

{
  "manifest_version": 3,
  "name": "Passkeys Extension",
  "version": "1.0",
  "description": "A Chrome extension to test Passkeys functionality",
  "permissions": ["activeTab"],
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icons/icon16.png",
      "48": "icons/icon48.png",
      "128": "icons/icon128.png"
    }
  },
  "icons": {
    "16": "icons/icon16.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  }
}

这样，你就可以使用 sharp 命令行工具在命令行中快速生成不同尺寸的图标，并在浏览器扩展中使用。希望这能帮到你！如果你还有其他问题，请随时告诉我。

https://gist.github.com/rex-zsd/23a54c70bdd7147cbd4964c72b6bb41d

alt text

pngquant​

https://pngquant.org/

# 安装
brew install pngquant
brew install parallel

# 每次处理1个文件
find ./ -type f -name '*.png' -exec pngquant --quality=0-20 --ext .png --force 128 {} \;

# 10个线程，每个每次处理4个


time (
  OPTIONS="--ext .png --force 128"
  export OPTIONS
  find ./ -type d -name 'node_modules' -prune -o -type f -name '*.png' -print0 | xargs -0 -n 1 -P 20 sh -c 'pngquant $OPTIONS -- "$@"' _
)



time (
  find ./ -type d -name 'node_modules' -prune -o -type f -name '*.png' | parallel  -j 20  'pngquant --ext .png --force {}'
)


alias​

# add alias to .zshrc
alias zpng="find . -type d -name 'node_modules' -prune -o -type f -name '*.png' -print | parallel -j 20 'pngquant --ext .png --force {}'"
# use zpng