Customize Brave Browser Backgrounds

If you ever tried to change the backgrounds/wallpapers of Brave then you probably discovered that you can only have: a gradient, brave's preselected wallpapers, brave's preselected + brave ads wallpapers. No way to have your own.

Here is a dirty little hack to make it possible in a not-too-inconvenient way

What is the trick?

Brave hides its wallpapers in a directory with a random name and reads a photo.json file to learn which wallpapers it has to show and in which order.

Method one: Open Brave's wallpaper folder and open the photo.json file in pluma
The following script will do that for you:

#!/bin/bash

## first find the directory where the background pictures are:
# dig into every directory that contain a manifest.json file ...

find $HOME/.config -name "manifest.json" | while read manifest
do
	# ... and evaluate the manifest.json file in that directory
	if grep "Brave NTP background images component" "$manifest" &>/dev/null
	then
		# so now that we have found the right directory ...
		index="${manifest/manifest.json/photo.json}"
		picdir="${manifest%/*}"

		# ... backup the original photo.json file (if needed) ...
		 cp -n "${index}" "${index}.original"

		# ... make json file better readable if it isn't already ...
		[ $(wc -l <"${index}") -lt 3 ] && sed -i "s|,|,\n|g" "${index}"

		# ... open filemanager in this directory (will behave as backgrounded)...
		caja "${picdir}"

		# ... while also editing the json file
		pluma "${index}"

		# Closing the editor will also close this script
		exit
	fi
done

You can now drop your own wallpapers in the folder and change the photo.json file

Method two: The "Whatever...yeah, just get it over with" way

  1. open the folder (by running the first script or just open it directly with caja)
  2. delete everything from this folder you don't want (or move it to a backup folder)
    except the two manifest files (<-very very important)
    (in other words: keep these -> manifest.fingerprint , manifest.json)
  3. copy one or more wallpapers, that you would like to see in brave, into this folder
  4. run following script

#!/bin/bash

shopt -s nullglob

WriteRecord()
{
	author=${1%%_*}
	cat<<RECORD
		"name":"unused",
		"source":"${1}",
		"author":"${author//-/ }",
		"link":"https://community.brave.com/",
		"originalUrl":"unused",
		"license":"unused"
RECORD
}
## first find the directory where the background pictures are:
# dig into every directory that contain a manifest.json file ...
find $HOME/.config -name "manifest.json" | while read manifest
do
	# ... and evaluate the manifest.json file in that directory
	if grep "Brave NTP background images component" "$manifest" &>/dev/null
	then
		# so now that we have found the right directory ...
		index="${manifest/manifest.json/photo.json}"
		picdir="${manifest%/*}"
		# ... generate the photo.json file
		{
			echo -e '{"schemaVersion":1,\n\t"images":[{'
			for picname in "${picdir}/"*{webp,png,jpg,jpeg,avif}
			do
				[ $x ] && echo -e '\t},{' || x=set
				WriteRecord "${picname##*/}"
			done
			echo -e '\t}\n]}'
		} >"${index}"
		exit
	fi
done
  1. That's it ! :slight_smile:

FYI: This script will generate the photo.json file that is used by Brave.
It will make entries for all webp, png, jpg, jpeg and avif files

P.S. This is the first result of some experiments,
I'll probably will refine / improve this post (and scripts) after a prolonged time of daily use

1 Like

The Easy-To-Use Bash-Menu Version

BraveBackgroundMenu

#!/bin/bash

[ -t 1 ] || exit
shopt -s nullglob
declare -u choice
B=$(tput bold)			#Bold
G=$(tput setaf 2)${B}	#Green+bold
N=$(tput sgr0)			#reset to Normal
title="${B}BRAVE BROWSER BACKGROUND BUTLER${N}"
status="$title"
WriteRecord()
{
	author=${1%%_*}
	cat<<RECORD
		"name":"unused",
		"source":"${1}",
		"author":"${author//-/ }",
		"link":"https://community.brave.com/",
		"originalUrl":"unused",
		"license":"unused"
RECORD
}
Generate()
{
	unset x
	echo -e '{"schemaVersion":1,\n\t"images":[{'
	for picname in "${picdir}/"*{webp,png,jpg,jpeg,avif}
	do
		[ $x ] && echo -e '\t},{' || x=set
		WriteRecord  "${picname##*/}"
	done
	echo -e '\t}\n]}'
}
Menu()
{
	while :
	do
		clear
		cat<<-MENU
		$status

		[${B}O${N}]pen Wallpaper Directory
		[${B}E${N}]dit index (Photo.json)
		[${B}G${N}]enerate index (Photo.json)

		[${B}Q${N}]uit
	MENU
		read -s -n1 choice ; status="$title"
		case "$choice" in
		O) caja "$picdir"		; status="${G}Caja launched${N}"		;;
		E) pluma "$index"		& status="${G}Pluma launched${N}"		;;
		G) Generate >"$index"	; status="${G}Photo.json generated${N}"	;;
		Q) exit					;;
		esac
	done
}
exec 3< <( find $HOME/.config -name "manifest.json" )
while read -u3 manifest
do
	if grep "Brave NTP background images component" "$manifest" &>/dev/null
	then
		index="${manifest/manifest.json/photo.json}"
		picdir="${manifest%/*}"
		cp -n "${index}" "${index}.original"
		[ $(wc -l <"${index}") -lt 3 ] && sed -i "s|,|,\n|g" "${index}"
		Menu
	fi
done

P.S. this posted code will be updated for minor optimizations.

2 Likes

I use the following procedure

Open the Brave Browser
Right Click background
Select Brave > Manage Custom Filters
Select New Tab page
Click Customise the background and widgets that appear on the tab page
Click an Image
Select Upload from device
Navigate to your desired image

NB *.jpeg, *.jpg, *.png formats only.

1 Like

Welcome @Hacknslash to the community!