diff --git a/extension/manifest.json b/extension/manifest.json index 5c988b6..f2cb058 100644 --- a/extension/manifest.json +++ b/extension/manifest.json @@ -1,6 +1,6 @@ { "name": "Twitch Stream Notifier", - "version": "2.1.0", + "version": "2.1.1", "manifest_version": 3, "description": "See when streamers go online!", "icons": { @@ -13,7 +13,12 @@ "background": { "service_worker": "scripts/background.js" }, - "permissions": ["notifications", "storage", "background", "alarms"], + "permissions": [ + "notifications", + "storage", + "background", + "alarms" + ], "action": { "default_icon": "images/logo_128.png", "default_title": "Twitch Stream Notifier", diff --git a/extension/popup.html b/extension/popup.html index b5c73b0..04d7db8 100644 --- a/extension/popup.html +++ b/extension/popup.html @@ -1,114 +1,103 @@ - + + - - - - - - + + + + + + - -
-
+ +
+
- -
-
+
+
-
-
-

- -

- -
    +
    +
    +

    + +

    + +
      +
      -
      -
      -
      +
      +
      -
      -
      -
      -
      - - - - +
      +
      + +
      + + + + +
      +
      - -
      -
      -
      -
      -
      - - -
      -
      -
      - - -
      -
      -
      -
      - - -
      -
      -
      - - Remove all - +
      +
      +
      + + +
      +
      +
      +
      + + +
      +
      +
      +
      + + +
      +
      + +
      + + Remove all + +
      -
      -
      - +
      + + diff --git a/extension/scripts/background.js b/extension/scripts/background.js index b72bbca..0e59327 100644 --- a/extension/scripts/background.js +++ b/extension/scripts/background.js @@ -1,154 +1,215 @@ const CHANNEL_API_URI = 'https://twitch.theorycraft.gg/channel-status'; - +const PREVIEW_IMAGE_BASE_URL = 'https://static-cdn.jtvnw.net/previews-ttv/live_user_'; +const NOTIFICATION_ICON_URL = '../images/logo_128.png'; +const BADGE_COLOR = '#5cb85c'; +const BACKGROUND_FETCH_ALARM_NAME = 'backgroundFetch'; +const FETCH_INTERVAL_MINUTES = 5; + +/** + * Generates a URL for the stream preview image. + * @param {string} userName - The username of the streamer. + * @param {number} width - Width of the preview image. + * @param {number} height - Height of the preview image. + * @returns {string} - URL of the preview image. + */ const getPreviewUrl = (userName, width, height) => - `https://static-cdn.jtvnw.net/previews-ttv/live_user_${userName}-${width}x${height}.jpg`; + `${PREVIEW_IMAGE_BASE_URL}${userName}-${width}x${height}.jpg`; +/** + * Creates and displays a Chrome notification. + * @param {Object} stream - Stream data for the notification. + */ const createNotification = async (stream) => { - const imageResponse = await fetch(getPreviewUrl(stream.username, 640, 360)); - const imageData = await imageResponse.blob(); - - const reader = new FileReader(); - reader.readAsDataURL(imageData); - reader.onloadend = () => { - const base64data = reader.result; - const opt = { - type: 'image', - title: stream.channel.display_name + ' playing ' + stream.game, - message: stream.channel.status, - iconUrl: '../images/logo_128.png', - imageUrl: base64data, - buttons: [ - { - title: 'View Stream', - }, - ], - }; - - chrome.notifications.create(Math.random().toString(36), opt, (id) => { - chrome.storage.session.get(['notifications']).then((result) => { - if (!result.notifications) { - result.notifications = {}; - } - result.notifications[id] = stream.username; - chrome.storage.session.set({ notifications: result.notifications }); - }); - }); - }; -}; - -const fetchStreamerStatus = async ( - usernames, - callback, - sendNotification = true -) => { - const response = await fetch(CHANNEL_API_URI, { - method: 'POST', - headers: { - 'Content-Type': 'application/json', - Accept: 'application/json', - }, - body: JSON.stringify({ - channels: usernames.map((username) => username.toLowerCase()), - }), - }); - - const streamersLive = await response.json(); - - const knownOnlineStreamersData = await chrome.storage.local.get([ - 'knownOnlineStreamers', - ]); - - const knownOnlineStreamers = - knownOnlineStreamersData && knownOnlineStreamersData.knownOnlineStreamers - ? knownOnlineStreamersData.knownOnlineStreamers - : {}; - - for (let streamer of Object.keys(knownOnlineStreamers)) { - if (!streamersLive[streamer]) { - delete knownOnlineStreamers[streamer]; + try { + const imageResponse = await fetch(getPreviewUrl(stream.username, 640, 360)); + const imageData = await imageResponse.blob(); + + const reader = new FileReader(); + reader.readAsDataURL(imageData); + reader.onloadend = () => { + const base64data = reader.result; + const opt = { + type: 'image', + title: `${stream.channel.display_name} playing ${stream.game}`, + message: stream.channel.status, + iconUrl: NOTIFICATION_ICON_URL, + imageUrl: base64data, + buttons: [{title: 'View Stream'}], + }; + + chrome.notifications.create(Math.random().toString(36), opt, (id) => { + chrome.storage.session.get(['notifications']).then((result) => { + const notifications = result.notifications || {}; + notifications[id] = stream.username; + chrome.storage.session.set({notifications}); + }); + }); + }; + } catch (error) { + console.error('Error creating notification:', error); } - } +}; - const numOnline = Object.keys(streamersLive).length; +/** + * Fetches the online status of streamers and optionally sends notifications. + * @param {Array} usernames - List of usernames to check. + * @param {Function} callback - Callback function to execute after fetching status. + * @param {boolean} sendNotification - Whether to send notifications for online streamers. + */ +const fetchStreamerStatus = async (usernames, callback, sendNotification = true) => { + try { + const response = await fetch(CHANNEL_API_URI, { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + Accept: 'application/json', + }, + body: JSON.stringify({channels: usernames.map((username) => username.toLowerCase())}), + }); + + const streamersLive = await response.json(); + const {knownOnlineStreamers = {}} = await chrome.storage.local.get('knownOnlineStreamers'); + + updateKnownStreamers(streamersLive, knownOnlineStreamers); + + const numOnline = Object.keys(streamersLive).length; + updateBadgeAndTitle(numOnline, streamersLive); + + if (sendNotification) { + await notifyNewStreamers(streamersLive, knownOnlineStreamers); + } - chrome.storage.sync.get('hideStreamersOnlineCount', (storage) => { - if (!storage.hideStreamersOnlineCount) { - chrome.action.setBadgeText({ - text: `${numOnline > 0 ? numOnline : ''}`, - }); - } - }); - - chrome.action.setTitle({ - title: `${numOnline} channels online. ${Object.keys(streamersLive).join( - ', ' - )}`, - }); - - const currentStreamers = Object.keys(streamersLive); - for (let i = 0; i < currentStreamers.length; i++) { - const streamer = currentStreamers[i]; - const streamData = streamersLive[streamer]; - const alreadySentNotification = knownOnlineStreamers[streamer]; - if (!alreadySentNotification) { - knownOnlineStreamers[streamer] = true; - if (sendNotification) { - await createNotification(streamData); - } + await chrome.storage.local.set({knownOnlineStreamers}); + const hydratedData = hydrateStreamData(usernames, streamersLive); + callback(hydratedData); + } catch (error) { + console.error('Error fetching streamer status:', error); } - } +}; - await chrome.storage.local.set({ knownOnlineStreamers }); +/** + * Updates the known streamers by removing offline ones. + * @param {Object} streamersLive - Object containing live streamers. + * @param {Object} knownOnlineStreamers - Object containing known online streamers. + */ +const updateKnownStreamers = (streamersLive, knownOnlineStreamers) => { + Object.keys(knownOnlineStreamers).forEach((streamer) => { + if (!streamersLive[streamer]) { + delete knownOnlineStreamers[streamer]; + } + }); +}; - const hydratedData = usernames.map((username) => { - return streamersLive[username] || { username }; - }); +/** + * Updates the extension's badge text and title. + * @param {number} numOnline - Number of online streamers. + * @param {Object} streamersLive - Object containing live streamers. + */ +const updateBadgeAndTitle = (numOnline, streamersLive) => { + chrome.storage.sync.get('hideStreamersOnlineCount', (storage) => { + if (!storage.hideStreamersOnlineCount) { + chrome.action.setBadgeText({text: `${numOnline > 0 ? numOnline : ''}`}); + } + }); - callback(hydratedData); + chrome.action.setTitle({ + title: `${numOnline} channels online. ${Object.keys(streamersLive).join(', ')}`, + }); }; -const handleClick = (id) => { - chrome.storage.local.get(['notifications']).then((result) => { - const url = 'https://twitch.tv/' + result.notifications[id]; - chrome.tabs.create({ url: url }); - }); +/** + * Sends notifications for new online streamers. + * @param {Object} streamersLive - Object containing live streamers. + * @param {Object} knownOnlineStreamers - Object containing known online streamers. + */ +const notifyNewStreamers = async (streamersLive, knownOnlineStreamers) => { + for (const streamer of Object.keys(streamersLive)) { + if (!knownOnlineStreamers[streamer]) { + knownOnlineStreamers[streamer] = true; + await createNotification(streamersLive[streamer]); + } + } }; -const onRequest = (request, sender, callback) => { - if (request.action == 'fetchStreamerStatus') { - fetchStreamerStatus(request.usernames, callback); - } else if (request.action === 'setBadgeText') { - const setBadgeText = request.setBadgeText; +/** + * Hydrates stream data with usernames that may not be live. + * @param {Array} usernames - List of usernames to check. + * @param {Object} streamersLive - Object containing live streamers. + * @returns {Array} - Hydrated stream data. + */ +const hydrateStreamData = (usernames, streamersLive) => { + return usernames.map((username) => streamersLive[username] || {username}); +}; - if (!setBadgeText) { - chrome.action.setBadgeText({ - text: '', - }); - } - callback(); - } - return true; +/** + * Handles clicks on notifications and notification buttons. + * @param {string} id - Notification ID. + * @param {number} buttonIndex - Index of the clicked button (optional). + */ +const handleClick = (id, buttonIndex) => { + chrome.storage.session.get(['notifications']).then((result) => { + const username = result.notifications[id]; + if (buttonIndex === undefined || buttonIndex === 0) { + chrome.tabs.create({url: `https://twitch.tv/${username}`}); + } + }); }; -// Wire up the listener. -chrome.runtime.onMessage.addListener(onRequest); -chrome.notifications.onClicked.addListener(handleClick); -chrome.notifications.onButtonClicked.addListener(handleClick); -chrome.action.setBadgeBackgroundColor({ color: '#5cb85c' }); -chrome.alarms.onAlarm.addListener(() => { - chrome.storage.sync.get('twitchStreams', async (storage) => { - if (storage.twitchStreams) { - try { - await fetchStreamerStatus(storage.twitchStreams, () => {}); - } catch (e) {} +/** + * Handles incoming requests from other parts of the extension. + * @param {Object} request - Incoming request. + * @param {Object} sender - The sender of the request. + * @param {Function} callback - Callback to handle the response. + * @returns {boolean} - Always returns true to indicate asynchronous response. + */ +const onRequest = async (request, sender, callback) => { + if (request.action === 'fetchStreamerStatus') { + try { + const response = await fetchStreamerStatus(request.usernames); + callback(response); + } catch (error) { + console.error('Error fetching streamer status:', error); + callback({error: 'Failed to fetch streamer status'}); + } + } else if (request.action === 'setBadgeText') { + const {setBadgeText} = request; + chrome.action.setBadgeText({text: setBadgeText ? '' : ''}, () => { + callback(); + }); } - }); -}); + return true; +}; -chrome.runtime.onInstalled.addListener(async () => { - chrome.alarms.get('backgroundFetch', (alarm) => { - if (!alarm) { - chrome.alarms.create('backgroundFetch', { periodInMinutes: 5 }); - } - }); -}); +/** + * Initializes the extension, setting up alarms and listeners. + */ +const init = () => { + chrome.runtime.onMessage.addListener(onRequest); + chrome.notifications.onClicked.addListener((id) => handleClick(id)); + chrome.notifications.onButtonClicked.addListener((id, buttonIndex) => handleClick(id, buttonIndex)); + chrome.action.setBadgeBackgroundColor({color: BADGE_COLOR}); + + chrome.alarms.onAlarm.addListener(() => { + chrome.storage.sync.get('twitchStreams', async (storage) => { + if (storage.twitchStreams) { + try { + await fetchStreamerStatus(storage.twitchStreams, () => { + }); + } catch (e) { + console.error('Error fetching streamer status on alarm:', e); + } + } + }); + }); + + chrome.runtime.onInstalled.addListener(() => { + chrome.alarms.get(BACKGROUND_FETCH_ALARM_NAME, (alarm) => { + if (!alarm) { + chrome.alarms.create(BACKGROUND_FETCH_ALARM_NAME, {periodInMinutes: FETCH_INTERVAL_MINUTES}); + } + }); + }); +}; + +// Start the extension +init(); diff --git a/extension/scripts/pop-up.js b/extension/scripts/pop-up.js index 22bb02a..a5873a6 100644 --- a/extension/scripts/pop-up.js +++ b/extension/scripts/pop-up.js @@ -1,97 +1,161 @@ const getPreviewUrl = (userName, width, height) => - `https://static-cdn.jtvnw.net/previews-ttv/live_user_${userName}-${width}x${height}.jpg`; + `https://static-cdn.jtvnw.net/previews-ttv/live_user_${userName}-${width}x${height}.jpg`; let hideOffline = false; let hidePreviews = false; let hideStreamersOnlineCount = false; +document.addEventListener('DOMContentLoaded', () => { + const exportButton = document.getElementById('export-button'); + const importInput = document.getElementById('import-file'); + const importLabel = document.getElementById('import-label'); + + exportButton.addEventListener('click', () => { + exportStreamers(); + }); + + importLabel.addEventListener('click', () => { + importInput.click(); + }); + + importInput.addEventListener('change', (event) => { + importStreamers(event.target.files[0]); + }); +}); + +function exportStreamers() { + chrome.storage.sync.get('twitchStreams', (data) => { + const streamers = data.twitchStreams || []; + const streamersString = streamers.join('\n'); + const blob = new Blob([streamersString], {type: 'text/plain'}); + const url = URL.createObjectURL(blob); + const link = document.createElement('a'); + link.setAttribute('href', url); + link.setAttribute('download', 'streamers.txt'); + document.body.appendChild(link); + link.click(); + document.body.removeChild(link); + }); +} + +function importStreamers(file) { + const reader = new FileReader(); + reader.onload = () => { + const importedStreamers = reader.result.split('\n').map((streamer) => streamer.trim()).filter(Boolean); + + // Retrieve existing streamers from storage + chrome.storage.sync.get('twitchStreams', (data) => { + const existingStreamers = data.twitchStreams || []; + + // Create a Set to avoid duplicates + const allStreamersSet = new Set(existingStreamers.map(s => s.toLowerCase())); + + // Add imported streamers to the Set + importedStreamers.forEach(streamer => { + allStreamersSet.add(streamer.toLowerCase()); + }); + + // Convert the Set back to an array + const allStreamers = Array.from(allStreamersSet); + + // Save the updated list back to storage + chrome.storage.sync.set({twitchStreams: allStreamers}, () => { + fetchStreamerStatus({twitchStreams: allStreamers}); + }); + }); + }; + reader.readAsText(file); +} + const fetchStreamerStatus = (storage) => { - if (!storage.twitchStreams) { - storage.twitchStreams = []; - chrome.storage.sync.set({ twitchStreams: storage.twitchStreams }, () => {}); - } - - if (storage.twitchStreams.length) { - chrome.runtime - .sendMessage({ - action: 'fetchStreamerStatus', - usernames: Array.from( - new Set(storage.twitchStreams.map((s) => s.toLowerCase())) - ), - }) - .then((response) => { - displayStreamerStatus(response); - }); - } else { - displayStreamerStatus(); - } + if (!storage.twitchStreams) { + storage.twitchStreams = []; + chrome.storage.sync.set({twitchStreams: storage.twitchStreams}, () => { + }); + } + + if (storage.twitchStreams.length) { + chrome.runtime + .sendMessage({ + action: 'fetchStreamerStatus', + usernames: Array.from( + new Set(storage.twitchStreams.map((s) => s.toLowerCase())) + ), + }) + .then((response) => { + displayStreamerStatus(response); + }); + } else { + displayStreamerStatus(); + } }; const updateSetBadgeText = (setBadgeText) => { - chrome.runtime.sendMessage( - { - action: 'setBadgeText', - setBadgeText, - }, - () => {} - ); + chrome.runtime.sendMessage( + { + action: 'setBadgeText', + setBadgeText, + }, + () => { + } + ); }; const sortStreams = (streamA, streamB) => { - if (streamA.channel && streamB.channel) { - return streamB.viewers - streamA.viewers; - } else if (streamA.channel && !streamB.channel) { - return -1; - } else if (!streamA.channel && streamB.channel) { - return 1; - } - - return 0; + if (streamA.channel && streamB.channel) { + return streamB.viewers - streamA.viewers; + } else if (streamA.channel && !streamB.channel) { + return -1; + } else if (!streamA.channel && streamB.channel) { + return 1; + } + + return 0; }; const abbreviateViewerCount = (number) => { - // regex to avoid trailing zeros - return number >= 1e6 - ? (number / 1e6).toFixed(1).replace(/\.0$/, '') + 'M' - : number >= 1e3 - ? (number / 1e3).toFixed(1).replace(/\.0$/, '') + 'K' - : number; + // regex to avoid trailing zeros + return number >= 1e6 + ? (number / 1e6).toFixed(1).replace(/\.0$/, '') + 'M' + : number >= 1e3 + ? (number / 1e3).toFixed(1).replace(/\.0$/, '') + 'K' + : number; }; const createStreamerEntry = (stream) => { - if (!stream.channel) { - if (hideOffline) { - return ''; - } + if (!stream.channel) { + if (hideOffline) { + return ''; + } - return ` + return `
      - ${stream.username} + ${stream.username}
      `; - } else { - const imageDiv = ` + } else { + const imageDiv = `
      `; - return ` + return `
      - + }'> ${stream.user_name} - ${stream.channel.status}
        @@ -112,147 +176,147 @@ const createStreamerEntry = (stream) => { ${hidePreviews ? '' : imageDiv}
      `; - } + } }; const displayStreamerStatus = (streams) => { - document.getElementById('loading').classList.add('hidden'); + document.getElementById('loading').classList.add('hidden'); - if (!streams) { - document.getElementById('emptyState').classList.remove('hidden'); - return; - } + if (!streams) { + document.getElementById('emptyState').classList.remove('hidden'); + return; + } - document.getElementById('emptyState').classList.add('hidden'); - document.getElementById('streamers').innerHTML = ''; + document.getElementById('emptyState').classList.add('hidden'); + document.getElementById('streamers').innerHTML = ''; - streams.sort(sortStreams).forEach((stream) => { - const html = createStreamerEntry(stream); + streams.sort(sortStreams).forEach((stream) => { + const html = createStreamerEntry(stream); - const entry = document.createElement('li'); - entry.innerHTML = html; - entry.setAttribute('data-username', stream.username); - document.getElementById('streamers').appendChild(entry); - }); + const entry = document.createElement('li'); + entry.innerHTML = html; + entry.setAttribute('data-username', stream.username); + document.getElementById('streamers').appendChild(entry); + }); }; document.addEventListener('DOMContentLoaded', () => { - chrome.storage.sync.get( - [ - 'hideOffline', - 'hidePreviews', - 'hideStreamersOnlineCount', - 'twitchStreams', - ], - (storage) => { - hideOffline = storage.hideOffline; - document.getElementById('hideOffline').checked = !hideOffline; - - hidePreviews = storage.hidePreviews; - document.getElementById('hidePreviews').checked = !hidePreviews; - - hideStreamersOnlineCount = storage.hideStreamersOnlineCount; - document.getElementById('hideStreamersOnlineCount').checked = - !hideStreamersOnlineCount; - - fetchStreamerStatus(storage); - } - ); - - document.getElementById('addForm').addEventListener('submit', (evt) => { - evt.preventDefault(); - const user = document.getElementById('streamerUsername').value; - if (user) { - chrome.storage.sync.get('twitchStreams', (storage) => { - storage.twitchStreams.push(user); - chrome.storage.sync.set( - { twitchStreams: Array.from(new Set(storage.twitchStreams)) }, - () => { + chrome.storage.sync.get( + [ + 'hideOffline', + 'hidePreviews', + 'hideStreamersOnlineCount', + 'twitchStreams', + ], + (storage) => { + hideOffline = storage.hideOffline; + document.getElementById('hideOffline').checked = !hideOffline; + + hidePreviews = storage.hidePreviews; + document.getElementById('hidePreviews').checked = !hidePreviews; + + hideStreamersOnlineCount = storage.hideStreamersOnlineCount; + document.getElementById('hideStreamersOnlineCount').checked = + !hideStreamersOnlineCount; + fetchStreamerStatus(storage); - document.getElementById('streamerUsername').value = ''; - } - ); - }); - } - }); + } + ); - document.body.addEventListener('click', (evt) => { - if (evt.target.nodeName === 'A') { - if (evt.target.classList.contains('twitch-link')) { - chrome.tabs.create({ url: evt.target.getAttribute('href') }); + document.getElementById('addForm').addEventListener('submit', (evt) => { evt.preventDefault(); - } - - if (evt.target.classList.contains('remove-all')) { - chrome.storage.sync.set({ twitchStreams: [] }, () => { - document.getElementById('emptyState').classList.remove('hidden'); - document.getElementById('streamers').innerHTML = ''; - chrome.action.setBadgeText({ - text: '', - }); - chrome.action.setTitle({ - title: '', - }); - }); - } - } + const user = document.getElementById('streamerUsername').value; + if (user) { + chrome.storage.sync.get('twitchStreams', (storage) => { + storage.twitchStreams.push(user); + chrome.storage.sync.set( + {twitchStreams: Array.from(new Set(storage.twitchStreams))}, + () => { + fetchStreamerStatus(storage); + document.getElementById('streamerUsername').value = ''; + } + ); + }); + } + }); - if (evt.target.classList.contains('remove')) { - let parent = evt.target.parentElement; + document.body.addEventListener('click', (evt) => { + if (evt.target.nodeName === 'A') { + if (evt.target.classList.contains('twitch-link')) { + chrome.tabs.create({url: evt.target.getAttribute('href')}); + evt.preventDefault(); + } - if ( - parent.classList.contains('col-xs-12') || - parent.classList.contains('col-xs-6') - ) { - parent = parent.parentElement.parentElement; - } + if (evt.target.classList.contains('remove-all')) { + chrome.storage.sync.set({twitchStreams: []}, () => { + document.getElementById('emptyState').classList.remove('hidden'); + document.getElementById('streamers').innerHTML = ''; + chrome.action.setBadgeText({ + text: '', + }); + chrome.action.setTitle({ + title: '', + }); + }); + } + } - const streamer = evt.target.getAttribute('data-username'); + if (evt.target.classList.contains('remove')) { + let parent = evt.target.parentElement; - chrome.storage.sync.get('twitchStreams', (storage) => { - const index = storage.twitchStreams.findIndex( - (item) => item.toLowerCase() === streamer.toLowerCase() - ); + if ( + parent.classList.contains('col-xs-12') || + parent.classList.contains('col-xs-6') + ) { + parent = parent.parentElement.parentElement; + } - if (index >= 0) { - storage.twitchStreams.splice(index, 1); - } + const streamer = evt.target.getAttribute('data-username'); - chrome.storage.sync.set( - { twitchStreams: storage.twitchStreams }, - () => { - parent.remove(); - fetchStreamerStatus(storage); - } - ); - }); - } - }); + chrome.storage.sync.get('twitchStreams', (storage) => { + const index = storage.twitchStreams.findIndex( + (item) => item.toLowerCase() === streamer.toLowerCase() + ); + + if (index >= 0) { + storage.twitchStreams.splice(index, 1); + } - document.getElementById('hideOffline').addEventListener('change', (evt) => { - chrome.storage.sync.set({ hideOffline: !evt.target.checked }, () => { - hideOffline = !evt.target.checked; - chrome.storage.sync.get('twitchStreams', fetchStreamerStatus); + chrome.storage.sync.set( + {twitchStreams: storage.twitchStreams}, + () => { + parent.remove(); + fetchStreamerStatus(storage); + } + ); + }); + } }); - }); - document.getElementById('hidePreviews').addEventListener('change', (evt) => { - chrome.storage.sync.set({ hidePreviews: !evt.target.checked }, () => { - hidePreviews = !evt.target.checked; - chrome.storage.sync.get('twitchStreams', fetchStreamerStatus); + document.getElementById('hideOffline').addEventListener('change', (evt) => { + chrome.storage.sync.set({hideOffline: !evt.target.checked}, () => { + hideOffline = !evt.target.checked; + chrome.storage.sync.get('twitchStreams', fetchStreamerStatus); + }); }); - }); - document - .getElementById('hideStreamersOnlineCount') - .addEventListener('change', (evt) => { - chrome.storage.sync.set( - { hideStreamersOnlineCount: !evt.target.checked }, - () => { - hideStreamersOnlineCount = !evt.target.checked; - updateSetBadgeText(evt.target.checked); - chrome.storage.sync.get('twitchStreams', fetchStreamerStatus); - } - ); + document.getElementById('hidePreviews').addEventListener('change', (evt) => { + chrome.storage.sync.set({hidePreviews: !evt.target.checked}, () => { + hidePreviews = !evt.target.checked; + chrome.storage.sync.get('twitchStreams', fetchStreamerStatus); + }); }); + + document + .getElementById('hideStreamersOnlineCount') + .addEventListener('change', (evt) => { + chrome.storage.sync.set( + {hideStreamersOnlineCount: !evt.target.checked}, + () => { + hideStreamersOnlineCount = !evt.target.checked; + updateSetBadgeText(evt.target.checked); + chrome.storage.sync.get('twitchStreams', fetchStreamerStatus); + } + ); + }); });