Changed how the artwork gets sent to the API, this is done by sending it separately, so now we have 2 endpoints, its not the best but, it works for now :)

content.js

@@ -1,7 +1,9 @@
 let pauseStartTime = null;
 let endpoint = null;
+let artworkEndpoint = null;
 let token = null;
 let intervalId = null;
+let lastSentArtworkKey = null;
 
 async function imageUrlToBase64(url) {
 	try {
@@ -72,6 +74,7 @@ async function getNowPlayingData() {
 
 	const currentTime = timestampInput ? Number(timestampInput.getAttribute('aria-valuenow')) : media.currentTime;
 	const duration = timestampInput ? Number(timestampInput.getAttribute('aria-valuemax')) : media.duration;
+	const commonData={details:title,state:artist,album,smallImageKey:'play',smallImageText:'Playing',startTimestamp:Math.floor(Date.now()/1000)-Math.floor(currentTime),endTimestamp:Math.floor(Date.now()/1000)+Math.floor(duration-currentTime),paused,currentTime,duration};
 
 	if (paused) {
 		if (!pauseStartTime) pauseStartTime = Date.now();
@@ -81,37 +84,12 @@ async function getNowPlayingData() {
 				state: "",
 				paused: true
 			};
-		} else {
-			return {
-				details: title,
-				state: artist,
-				album,
-				smallImageKey: 'play',
-				smallImageText: 'Playing',
-				artworkBase64,
-				startTimestamp: Math.floor(Date.now() / 1000) - Math.floor(currentTime),
-				endTimestamp: Math.floor(Date.now() / 1000) + Math.floor(duration - currentTime),
-				paused: true,
-				currentTime,
-				duration
-			};
 		}
-	} else {
-		pauseStartTime = null;
 	}
 
 	return {
-		details: title,
-		state: artist,
-		album,
-		smallImageKey: 'play',
-		smallImageText: 'Playing',
-		artworkBase64,
-		startTimestamp: Math.floor(Date.now() / 1000) - Math.floor(currentTime),
-		endTimestamp: Math.floor(Date.now() / 1000) + Math.floor(duration - currentTime),
-		paused: false,
-		currentTime,
-		duration
+		...commonData,
+		artworkBase64
 	};
 }
 
@@ -122,23 +100,54 @@ async function sendNowPlaying() {
 	}
 
 	const data = await getNowPlayingData();
+	if (!data) return;
+
+	const { artworkBase64, details, state, ...noArtData } = data;
+
 
 	try {
-		const response = await fetch(endpoint, {
+		await fetch(endpoint, {
 			method: 'POST',
 			headers: {
 				'Content-Type': 'application/json',
 				'Authorization': `Bearer ${token}`
 			},
-			body: JSON.stringify(data),
+			body: JSON.stringify({
+				...noArtData,
+				details,
+				state
+			})
 		});
-		if (response.ok) {
-			console.log('Now playing data sent:', data.details, '-', data.state);
-		} else {
-			console.error('Failed to send now playing data:', response.status);
-		}
+		console.log('Now playing data sent:', details, '-', state);
 	} catch (e) {
-		console.error('Error sending now playing data:', e);
+		console.error('Failed to send now playing:', e);
+	}
+
+	// Only send artwork when song changes
+	const currentTrackKey = `${details} - ${state}`;
+	if (
+		artworkEndpoint &&
+		artworkBase64 &&
+		currentTrackKey !== lastSentArtworkKey
+	) {
+		try {
+			await fetch(artworkEndpoint, {
+				method: 'POST',
+				headers: {
+					'Content-Type': 'application/json',
+					'Authorization': `Bearer ${token}`
+				},
+				body: JSON.stringify({
+					image: artworkBase64,
+					details,
+					state
+				})
+			});
+			lastSentArtworkKey = currentTrackKey;
+			console.log('Artwork sent for:', currentTrackKey);
+		} catch (e) {
+			console.error('Failed to send artwork:', e);
+		}
 	}
 }
 
@@ -169,13 +178,14 @@ if (!window._nowPlayingExtensionLogged) {
 }
 
 if (typeof chrome !== "undefined" && chrome.storage && chrome.storage.sync) {
-	chrome.storage.sync.get(['endpoint', 'token'], (result) => {
+	chrome.storage.sync.get(['endpoint', 'artworkEndpoint', 'token'], (result) => {
 		if (chrome.runtime.lastError) {
 			console.error("Failed to load settings:", chrome.runtime.lastError.message);
 			return;
 		}
 
 		endpoint = result.endpoint;
+		artworkEndpoint = result.artworkEndpoint;
 		token = result.token;
 
 		if (!endpoint || !token) {

manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 3,
   "name": "Apple Music Now Playing",
-  "version": "1.3.1",
+  "version": "1.4.0",
   "description": "Easily display your currently playing Apple Music track on your website with this extension.",
   "permissions": [
     "storage",

options.html

@@ -88,8 +88,10 @@
 <body>
   <div class="container">
     <h1><span title="Apple Music Now Playing">AmNP</span> Settings (Beta)</h1>
-    <label for="endpoint">POST Endpoint:</label>
+    <label for="endpoint">Now playing Endpoint:</label>
     <input type="text" id="endpoint" placeholder="https://zorpzeep.blorp/wp-json/nowplaying/v1/update" autocomplete="off" spellcheck="false"/>
+    <label for="artworkEndpoint">Artwork Endpoint:</label>
+    <input type="text" id="artworkEndpoint" placeholder="https://zorpzeep.blorp/wp-json/nowplaying/v1/update/art" autocomplete="off" spellcheck="false"/>
     <label for="token">Bearer Token:</label>
     <input type="text" id="token" placeholder="73757065725f7365637572655f746f6b656e" autocomplete="off" spellcheck="false"/>
     <button id="save">Save</button>

options.js

@@ -1,14 +1,16 @@
 /* global chrome */
 document.addEventListener('DOMContentLoaded', () => {
-  chrome.storage.sync.get(['endpoint', 'token'], (data) => {
+  chrome.storage.sync.get(['endpoint', 'token', 'artworkEndpoint'], (data) => {
     document.getElementById('endpoint').value = data.endpoint || '';
     document.getElementById('token').value = data.token || '';
+    document.getElementById('artworkEndpoint').value = data.artworkEndpoint || '';
   });
 
   document.getElementById('save').addEventListener('click', () => {
     const endpoint = document.getElementById('endpoint').value;
     const token = document.getElementById('token').value;
-    chrome.storage.sync.set({ endpoint, token }, () => {
+    const artworkEndpoint = document.getElementById('artworkEndpoint').value;
+    chrome.storage.sync.set({ endpoint, token, artworkEndpoint }, () => {
       alert('Settings saved.');
     });
   });