Skip to content

Commit 3fad89f

Browse files
zubyjzubyj
authored
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
2 parents ea499d9 + fd4d389 commit 3fad89f

File tree

7 files changed

+229
-6
lines changed

7 files changed

+229
-6
lines changed

‎manifest.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"manifest_version": 3,
33
"name": "Leetcode Explained",
44
"version": "2.0.4",
5-
"description": "Adds video solutions, company tags, and GPT code analysis into each problem.",
5+
"description": "Adds video solutions, company tags, GPT code analysis and more.",
66
"icons": {
77
"16": "src/assets/images/logo/icon-16.png",
88
"32": "src/assets/images/logo/icon-32.png",

‎src/background/background.ts‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,14 @@ chrome.runtime.onInstalled.addListener(() => {
1111
.catch((error) => {
1212
console.error(error);
1313
});
14+
15+
// Default settings
1416
chrome.storage.local.set({ language: 'python' });
1517
chrome.storage.local.set({ fontSize: 14 });
1618
chrome.storage.local.set({ showCompanyTags: true });
1719
chrome.storage.local.set({ showExamples: true });
1820
chrome.storage.local.set({ showDifficulty: true });
21+
chrome.storage.local.set({ clickedCompany: 'Amazon' })
1922
});
2023

2124
chrome.runtime.onMessage.addListener(
@@ -44,6 +47,28 @@ chrome.runtime.onMessage.addListener(
4447
}
4548
);
4649

50+
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
51+
if (request.action === "openCompanyPage") {
52+
chrome.storage.local.set({ clickedCompany: request.company });
53+
chrome.tabs.create({
54+
url: chrome.runtime.getURL("src/popup/company.html"),
55+
active: true
56+
}, function (tab) {
57+
// Keep a reference to the listener so it can be removed later
58+
let listener = function (tabId, changedProps) {
59+
// When the tab is done loading
60+
if (tabId == tab.id && changedProps.status == "complete") {
61+
chrome.tabs.sendMessage(tabId, request);
62+
// Remove the listener once the tab is loaded
63+
chrome.tabs.onUpdated.removeListener(listener);
64+
}
65+
};
66+
// Attach the listener
67+
chrome.tabs.onUpdated.addListener(listener);
68+
});
69+
}
70+
});
71+
4772
chrome.runtime.onMessage.addListener((request: any) => {
4873
if (request.type === 'OPEN_LOGIN_PAGE') {
4974
chrome.tabs.create({ url: 'https://chat.openai.com' });
@@ -59,6 +84,9 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
5984
}
6085
});
6186

87+
88+
89+
6290
chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
6391
// If descriptions tab is opened or updated, update the description
6492
let urlPattern = /^https:\/\/leetcode\.com\/problems\/.*\/(description\/)?/;

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

