对开发和生产 chrome 扩展使用不同的图标

Question

我有一个 chrome 扩展，我想为我的开发版本使用不同的图标，因为现在我的开发版本和生产版本都有相同的图标，所以很难区分哪个这是当它们都在我的 chrome 扩展栏中时，因为只有图标显示在那里。

在扩展 manifest.json 中有没有办法根据开发与生产指定不同的图标，或者有没有办法为开发与生产使用完全不同的 manifest.json 本身？

Answer 1

这不可能，manifest.json 有一个 fixed format。我现在所做的是通过构建脚本解决这个问题，例如gulp:

const replace = require('gulp-replace')
const clean = require('gulp-clean')

gulp.task('dev:copy', function () {
  return gulp.src('build/**').pipe(gulp.dest('build-dev/'))
})

// Below the manifest is loaded and the name is replaced as well as the icon is replaced with "icon-dev"
gulp.task('dev:manifest', series('dev:copy', function () {
  return gulp.src('build-dev/manifest.json')
    .pipe(clean())
    .pipe(replace(/"name": "([^"]*)"/g, '"name": " (dev-channel)"'))
    .pipe(replace(/"(default_icon|16|48|128)": "([^_]*)([^"]*)"/g, '"": "-dev"'))
    .pipe(gulp.dest('build-dev/'))
}))

结果看起来像这样：

...
  "icons": {
    "16": "icons/icon-dev_16.png",
    "48": "icons/icon-dev_48.png",
    "128": "icons/icon-dev_128.png"
  },
  "browser_action": {
    "default_icon": "icons/icon-dev_16.png",
    ...
  },
...

对开发和生产 chrome 扩展使用不同的图标

Use different icon for dev vs prod chrome extension

google-chrome-extension