Merge pull request #34 from zubyj/add-questions-by-company-btn

Clicking the company tag should show the list of questions asked by that company

Author: zubyj

manifest.json

@@ -2,7 +2,7 @@
     "manifest_version": 3,
     "name": "Leetcode Explained",
     "version": "2.0.4",
-    "description": "Adds video solutions, company tags, and GPT code analysis into each problem.",
+    "description": "Adds video solutions, company tags, GPT code analysis and more.",
     "icons": {
         "16": "src/assets/images/logo/icon-16.png",
         "32": "src/assets/images/logo/icon-32.png",

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,6 +84,9 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
     }
 });
 
+
+
+
 chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
     // If descriptions tab is opened or updated, update the description
     let urlPattern = /^https:\/\/leetcode\.com\/problems\/.*\/(description\/)?/;

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

@@ -97,15 +97,31 @@ function loadCompanyTags(problemTitle: string, companyTagContainer: HTMLElement)
     chrome.storage.local.get(['leetcodeProblems'], (result) => {
         const problem = result.leetcodeProblems.questions.find((problem: problem) => problem.title === problemTitle);
         if (problem.companies && problem.companies.length > 0) {
-            // slice the array to get only the first five companies
             const topCompanies = problem.companies.slice(0, 5);
-
             // 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.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';  // align items vertically in the center
-                button.style.justifyContent = 'center';  // align items horizontally in the center
+                button.style.alignItems = 'center';
+                button.style.justifyContent = 'center';
 
                 const icon = document.createElement('img');
                 icon.src = `https://logo.clearbit.com/${company.name.toLowerCase().replace(/\s/g, '')}.com`; // replace spaces with nothing

src/popup/company.css

@@ -0,0 +1,67 @@
+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;
+    text-align: 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: lightcyan;
+}
+
+.header {
+    color: lightcyan;
+
+}
+
+.header:hover {
+    color: lightgreen;
+    cursor: pointer;
+    background-color: #202020;
+}
+
+#score {
+    color: lightgreen;
+    font-weight: bold;
+}

src/popup/company.html

@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <link rel="stylesheet" href="./company.css">
+    <title>LeetCode Solutions</title>
+</head>
+
+<body>
+    <h1 id="title">Amazon</h1>
+    <p>
+        <span id="score">Score</span> = How likely the company is to ask this question on a scale of 1-10
+    </p>
+    <p>
+        Data collected from 2021-2023
+    </p>
+    <table id="solutionTable">
+        <tr>
+            <th id="#" class="header">#</th>
+            <th id="Title" class="header">Title</th>
+            <th id="Score" class="header">Score</th>
+        </tr>
+    </table>
+    <script src="../../dist/popup/company.js"></script>
+</body>
+
+</html>

src/popup/company.ts

@@ -0,0 +1,85 @@
+// define solutions and companyName outside of the functions so they can be accessed globally
+let solutions = [] as { id: number, title: string, score: number, url: string }[];
+let companyName = "Amazon";
+
+function main() {
+
+
+    chrome.storage.local.get("clickedCompany", function (data) {
+        companyName = data.clickedCompany;
+        document.getElementById("title")!.textContent = companyName;
+        document.title = companyName + "'s favorite problems"
+    });
+
+    addCompanyProblems("Score");
+
+    // attach click listeners to table headers for sorting
+    document.getElementById('#')!.addEventListener('click', () => sortBy('#'));
+    document.getElementById('Title')!.addEventListener('click', () => sortBy('Title'));
+    document.getElementById('Score')!.addEventListener('click', () => sortBy('Score'));
+}
+
+// Adds the company problems by sorting method
+function addCompanyProblems(sortMethod: string) {
+    chrome.storage.local.get("leetcodeProblems", function (data) {
+        data.leetcodeProblems.questions.forEach(question => {
+            if (!question.companies) return;
+            question.companies.forEach(company => {
+                if (company.name === companyName) {
+                    solutions.push({
+                        id: question.frontend_id,
+                        title: question.title,
+                        score: company.score,
+                        url: `https://leetcode.com/problems/${question.title.replace(/\s/g, '-')}/`
+                    });
+                }
+            });
+        });
+
+        const table = document.getElementById("solutionTable");
+
+        if (sortMethod === "Score") {
+            solutions.sort((a, b) => b.score - a.score);
+        }
+
+        solutions.forEach(solution => {
+            const row = table!.insertRow(-1);
+            row.insertCell(0).innerText = solution.id;
+            const titleCell = row.insertCell(1);
+            titleCell.innerHTML = `<a href="${solution.url}" target="_blank">${solution.title}</a>`;
+            row.insertCell(2).innerText = solution.score;
+        });
+    });
+}
+
+function sortBy(column: string) {
+    if (column === 'Score') {
+        solutions.sort((a, b) => b.score - a.score);
+    }
+    else if (column === 'Title') {
+        solutions.sort((a, b) => a.title.localeCompare(b.title));
+    }
+    else {
+        solutions.sort((a, b) => a.id - b.id);
+    }
+
+    // after sorting, you might want to re-render your table
+    const table = document.getElementById("solutionTable");
+
+    // remove all existing rows
+    while (table.rows.length > 1) {
+        table.deleteRow(1);
+    }
+
+    // add sorted rows
+    solutions.forEach(solution => {
+        const row = table.insertRow(-1);
+        row.insertCell(0).innerText = solution.id;
+        const titleCell = row.insertCell(1);
+        titleCell.innerHTML = `<a href="${solution.url}" target="_blank">${solution.title}</a>`;
+        row.insertCell(2).innerText = solution.score;
+    });
+}
+
+/* Run the script */
+main();

src/popup/popup.ts

@@ -109,7 +109,7 @@ function processCode(
         prompt = `
         As an experienced software engineer, please analyze the Leetcode problem titled ${problemTitle} and the accompanying code below.
         Your analysis should be concise and straightforward, providing both time and space complexity in big O notation.
-        Please include a brief explanation (no more than 1-2 lines) for each complexity analysis.
+        Please include a brief, concise explanation (no more than 1-2 lines) for each complexity analysis.
         Space complexity should not include the output (return value) of the function.
         Your analysis should be direct and to the point. 
         The code is provided below.