diff --git a/scripts/background.js b/scripts/background.js index 5e013a9..09f6a1f 100644 --- a/scripts/background.js +++ b/scripts/background.js @@ -7,7 +7,7 @@ const disableIcon = (tabId) => { chrome.browserAction.setIcon({ - path: "assets/icon-disabled.png", + path: "assets/icons/disabled.png", tabId: tabId, }); }; @@ -35,7 +35,7 @@ const disablePopup = (tabId) => { const enableIcon = (tabId) => { chrome.browserAction.setIcon({ - path: "assets/icon-enabled.png", + path: "assets/icons/enabled.png", tabId: tabId, }); }; @@ -58,23 +58,26 @@ const enablePopup = (tabId) => { * @description Listens to content messages */ -chrome.runtime.onMessage.addListener((request, sender) => { - const tabId = sender.tab ? sender.tab.id : undefined; +chrome.runtime.onMessage.addListener((request) => { + chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => { + const tab = tabs[0]; + const tabId = tab.id; - switch (request.type) { - case "DISABLE_ICON": - disableIcon(tabId); - break; - case "DISABLE_POPUP": - disablePopup(tabId); - break; - case "ENABLE_ICON": - enableIcon(tabId); - break; - case "ENABLE_POPUP": - enablePopup(tabId); - break; - default: - break; - } + switch (request.type) { + case "DISABLE_ICON": + disableIcon(tabId); + break; + case "DISABLE_POPUP": + disablePopup(tabId); + break; + case "ENABLE_ICON": + enableIcon(tabId); + break; + case "ENABLE_POPUP": + enablePopup(tabId); + break; + default: + break; + } + }); }); diff --git a/scripts/popup.js b/scripts/popup.js index 3c4cb22..b6ebffe 100644 --- a/scripts/popup.js +++ b/scripts/popup.js @@ -47,7 +47,7 @@ const currentTab = () => * @function currentState * @description Returns current extension state * - * @returns {Promise>}>} + * @returns {Promise<{ enabled: boolean, matches: string[] }>}>} */ const currentState = async () => { @@ -61,13 +61,12 @@ const currentState = async () => { }; /** - * @function handleButtonClick - * @description Disables or enables extension - * - * @param {MouseEvent} event + * @async + * @function handlePowerChange + * @description Disables or enables extension on current page */ -const handleStateButtonClick = async () => { +const handlePowerChange = async () => { const state = await currentState(); const tab = await currentTab(); @@ -79,42 +78,51 @@ const handleStateButtonClick = async () => { }, }, () => { - const stateButton = document.getElementById("state-button"); + const power = document.getElementById("power"); + + if (!state.enabled === true) { + power.setAttribute("checked", "checked"); + chrome.runtime.sendMessage({ type: "ENABLE_ICON" }); + } else { + power.removeAttribute("checked"); + chrome.runtime.sendMessage({ type: "DISABLE_ICON" }); + } - stateButton.textContent = state.enabled - ? "Enable extension" - : "Disable extension"; - chrome.runtime.sendMessage({ - type: state.enabled ? "DISABLE_ICON" : "ENABLE:ICON", - }); chrome.tabs.reload(tab.id, { bypassCache: true }); } ); }; /** - * @function handleStarClick - * @description Hides stars and shows negative or positive messages + * @async + * @function handleReload + * @description Reload current page + */ + +const handleReload = async () => { + const tab = await currentTab(); + + chrome.tabs.reload(tab.id, { bypassCache: true }); +}; + +/** + * @function handleRate + * @description Shows negative or positive messages * * @param {MouseEvent} event */ -const handleStarClick = (event) => { +const handleRate = (event) => { const negative = document.getElementById("negative"); const positive = document.getElementById("positive"); - const { score } = event.currentTarget.dataset; - const stars = document.getElementById("stars"); - switch (score) { - case "1": - case "2": - case "3": - stars.setAttribute("hidden", "true"); + switch (event.currentTarget.id) { + case "unlike": + positive.setAttribute("hidden", "true"); negative.removeAttribute("hidden"); break; - case "4": - case "5": - stars.setAttribute("hidden", "true"); + case "like": + negative.setAttribute("hidden", "true"); positive.removeAttribute("hidden"); break; default: @@ -123,22 +131,29 @@ const handleStarClick = (event) => { }; /** + * @async * @function handleContentLoaded * @description Setup stars handlers and result message links */ const handleContentLoaded = async () => { - const stars = Array.from(document.getElementsByClassName("star")); + const host = document.getElementById("host"); + const like = document.getElementById("like"); + const power = document.getElementById("power"); + const reload = document.getElementById("reload"); const state = await currentState(); - const stateButton = document.getElementById("state-button"); - const storeLink = document.getElementById("store-link"); + const store = document.getElementById("store"); + const tab = await currentTab(); + const unlike = document.getElementById("unlike"); - stars.forEach((star) => star.addEventListener("click", handleStarClick)); - stateButton.textContent = state.enabled - ? "Disable extension" - : "Enable extension"; - stateButton.addEventListener("click", handleStateButtonClick); - storeLink.setAttribute("href", isChromium ? chromeUrl : firefoxUrl); + like.addEventListener("click", handleRate); + power.addEventListener("change", handlePowerChange); + reload.addEventListener("click", handleReload); + store.setAttribute("href", isChromium ? chromeUrl : firefoxUrl); + unlike.addEventListener("click", handleRate); + + if (tab.location) host.innerText = tab.location.hostname.replace("www.", ""); + if (state.enabled) power.setAttribute("checked", "checked"); }; /**