add toggle show difficulty button

Author: zubyj

src/background/background.ts

@@ -15,6 +15,7 @@ chrome.runtime.onInstalled.addListener(() => {
     chrome.storage.local.set({ fontSize: 14 });
     chrome.storage.local.set({ showCompanyTags: true });
     chrome.storage.local.set({ showExamples: true });
+    chrome.storage.local.set({ showDifficulty: true });
 });
 
 chrome.runtime.onMessage.addListener(

src/content-script/update-description.ts

@@ -22,6 +22,14 @@ function showExamples() {
     });
 }
 
+function showDifficulty() {
+    chrome.storage.local.get(['showDifficulty'], (result) => {
+        let showDifficulty = result.showDifficulty;
+        let difficultyContainer = document.querySelectorAll('div.bg-olive')[0];
+        difficultyContainer.style.display = showDifficulty ? 'block' : 'none';
+    });
+}
+
 function showCompanyTags(problemTitle: string) {
     chrome.storage.local.get(['showCompanyTags'], (result) => {
         let showCompanyTags = result.showCompanyTags;
@@ -130,5 +138,6 @@ chrome.runtime.onMessage.addListener((request) => {
     if (request.action === 'updateDescription') {
         showExamples();
         showCompanyTags(request.title.split('-')[0].trim());
+        showDifficulty();
     }
 });

src/popup/popup.ts

@@ -219,8 +219,6 @@ async function main(): Promise<void> {
         }
     });
 
-
-
     // get language from storage and set the classname of the code block to it
     chrome.storage.local.get('language', function (data) {
         fixCodeResponse!.classList.add('language-' + data.language);

src/popup/settings.html

@@ -28,6 +28,9 @@ <h2 class="title">Settings</h2>
     <button id="show-examples-btn" class="material-button settings-btn">
         <span id="show-examples-icon"> </span> Show Examples
     </button>
+    <button id="show-difficulty-btn" class="material-button settings-btn">
+        <span id="show-difficulty-icon"> </span> Show Difficulty
+    </button>
 </body>
 
 </html>

src/popup/settings.ts

@@ -11,6 +11,11 @@ document.addEventListener('DOMContentLoaded', (event) => {
         let showExamplesIcon = document.getElementById('show-examples-icon');
         showExamplesIcon!.textContent = result.showExamples ? '✅' : '❌';
     });
+
+    chrome.storage.local.get(['showDifficulty'], (result) => {
+        let showDifficultyIcon = document.getElementById('show-difficulty-icon');
+        showDifficultyIcon!.textContent = result.showDifficulty ? '✅' : '❌';
+    });
 });
 
 // Get font fize and check if it is already set in local storage
@@ -54,6 +59,19 @@ document.getElementById('show-examples-btn')!.addEventListener('click', function
     });
 });
 
+document.getElementById('show-difficulty-btn')!.addEventListener('click', function () {
+    chrome.storage.local.get(['showDifficulty'], (result) => {
+        const showDifficulty = !result.showDifficulty;
+        chrome.storage.local.set({ showDifficulty: showDifficulty }, () => {
+            document.getElementById('show-difficulty-icon')!.textContent = showDifficulty ? '✅' : '❌';
+        })
+        // Manually trigger the update description after toggling
+        chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
+            chrome.tabs.sendMessage(tabs[0].id!, { action: 'updateDescription', title: tabs[0].title || 'title' });
+        });
+    });
+});
+
 function sendMessageToActiveTab(message: object): void {
     chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
         chrome.tabs.sendMessage(tabs[0].id!, message);