extensions/media-helper/script.js

// script.js

import { Element } from './element.js';

const scrapeIMDbData = () => {
	const title = document.querySelector('h1').innerText.trim();
	const directorElement = document.querySelector('a[href^="/name/"]');
	const director = directorElement ? directorElement.innerText.trim() : null;
	const yearElement = document.querySelectorAll('a[href*="/releaseinfo"]')[0];
	const year = yearElement ? yearElement.innerText.trim() : null;
	const coverImageElement = document.querySelectorAll('img.ipc-image')[0];
	const coverImageUrl = coverImageElement ? coverImageElement.src : null;
	return {
		'title': title,
		'author': director,
		'year': year,
		'image_src': coverImageUrl,
		'type': 'movie'
	};
}

const scrapeGoodReads = () => {
	const title = document.querySelector('h1').innerText.trim();
	const author = document.querySelector('span.ContributorLink__name').innerText.trim();
	const yearElement = document.querySelector('p[data-testid="publicationInfo"]');
	const year = yearElement ? yearElement.innerText.trim().split(', ')[1] : null;
	const coverImageElement = document.querySelector('.BookCover img');
	const coverImageUrl = coverImageElement ? coverImageElement.src : null;
	return {
		'title': title,
		'author': author,
		'year': year,
		'image_src': coverImageUrl,
		'type': 'book'
	};
}

const scrapeRymData = () => {
	const title = document.querySelector('.album_title').innerText.trim();
	const author = document.querySelector('a.artist').innerText.trim();
	const yearElement = document.querySelector('a[href^="/charts/top/"]');
	const year = yearElement ? yearElement.innerText.trim() : null;
	const coverImageElement = document.querySelector('div[class^="coverart_"] > img');
	const coverImageUrl = coverImageElement ? coverImageElement.src : null;
	const spotifyElement = document.querySelector('a[title="Spotify"]');
	const spotifyUrl = spotifyElement ? spotifyElement.href : null;
	return {
		'title': title,
		'author': author,
		'year': year,
		'image_src': coverImageUrl,
		'spotify_url': spotifyUrl,
		'type': 'album'
	};
}



const medias = [
	{'name': 'movie', 'urlPattern': /https:\/\/www.imdb.com\/title\/.*\/?/, 'scrapeFunction': scrapeIMDbData},
	{'name': 'book', 'urlPattern': /https:\/\/www.goodreads.com\/book\/show\/.*/, 'scrapeFunction': scrapeGoodReads},
	{'name': 'album', 'urlPattern': /https:\/\/rateyourmusic.com\/release\/.*/, 'scrapeFunction': scrapeRymData}
]

const body = new Element(document.body)
	.addClass(
		'bg-slate-900',
		'text-slate-500',
		'flex',
		'flex-col',
		'items-center',
		'justify-center',
		'w-screen',
		'h-screen',
	);

chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
	const tab = tabs[0];
	const url = tab.url
	console.log('URL:', url);
	for (let i = 0; i < medias.length; i++) {
		const media = medias[i];
		if (url.match(media.urlPattern)) {
			chrome.scripting.executeScript({
				target: { tabId: tab.id },
				function: media.scrapeFunction
			}, (results) => {
				const data = results[0].result;
				console.log({data});

				const row = new Element('div')  // {{{
					.appendTo(body)
					.addClass(
						'flex',
						'flex-row',
						'justify-between',
						'w-full',
					)

				const image = new Element('img')  // {{{
					.addClass(
						'h-32',
						'w-auto',
						'p-2',
						'object-contain',
					)
					.setAttribute('src', data.image_src)
					.appendTo(row);

				// }}}

				const col = new Element('div')  // {{{
					.appendTo(row)
					.addClass(
						'flex',
						'flex-col',
						'justify-center',
						'items-center',
						'p-2',
						'gap-1',
						'text-center'

					)

				// }}}

				const title = new Element('input')  // {{{
					.setAttribute('type', 'text')
					.setAttribute('value', data.title)
					.setId('title')
					.addClass(
						'text-slate-200',
						'font-bold',
						'bg-slate-900',
						'text-center',

					)
					.setText(data.title)
					.appendTo(col);

				// }}}

				const author = new Element('input')  // {{{
					.addClass(
						'bg-slate-900',
						'text-center',
					)
					.setAttribute('type', 'text')
					.setAttribute('value', data.author)
					.setId('author')
					.setText(data.author)
					.appendTo(col);

				// }}}

				const year = new Element('input')  // {{{
					.addClass(
						'bg-slate-900',
						'text-center',
					)
					.setAttribute('type', 'text')
					.setAttribute('value', data.year)
					.setId('year')
					.setText(data.year)
					.appendTo(col);

				// }}}
				
				if (media.name === 'movie') {
					const typeDiv = new Element('div')
						.addClass(
							'flex',
							'flex-row',
							'justify-center',
							'gap-2',
						)
						.appendTo(col);
					const tvRadio = new Element('input')
						.setAttribute('type', 'radio')
						.setAttribute('name', 'type')
						.setAttribute('value', 'tv')
						.appendTo(typeDiv);
					const tvLabel = new Element('label')
						.setText('TV')
						.appendTo(typeDiv);
					const movieRadio = new Element('input')
						.setAttribute('type', 'radio')
						.setAttribute('name', 'type')
						.setAttribute('value', 'movie')
						.setAttribute('checked', 'checked')
						.appendTo(typeDiv);
					const movieLabel = new Element('label')
						.setText('Movie')
						.appendTo(typeDiv);
				}

				const saveButton = new Element('span')  // {{{
					.addClass(
						'text-slate-900',
						'rounded',
						'px-2',
						'bg-slate-500',
					)
					.setText('Checking...')
					.appendTo(col);

				// }}}

				chrome.runtime.sendMessage({ action: 'checkMedia', data, url: url}, (response) => {
					if (response.success) {
						if (response.responseData.exists) {
							saveButton
								.setText('Saved!')
								.addClass('bg-green-600')
								.removeClass(
									'hover:bg-slate-400',
									'bg-slate-500',
									'cursor-pointer',
								);
						} else {
							saveButton
								.setText('Save')
								.addClass(
									'bg-slate-500',
									'hover:bg-slate-400',
									'cursor-pointer',
								)
								.addEventListener('click', () => {
									const messageData = {
										'title': title.element.value,
										'author': author.element.value,
										'year': year.element.value,
										'image_src': data.image_src,
										'type': data.type,
									};
									if (media.name === 'movie') {
										messageData.type = document.querySelector('input[name="type"]:checked').value;
										if (messageData.type === 'tv') {
											messageData.author = null;
										}
									}
									if (media.name === 'album') {
										if (data.spotify_url) {
											messageData.spotify_url = data.spotify_url;
										}
									}
									console.log({messageData});
									chrome.runtime.sendMessage({ action: 'saveMedia', data: messageData, url: url}, (response) => {
										console.log('Background response:', response);
										if (response.success) {
											saveButton.setText('Saved!').
												addClass('bg-green-600').
												removeClass(
													'hover:bg-slate-400',
													'bg-slate-500',
													'cursor-pointer',
												);
										} else {
											saveButton.setText('Error!').
												addClass('bg-red-500').
												removeClass(
													'hover:bg-slate-400',
													'bg-slate-500',
													'cursor-pointer',
												);
										}
									});
								})
						}
					} else {
						saveButton.setText('Error!').addClass('bg-red-500').removeClass('hover:bg-slate-400');
					}
				});
			});
			return;
		}
	}
	console.log('No match');
	new Element('div')
		.appendTo(body)
		.addClass(
			'flex',
			'flex-row',
			'justify-center',
			'w-full',
		)
		.appendChild(
			new Element('span')
				.setText('No match')
		);

});