diff --git a/apply-css/background.js b/apply-css/background.js index 9397366..6528f4e 100644 --- a/apply-css/background.js +++ b/apply-css/background.js @@ -1,8 +1,11 @@ const CSS = "body { border: 20px solid red; }"; - const TITLE_APPLY = "Apply CSS"; const TITLE_REMOVE = "Remove CSS"; +/* +Toggle CSS: based on the current title, insert or remove the CSS. +Update the page action's title and icon to reflect its state. +*/ function toggleCSS(tab) { function gotTitle(title) { @@ -20,18 +23,30 @@ function toggleCSS(tab) { chrome.pageAction.getTitle({tabId: tab.id}, gotTitle) } +/* +Initialize the page action: set icon and title, then show. +*/ function initializePageAction(tabId) { chrome.pageAction.setIcon({tabId, path: "icons/off.svg"}); chrome.pageAction.setTitle({tabId, title: TITLE_APPLY}); chrome.pageAction.show(tabId); } +/* +When first loaded, initialize the page action for all tabs. +*/ chrome.tabs.query({}, (tabs)=> { for (tab of tabs) { initializePageAction(tab.id); } }); +/* +Each time a tab is updated, reset the page action for that tab. +*/ chrome.tabs.onUpdated.addListener(initializePageAction); +/* +Toggle CSS when the page action is clicked. +*/ chrome.pageAction.onClicked.addListener(toggleCSS);