Lines changed: 20 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -97,15 +97,31 @@ function loadCompanyTags(problemTitle: string, companyTagContainer: HTMLElement)
9797
chrome.storage.local.get(['leetcodeProblems'], (result) => {
9898
const problem = result.leetcodeProblems.questions.find((problem: problem) => problem.title === problemTitle);
9999
if (problem.companies && problem.companies.length > 0) {
100-
// slice the array to get only the first five companies
101100
const topCompanies = problem.companies.slice(0, 5);
102-
103101
// create a button for each company
104102
topCompanies.forEach((company: { name: string; score: any; }) => {
105103
const button = document.createElement('button');
104+
105+
// opens the company page when the button is clicked
106+
button.onclick = () => {
107+
chrome.runtime.sendMessage({
108+
// passes the company name and score to the background script
109+
action: 'openCompanyPage', company: company.name
110+
})
111+
}
112+
113+
114+
// on hover, set background color to black
115+
button.onmouseover = () => {
116+
button.style.color = 'orange';
117+
}
118+
button.onmouseout = () => {
119+
button.style.color = 'white';
120+
}
121+
106122
button.style.display = 'flex';
107-
button.style.alignItems = 'center'; // align items vertically in the center
108-
button.style.justifyContent = 'center'; // align items horizontally in the center
123+
button.style.alignItems = 'center';
124+
button.style.justifyContent = 'center';
109125

110126
const icon = document.createElement('img');
111127
icon.src = `https://logo.clearbit.com/${company.name.toLowerCase().replace(/\s/g, '')}.com`; // replace spaces with nothing

‎src/popup/company.css‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
body {
2+
background-color: #202020;
3+
color: #f0f0f0;
4+
font-size: 18px;
5+
font-family: 'Roboto', sans-serif;
6+
display: flex;
7+
flex-direction: column;
8+
align-items: center;
9+
justify-content: center;
10+
text-align: center;
11+
margin: 0;
12+
padding: 20px;
13+
}
14+
15+
h1 {
16+
font-size: 36px;
17+
margin-bottom: 20px;
18+
color: lightcyan;
19+
}
20+
21+
table {
22+
border-collapse: collapse;
23+
margin: auto;
24+
width: 500px;
25+
}
26+
27+
table,
28+
th,
29+
td {
30+
border: 1px solid #FFFFFF;
31+
padding: 10px;
32+
text-align: center;
33+
}
34+
35+
th {
36+
font-size: 18px;
37+
background-color: #424242;
38+
}
39+
40+
td {
41+
font-size: 16px;
42+
}
43+
44+
a {
45+
color: lightgreen;
46+
text-decoration: none;
47+
}
48+
49+
a:hover {
50+
color: lightcyan;
51+
}
52+
53+
.header {
54+
color: lightcyan;
55+
56+
}
57+
58+
.header:hover {
59+
color: lightgreen;
60+
cursor: pointer;
61+
background-color: #202020;
62+
}
63+
64+
#score {
65+
color: lightgreen;
66+
font-weight: bold;
67+
}

‎src/popup/company.html‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<link rel="stylesheet" href="./company.css">
6+
<title>LeetCode Solutions</title>
7+
</head>
8+
9+
<body>
10+
<h1 id="title">Amazon</h1>
11+
<p>
12+
<span id="score">Score</span> = How likely the company is to ask this question on a scale of 1-10
13+
</p>
14+
<p>
15+
Data collected from 2021-2023
16+
</p>
17+
<table id="solutionTable">
18+
<tr>
19+
<th id="#" class="header">#</th>
20+
<th id="Title" class="header">Title</th>
21+
<th id="Score" class="header">Score</th>
22+
</tr>
23+
</table>
24+
<script src="../../dist/popup/company.js"></script>
25+
</body>
26+
27+
</html>

‎src/popup/company.ts‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
// define solutions and companyName outside of the functions so they can be accessed globally
2+
let solutions = [] as { id: number, title: string, score: number, url: string }[];
3+
let companyName = "Amazon";
4+
5+
function main() {
6+
7+
8+
chrome.storage.local.get("clickedCompany", function (data) {
9+
companyName = data.clickedCompany;
10+
document.getElementById("title")!.textContent = companyName;
11+
document.title = companyName + "'s favorite problems"
12+
});
13+
14+
addCompanyProblems("Score");
15+
16+
// attach click listeners to table headers for sorting
17+
document.getElementById('#')!.addEventListener('click', () => sortBy('#'));
18+
document.getElementById('Title')!.addEventListener('click', () => sortBy('Title'));
19+
document.getElementById('Score')!.addEventListener('click', () => sortBy('Score'));
20+
}
21+
22+
// Adds the company problems by sorting method
23+
function addCompanyProblems(sortMethod: string) {
24+
chrome.storage.local.get("leetcodeProblems", function (data) {
25+
data.leetcodeProblems.questions.forEach(question => {
26+
if (!question.companies) return;
27+
question.companies.forEach(company => {
28+
if (company.name === companyName) {
29+
solutions.push({
30+
id: question.frontend_id,
31+
title: question.title,
32+
score: company.score,
33+
url: `https://leetcode.com/problems/${question.title.replace(/\s/g, '-')}/`
34+
});
35+
}
36+
});
37+
});
38+
39+
const table = document.getElementById("solutionTable");
40+
41+
if (sortMethod === "Score") {
42+
solutions.sort((a, b) => b.score - a.score);
43+
}
44+
45+
solutions.forEach(solution => {
46+
const row = table!.insertRow(-1);
47+
row.insertCell(0).innerText = solution.id;
48+
const titleCell = row.insertCell(1);
49+
titleCell.innerHTML = `<a href="${solution.url}" target="_blank">${solution.title}</a>`;
50+
row.insertCell(2).innerText = solution.score;
51+
});
52+
});
53+
}
54+
55+
function sortBy(column: string) {
56+
if (column === 'Score') {
57+
solutions.sort((a, b) => b.score - a.score);
58+
}
59+
else if (column === 'Title') {
60+
solutions.sort((a, b) => a.title.localeCompare(b.title));
61+
}
62+
else {
63+
solutions.sort((a, b) => a.id - b.id);
64+
}
65+
66+
// after sorting, you might want to re-render your table
67+
const table = document.getElementById("solutionTable");
68+
69+
// remove all existing rows
70+
while (table.rows.length > 1) {
71+
table.deleteRow(1);
72+
}
73+
74+
// add sorted rows
75+
solutions.forEach(solution => {
76+
const row = table.insertRow(-1);
77+
row.insertCell(0).innerText = solution.id;
78+
const titleCell = row.insertCell(1);
79+
titleCell.innerHTML = `<a href="${solution.url}" target="_blank">${solution.title}</a>`;
80+
row.insertCell(2).innerText = solution.score;
81+
});
82+
}
83+
84+
/* Run the script */
85+
main();

‎src/popup/popup.ts‎

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

0 commit comments

Comments
 (0)