Добавлены настройки расширения, введена поддержка локализации, изменены и адаптированы иконки приложений

extension/scripts/main.js

@@ -0,0 +1,41 @@
+const updateFields = () => {
+    document.querySelectorAll('input, textarea').forEach(field => {
+        const focus = () => field.classList.add('focus')
+        if (field.value.trim() !== '') focus()
+        field.onfocus = focus
+        field.onblur = () => {
+            if (field.value === '') field.classList.remove('focus')
+        }
+    })
+}
+
+window.addEventListener('DOMContentLoaded', () => {
+    const popupTitle = document.querySelector('#popup-title')
+    const settingsForm = document.querySelector('#settings-form')
+    const serverURLField = document.querySelector('#server-url-field')
+    const serverURLFieldLabel = document.querySelector('label[for="server-url-field"]')
+    const connectButton = document.querySelector('#connect-button')
+
+    const defaultServerURL = chrome.i18n.getMessage('deafult_server_url')
+
+    popupTitle.textContent = chrome.i18n.getMessage('popup_title')
+    serverURLFieldLabel.textContent = chrome.i18n.getMessage('server_url_field_label')
+    connectButton.value = chrome.i18n.getMessage('connect_button')
+
+    chrome.storage.local.get([
+        'server_url',
+    ]).then((data) => {
+        serverURLField.placeholder = defaultServerURL
+        serverURLField.value = data.server_url || defaultServerURL
+        updateFields()
+    })
+
+    settingsForm.addEventListener('submit', (event) => {
+        event.preventDefault()
+        chrome.storage.local.set({
+            'server_url': serverURLField.value.trim() || defaultServerURL,
+        }).then(() => {
+            window.close()
+        })
+    })
+})

extension/scripts/observer.js

@@ -0,0 +1,71 @@
+const uiLocale = chrome.i18n.getMessage('@@ui_locale')
+const defaultServerURL = chrome.i18n.getMessage('default_server_url')
+
+const getURL = () => {
+    return new Promise(resolve => {
+        chrome.storage.local.get([
+            'server_url',
+        ]).then((data) => {
+            const serverURL = data.server_url || defaultServerURL
+            const url = new URL(serverURL)
+            url.pathname = '/ws/v1/server'
+            resolve(url)
+        })
+    })
+}
+
+const mutationObserverConfig = {
+    attributes: true,
+    childList: false,
+    characterData: false,
+}
+
+const connectWebSocket = async () => {
+    const url = await getURL()
+    const ws = new WebSocket(url)
+    const progressElement = document.querySelector('#progress-bar')
+    const mutationObserver = new MutationObserver(() => {
+        const promise = new Promise(resolve => {
+            const playerBarElement = document.querySelector('ytmusic-player-bar')
+            const metadataElement = playerBarElement.querySelector('.middle-controls > .content-info-wrapper')
+            const titleElement = metadataElement.querySelector(`yt-formatted-string.title`)
+            const subtitleElement = metadataElement.querySelector('span.subtitle > yt-formatted-string.byline')
+            const imageElement = playerBarElement.querySelector('img')
+            if (titleElement.textContent === '' || subtitleElement.length === 0) return
+            const data = {
+                type: 'music',
+                attributes: {
+                    locale: uiLocale,
+                    title: titleElement.textContent,
+                    artists: subtitleElement.title.split('•')[0].trim(),
+                    progress: progressElement.ariaValueNow / progressElement.ariaValueMax,
+                    image: imageElement.src,
+                },
+            }
+            ws.send(JSON.stringify(data))
+            resolve()
+        })
+        promise.then()
+    })
+
+    ws.onopen = () => mutationObserver.observe(progressElement, mutationObserverConfig)
+
+    ws.onclose = () => {
+        mutationObserver.disconnect()
+        wsPromise = connectWebSocket()
+    }
+
+    return ws
+}
+
+chrome.storage.onChanged.addListener((changes) => {
+    const settings = {}
+    for (let [key, { oldValue, newValue }] of Object.entries(changes)) {
+        settings[key] = newValue || oldValue
+    }
+    chrome.storage.local.set(settings).then(() => {
+        wsPromise.then(ws => ws.close())
+    })
+})
+
+let wsPromise = connectWebSocket()