Finish prototype for Spotify API, test implementation of notifications

src/extension/typescript/background.ts

@@ -1,4 +1,24 @@
-function onRuntimeMessage(message: any) {}
+import type { Track, Artist } from "./modules/SpotifyAPI";
+
+function onRuntimeMessage(message: Track) {
+  const artist = message.artist;
+
+  console.log(message.coverArt);
+
+  browser.notifications
+    .create({
+      title: message.title,
+      message: message.artist.name,
+      iconUrl: message.coverArt,
+      type: "basic",
+    })
+    .then(() => {
+      console.log("OK");
+    })
+    .catch((err) => {
+      console.error(err);
+    });
+}
 
 browser.runtime.onMessage.addListener(onRuntimeMessage);
 

src/extension/typescript/content.ts

@@ -4,4 +4,7 @@ const API = new SpotifyAPI();
 
 // use the API
 
-API.getCurrentTrack();
+const data = API.getCurrentTrack();
+
+browser.runtime.sendMessage(data);
+

src/extension/typescript/modules/SpotifyAPI.ts

@@ -6,20 +6,14 @@ export type Artist = {
 };
 
 export type Track = {
-  track: {
-    title: string;
-    URL: string;
-    coverArt: string;
+  title: string;
+  URL: string;
+  coverArt: string;
 
-    artist: Artist | Artist[];
-  };
-
-  playing: boolean;
+  artist: Artist;
 };
 
-export type Playstate = {
-  track: Track;
-
+export type PlayState = {
   isPlaying: boolean;
 };
 
@@ -36,27 +30,47 @@ export default class SpotifyAPI {
    * @example `/album/` -> `https://open.spotify.com/album/`
    */
   private generateFullURL(relativeURL: string) {
-    return `${window.location.host}${relativeURL}`;
+    return `${window.location.protocol}//${window.location.host}${relativeURL}`;
   }
 
-  getCurrentTrack() {
+  getCurrentTrack(): Track {
     const titleElement = this.scraper.getBarElement("title")!;
     const trackURL = `${titleElement.getAttribute("href")}`;
 
     const artistElement = this.scraper.getBarElement("artist")!;
-    const artistName = artistElement.textContent;
-    const artistURL = artistElement.getAttribute("href");
+    const artistName = artistElement.textContent!;
+    const artistURL = artistElement.getAttribute("href")!;
 
-    // console.log(trackElement.textContent);
+    const coverArtImage = this.scraper
+      .getBarElement("coverArtImage")!
+      .getAttribute("src")!;
 
-    console.log(
-      `Now playing: ${
-        titleElement.textContent
-      } by ${artistName} (${this.generateFullURL(trackURL)})`
-    );
+    return {
+      title: titleElement.textContent!,
+      URL: this.generateFullURL(trackURL),
+
+      coverArt: coverArtImage,
+
+      artist: {
+        name: artistName,
+        URL: this.generateFullURL(artistURL),
+      },
+    };
   }
 
-  getPlaystate() {}
+  getPlaystate() {
+    const playbackControlButton = this.scraper.getBarElement(
+      "playbackControlButton"
+    )!;
+
+    /* The button's aria-label attribute contains the action that it will perform once clicked
+    not its current playstate */
+    return playbackControlButton.getAttribute("aria-label") === "Play"
+      ? false
+      : true;
+  }
+
+  getPlayback() {}
 
   // TODO: Implement events: onPlay, onPause (?), trackChanged, playstateChanged