track the clicked company and display the problems asked sorted by the score

Author: zubyj

src/background/background.ts

@@ -11,11 +11,14 @@ chrome.runtime.onInstalled.addListener(() => {
         .catch((error) => {
             console.error(error);
         });
+
+    // Default settings
     chrome.storage.local.set({ language: 'python' });
     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.storage.local.set({ clickedCompany: 'Amazon' })
 });
 
 chrome.runtime.onMessage.addListener(
@@ -44,6 +47,28 @@ chrome.runtime.onMessage.addListener(
     }
 );
 
+chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
+    if (request.action === "openCompanyPage") {
+        chrome.storage.local.set({ clickedCompany: request.company });
+        chrome.tabs.create({
+            url: chrome.runtime.getURL("src/popup/company.html"),
+            active: true
+        }, function (tab) {
+            // Keep a reference to the listener so it can be removed later
+            let listener = function (tabId, changedProps) {
+                // When the tab is done loading
+                if (tabId == tab.id && changedProps.status == "complete") {
+                    chrome.tabs.sendMessage(tabId, request);
+                    // Remove the listener once the tab is loaded
+                    chrome.tabs.onUpdated.removeListener(listener);
+                }
+            };
+            // Attach the listener
+            chrome.tabs.onUpdated.addListener(listener);
+        });
+    }
+});
+
 chrome.runtime.onMessage.addListener((request: any) => {
     if (request.type === 'OPEN_LOGIN_PAGE') {
         chrome.tabs.create({ url: 'https://chat.openai.com' });
@@ -59,22 +84,7 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
     }
 });
 
-chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
-    if (request.action === "openCompanyPage") {
-        chrome.tabs.create({
-            url: chrome.runtime.getURL("src/popup/company.html"),
-            active: true
-        }, function (tab) {
-            chrome.tabs.onUpdated.addListener(function listener(tabId, changedProps) {
-                // When the tab is done loading
-                if (tabId == tab.id && changedProps.status == "complete") {
-                    chrome.tabs.sendMessage(tabId, request);
-                    chrome.tabs.onUpdated.removeListener(listener);
-                }
-            });
-        });
-    }
-});
+
 
 
 chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {

src/content-script/update-description-tab.ts

@@ -101,14 +101,24 @@ function loadCompanyTags(problemTitle: string, companyTagContainer: HTMLElement)
             // create a button for each company
             topCompanies.forEach((company: { name: string; score: any; }) => {
                 const button = document.createElement('button');
+
                 // opens the company page when the button is clicked
                 button.onclick = () => {
                     chrome.runtime.sendMessage({
                         // passes the company name and score to the background script
-                        action: 'openCompanyPage', company: company
+                        action: 'openCompanyPage', company: company.name
                     })
                 }
 
+
+                // on hover, set background color to black
+                button.onmouseover = () => {
+                    button.style.color = 'orange';
+                }
+                button.onmouseout = () => {
+                    button.style.color = 'white';
+                }
+
                 button.style.display = 'flex';
                 button.style.alignItems = 'center';
                 button.style.justifyContent = 'center';

src/popup/company.css

@@ -0,0 +1,50 @@
+body {
+    background-color: #202020;
+    color: #f0f0f0;
+    font-size: 18px;
+    font-family: 'Roboto', sans-serif;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin: 0;
+    padding: 20px;
+}
+
+h1 {
+    font-size: 36px;
+    margin-bottom: 20px;
+    color: lightcyan;
+}
+
+table {
+    border-collapse: collapse;
+    margin: auto;
+    width: 500px;
+}
+
+table,
+th,
+td {
+    border: 1px solid #FFFFFF;
+    padding: 10px;
+    text-align: center;
+}
+
+th {
+    font-size: 18px;
+    background-color: #424242;
+}
+
+td {
+    font-size: 16px;
+}
+
+a {
+    color: lightgreen;
+    text-decoration: none;
+}
+
+a:hover {
+    color: #a0a0a0;
+}

src/popup/company.html

@@ -2,15 +2,19 @@
 <html>
 
 <head>
+    <link rel="stylesheet" href="./company.css">
     <title>LeetCode Solutions</title>
 </head>
 
 <body>
-    <h1 id="test">Company tags</h1>
+    <h1 id="title">Amazon</h1>
+    <p>
+        Score = How many times this question has been asked in interviews in the past 2 years.
+    </p>
     <table id="solutionTable">
         <tr>
-            <th>Problem Number</th>
-            <th>Problem Title</th>
+            <th>#</th>
+            <th>Title</th>
             <th>Score</th>
         </tr>
     </table>

src/popup/company.ts

@@ -1,8 +1,15 @@
+function main() {
 
+    let companyName = "Amazon";
+
+
+    chrome.storage.local.get("clickedCompany", function (data) {
+        companyName = data.clickedCompany;
+        document.getElementById("title").textContent = companyName;
+        document.title = companyName + "'s favorite problems"
+    });
 
-function main() {
     chrome.storage.local.get("leetcodeProblems", function (data) {
-        const companyName = "Amazon";
         let solutions = [];
 
         console.log(data);
@@ -22,6 +29,9 @@ function main() {
         });
 
         const table = document.getElementById("solutionTable");
+
+        solutions.sort((a, b) => b.score - a.score);
+
         solutions.forEach(solution => {
             const row = table.insertRow(-1);
             row.insertCell(0).innerText = solution.id;
@@ -30,8 +40,6 @@ function main() {
             row.insertCell(2).innerText = solution.score;
         });
     });
-
-    document.getElementById("test")?.textContent = "Hello World!";
 }
 
 /* Run the script */