Skip to content

Commit 9e0f509

Browse files
zubyjzubyj
committed
add button to show/hide the examples, update & improve tag names
1 parent 1f6d635 commit 9e0f509

File tree

5 files changed

+135
-92
lines changed

5 files changed

+135
-92
lines changed

‎src/background/background.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,8 @@ chrome.runtime.onInstalled.addListener(() => {
1919
});
2020
chrome.storage.local.set({ language: 'python' });
2121
chrome.storage.local.set({ fontSize: 14 });
22-
chrome.storage.local.set({ hideTags: false });
22+
chrome.storage.local.set({ showCompanyTags: true });
23+
chrome.storage.local.set({ showExamples: true });
2324
});
2425

2526
chrome.runtime.onMessage.addListener(

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

Lines changed: 97 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,40 @@
11
chrome.runtime.onMessage.addListener((request) => {
22
if (request.action === 'updateDescription') {
33

4-
// testing some stuff
5-
6-
let descriptionContainer = document.getElementById('descriptionContainer');
7-
// remove the <pre> element from the page
8-
console.log(descriptionContainer)
9-
// end testing
104

5+
chrome.storage.local.get(['showExamples'], (result) => {
6+
let showExamples = true;
7+
showExamples = result.showExamples;
8+
if (!showExamples) {
9+
let descriptionContainer = document.querySelector('div._1l1MA');
10+
if (descriptionContainer) {
11+
let exampleElements = descriptionContainer.getElementsByClassName('example');
12+
if (exampleElements.length > 0) {
13+
let startIndex = Array.from(descriptionContainer.children).indexOf(exampleElements[0].parentNode);
14+
for (let i = startIndex; i < descriptionContainer.children.length; i++) {
15+
descriptionContainer.children[i].style.display = 'none';
16+
}
17+
}
18+
}
19+
}
20+
else {
21+
let descriptionContainer = document.querySelector('div._1l1MA');
22+
if (descriptionContainer) {
23+
let exampleElements = descriptionContainer.getElementsByClassName('example');
24+
if (exampleElements.length > 0) {
25+
let startIndex = Array.from(descriptionContainer.children).indexOf(exampleElements[0].parentNode);
26+
for (let i = startIndex; i < descriptionContainer.children.length; i++) {
27+
descriptionContainer.children[i].style.display = 'block';
28+
}
29+
}
30+
}
31+
}
32+
});
1133

12-
chrome.storage.local.get(['hideTags'], (result) => {
13-
let canShowCompanyTags = true;
14-
canShowCompanyTags = !result.hideTags;
15-
if (canShowCompanyTags) {
34+
chrome.storage.local.get(['showCompanyTags'], (result) => {
35+
let showCompanyTags = true;
36+
showCompanyTags = !result.showCompanyTags;
37+
if (showCompanyTags) {
1638
const title = request.title.split('-')[0].trim();
1739
addCompanyTags(title);
1840
}
@@ -24,7 +46,6 @@ chrome.runtime.onMessage.addListener((request) => {
2446
}
2547
});
2648

27-
const details = document.querySelectorAll('div.mt-3.flex.space-x-4')[0];
2849
let oldBtn = document.getElementById('openSolutionsBtn');
2950
if (oldBtn) {
3051
oldBtn.remove();
@@ -57,77 +78,74 @@ chrome.runtime.onMessage.addListener((request) => {
5778
console.log('No solutions tab found');
5879
}
5980
};
60-
details.appendChild(openSolutionBtn);
61-
}
62-
});
6381

82+
function addCompanyTags(title: string) {
83+
const container = document.querySelectorAll('div.mt-3.flex')[0];
6484

65-
function addCompanyTags(title: string) {
66-
const container = document.querySelectorAll('div.mt-3.flex')[0];
67-
68-
if (!container) {
69-
return;
70-
}
85+
if (!container) {
86+
return;
87+
}
7188

72-
// Find the old button container or create a new one
73-
let buttonContainer = document.getElementById('companyButtonContainer');
74-
if (buttonContainer) {
75-
// Clear the old content
76-
buttonContainer.innerHTML = '';
77-
} else {
78-
// create a new container for buttons
79-
buttonContainer = document.createElement('div');
80-
buttonContainer.id = 'companyButtonContainer'; // add an id
81-
buttonContainer.style.display = 'flex';
82-
buttonContainer.style.flexDirection = 'row';
83-
buttonContainer.style.marginTop = '10px';
84-
buttonContainer.style.gap = '5px';
85-
86-
// add the button container to the main container
87-
container.parentElement?.appendChild(buttonContainer);
88-
}
89+
// Find the old button container or create a new one
90+
let buttonContainer = document.getElementById('companyButtonContainer');
91+
if (buttonContainer) {
92+
// Clear the old content
93+
buttonContainer.innerHTML = '';
94+
} else {
95+
// create a new container for buttons
96+
buttonContainer = document.createElement('div');
97+
buttonContainer.id = 'companyButtonContainer'; // add an id
98+
buttonContainer.style.display = 'flex';
99+
buttonContainer.style.flexDirection = 'row';
100+
buttonContainer.style.marginTop = '10px';
101+
buttonContainer.style.gap = '5px';
102+
103+
// add the button container to the main container
104+
container.parentElement?.appendChild(buttonContainer);
105+
}
89106

90-
chrome.storage.local.get(['leetcodeProblems'], (result) => {
91-
const problem = result.leetcodeProblems.questions.find((problem) => problem.title === title);
92-
if (problem.companies && problem.companies.length > 0) {
93-
94-
// slice the array to get only the first five companies
95-
const topCompanies = problem.companies.slice(0, 5);
96-
97-
// create a button for each company
98-
topCompanies.forEach(company => {
99-
const button = document.createElement('button');
100-
button.style.display = 'flex';
101-
button.style.alignItems = 'center'; // align items vertically in the center
102-
button.style.justifyContent = 'center'; // align items horizontally in the center
103-
104-
const icon = document.createElement('img');
105-
icon.src = `https://logo.clearbit.com/${company.name.toLowerCase().replace(/\s/g, '')}.com`; // replace spaces with nothing
106-
icon.style.height = '12px';
107-
icon.style.width = '12px';
108-
icon.style.marginRight = '5px'; // some space between the icon and the name
109-
button.appendChild(icon);
110-
111-
button.style.color = '#fff';
112-
button.style.minWidth = '100px';
113-
button.style.height = '25px';
114-
button.style.padding = '1px';
115-
button.style.backgroundColor = '#373737';
116-
button.style.borderRadius = '10px';
117-
button.style.fontSize = '10px';
118-
119-
const companyName = document.createTextNode(`${company.name}`);
120-
button.appendChild(companyName);
121-
122-
const score = document.createElement('span');
123-
score.textContent = ` ${company.score}`;
124-
score.style.fontSize = '12px';
125-
score.style.fontWeight = 'bold';
126-
score.style.fontFamily = 'monospace';
127-
score.style.marginLeft = '5px'; // some space between the name and the score
128-
button.appendChild(score);
129-
buttonContainer.appendChild(button);
107+
chrome.storage.local.get(['leetcodeProblems'], (result) => {
108+
const problem = result.leetcodeProblems.questions.find((problem) => problem.title === title);
109+
if (problem.companies && problem.companies.length > 0) {
110+
// slice the array to get only the first five companies
111+
const topCompanies = problem.companies.slice(0, 5);
112+
113+
// create a button for each company
114+
topCompanies.forEach(company => {
115+
const button = document.createElement('button');
116+
button.style.display = 'flex';
117+
button.style.alignItems = 'center'; // align items vertically in the center
118+
button.style.justifyContent = 'center'; // align items horizontally in the center
119+
120+
const icon = document.createElement('img');
121+
icon.src = `https://logo.clearbit.com/${company.name.toLowerCase().replace(/\s/g, '')}.com`; // replace spaces with nothing
122+
icon.style.height = '12px';
123+
icon.style.width = '12px';
124+
icon.style.marginRight = '5px'; // some space between the icon and the name
125+
button.appendChild(icon);
126+
127+
button.style.color = '#fff';
128+
button.style.minWidth = '100px';
129+
button.style.height = '25px';
130+
button.style.padding = '1px';
131+
button.style.backgroundColor = '#373737';
132+
button.style.borderRadius = '10px';
133+
button.style.fontSize = '10px';
134+
135+
const companyName = document.createTextNode(`${company.name}`);
136+
button.appendChild(companyName);
137+
138+
const score = document.createElement('span');
139+
score.textContent = ` ${company.score}`;
140+
score.style.fontSize = '12px';
141+
score.style.fontWeight = 'bold';
142+
score.style.fontFamily = 'monospace';
143+
score.style.marginLeft = '5px'; // some space between the name and the score
144+
button.appendChild(score);
145+
buttonContainer.appendChild(button);
146+
});
147+
}
130148
});
131149
}
132-
});
133-
}
150+
}
151+
});

‎src/popup/popup.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -154,4 +154,9 @@ a:hover {
154154
.select:hover {
155155
background-color: black;
156156
color: #f0f0f0;
157+
}
158+
159+
#show-examples-icon,
160+
#show-company-tags-icon {
161+
padding-right: 5px;
157162
}

‎src/popup/settings.html‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,11 @@ <h2 class="title">Settings</h2>
2222
<option value="18">Large (L)</option>
2323
<option value="22">Extra Large (XL)</option>
2424
</select>
25-
<button id="hide-tags-btn" class="material-button settings-btn">
26-
<span id="toggle-show-tags-text"> </span> Show Company Tags
25+
<button id="show-company-tags-btn" class="material-button settings-btn">
26+
<span id="show-company-tags-icon"> </span> Show Company Tags
27+
</button>
28+
<button id="show-examples-btn" class="material-button settings-btn">
29+
<span id="show-examples-icon"> </span> Show Examples
2730
</button>
2831
</body>
2932

‎src/popup/settings.ts‎

Lines changed: 26 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,13 @@ document.getElementById('home-button')!.onclick = () => {
33
};
44

55
document.addEventListener('DOMContentLoaded', (event) => {
6-
chrome.storage.local.get(['hideTags'], (result) => {
7-
let hideTagsBtnText = document.getElementById('toggle-show-tags-text');
8-
hideTagsBtnText!.textContent = result.hideTags ? '❌' : '✅';
6+
chrome.storage.local.get(['showCompanyTags'], (result) => {
7+
let showCompanyTagsIcon = document.getElementById('show-company-tags-icon');
8+
showCompanyTagsIcon!.textContent = result.showCompanyTags ? '✅' : '❌';
9+
});
10+
chrome.storage.local.get(['showExamples'], (result) => {
11+
let showExamplesIcon = document.getElementById('show-examples-icon');
12+
showExamplesIcon!.textContent = result.showExamples ? '✅' : '❌';
913
});
1014
});
1115

@@ -25,20 +29,32 @@ fontSizeSelect!.onchange = function () {
2529
document.documentElement.style.setProperty('--dynamic-font-size', `${selectedFontSize}px`);
2630
};
2731

28-
document.getElementById('hide-tags-btn')!.addEventListener('click', function () {
29-
chrome.storage.local.get(['hideTags'], (result) => {
30-
const newHideTags = !result.hideTags;
31-
chrome.storage.local.set({ hideTags: newHideTags }, () => {
32-
document.getElementById('toggle-show-tags-text')!.textContent = newHideTags ? '❌' : '✅';
33-
34-
// Manually trigger the update description after toggling 'hideTags'
32+
document.getElementById('show-company-tags-btn')!.addEventListener('click', function () {
33+
chrome.storage.local.get(['showCompanyTags'], (result) => {
34+
const showCompanyTags = !result.showCompanyTags;
35+
chrome.storage.local.set({ showCompanyTags: showCompanyTags }, () => {
36+
document.getElementById('show-company-tags-icon')!.textContent = showCompanyTags ? '✅' : '❌';
37+
// Manually trigger the update description after toggling
3538
chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
3639
chrome.tabs.sendMessage(tabs[0].id!, { action: 'updateDescription', title: tabs[0].title || 'title' });
3740
});
3841
});
3942
});
4043
});
4144

45+
document.getElementById('show-examples-btn')!.addEventListener('click', function () {
46+
chrome.storage.local.get(['showExamples'], (result) => {
47+
const showExamples = !result.showExamples;
48+
chrome.storage.local.set({ showExamples: showExamples }, () => {
49+
document.getElementById('show-examples-icon')!.textContent = showExamples ? '✅' : '❌';
50+
})
51+
// Manually trigger the update description after toggling
52+
chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
53+
chrome.tabs.sendMessage(tabs[0].id!, { action: 'updateDescription', title: tabs[0].title || 'title' });
54+
});
55+
});
56+
});
57+
4258
function sendMessageToActiveTab(message: object): void {
4359
chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
4460
chrome.tabs.sendMessage(tabs[0].id!, message);

0 commit comments

Comments
 (0)