Use different icon for dev vs prod chrome extension - google-chrome-extension

Question

I have a chrome extension, and I'd like to use a different icon for my dev version since right now both my dev and prod versions have the same icon so it can be confusing to tell which is which when they're both in my chrome extensions bar since only the icons show up there.
Is there a way in the extension manifest.json to specify different icons based on dev vs prod, or is there a way to use an entirely different manifest.json itself for dev vs prod?

Answer 1

That's not possible, the manifest.json has a fixed format. What I do right now is solving this issue through a build script, e.g. with 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": "$1 (dev-channel)"'))
.pipe(replace(/"(default_icon|16|48|128)": "([^_]*)([^"]*)"/g, '"$1": "$2-dev$3"'))
.pipe(gulp.dest('build-dev/'))
}))
The result looks looks like this:
...
"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",
...
},
...