Quick & hacky script to add localStorage bookmarks + csv export to https://e3recap.com/

e3recapBookmark.js

if(window.e3recapBookmarks) console.error('Already injected!')
else {

window.e3recapBookmarks = true;

document.head.insertAdjacentHTML('beforeend', `
<style>
.card .bookmark {
	position: absolute;
	top: 5px;
	left: 5px;
	z-index: 99;
	opacity: 0;
}

.card .bookmark[bookmarked] {
  top: 0px;
  left: 0px;
}

.card:hover .bookmark, .card .bookmark[bookmarked] { opacity: 1; }

.card .bookmark i {
	font-size: 2.5rem;
	color: white;
	pointer-events: none;
}

.card .bookmark[bookmarked] i {
  background: #ffffffd4;
  color: black;
  border-radius: 0 0 50% 0;
  padding: 1px 4px 4px 1px;
}

.card.flipped .bookmark { transform: rotate(180deg); }
</style>
`)

download = function(csv) {
	el = document.createElement('a');
	el.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(csv));
	el.setAttribute('download', 'e3RecapBookmarked.csv');
	el.style.display = 'none';
	document.body.appendChild(el);
	el.click();
	document.body.removeChild(el);
  }

getGame = function(game){
	return { Title: game.title, Developer: `"${game.developer}"`, Release: game.date || 'TBA', Genre: `"${game.genre}"` || '', Link: game.media[0]?.link, Image: `https://e3recap2020.b-cdn.net/images/game-cards/${game.media[0]?.link.split('/')[game.media[0]?.link.split('/').length - 1]}.jpg` }
}

getGameFromTitle = function(title){
	return gamesList.find(game => game.title === title)
}

log = function(list, bookmarked){
	csv = Object.keys(list[0]).toString() + '\n'
	list.forEach(game => { csv += Object.values(game).toString(); csv += '\n' })

	if (bookmarked) { download(csv); console.log(`%cGot ${list.length} bookmarked games!`, 'font-size: 2rem; color: goldenrod;') }
	else console.log(`%cGot ${list.length} games!`, 'font-size: 2rem;')
	console.group('Object')
	console.log(list)
	console.groupEnd('Object')
	console.groupCollapsed('CSV')
	console.log(csv)
	console.groupEnd('CSV')
	console.group('Table')
	console.table(list)
	console.groupEnd('Table')
}

gamesList = Array.from(document.getElementsByTagName('a')).find(e => e.__vue__).__vue__.$store.getters.games
games = []
bookmarked = JSON.parse(window.localStorage.getItem('bookmarked')) || []

document.querySelector('#filters-bottom .search').insertAdjacentHTML('afterend', `<div class="exportBookmarks col-md-2 col-xs-4 clickable text-center"><i class="fas fa-bookmark" aria-hidden="true"></i><span> Export Saved (${bookmarked.length})</span></div>`)

document.querySelector('#filters-bottom .exportBookmarks').addEventListener('click', (e) => {

	bookmarkedGameInfo = []
	bookmarked.forEach(id => {
		game = gamesList.find(game => game._id === id)
		bookmarkedGameInfo.push(getGame(game))
	})

	log(bookmarkedGameInfo, true)

})

document.querySelectorAll('.card').forEach(card => {
	
	game = gamesList.find(game => game.title === card.querySelector('.title-and-dev .entry-title')?.textContent)
	
	card.insertAdjacentHTML('afterbegin', `<div class="bookmark" ${bookmarked?.includes(game._id) ? `bookmarked="" ><i class="las la-bookmark` : `><i class="las la-bookmark`}"></i></div>`)
	
	card.querySelector('.bookmark').addEventListener('click', (e) => {
		e.target.toggleAttribute('bookmarked')
		game = getGameFromTitle(card.querySelector('.title-and-dev .entry-title')?.textContent)

		if(e.target.hasAttribute('bookmarked')) {
			bookmarked.push(game._id)
		}
		else {
			bookmarked.splice(bookmarked.findIndex(id => id === game._id), 1)
		}

		window.localStorage.setItem('bookmarked', JSON.stringify(bookmarked))
		document.querySelector('#filters-bottom .exportBookmarks').innerHTML = `<i class="las la-bookmark" aria-hidden="true"></i><span> Export Saved (${bookmarked.length})</span>`
	})
	
	
})


console.log(`%cGot ${gamesList.length} games!`, 'font-size: 2rem;')

gameInfo = gamesList.map((game) => {
	return getGame(game)
})

log(gameInfo)

}

Video of script in use

2022: Updated to use Line Awesome, replacing Font Awesome