Skip to content

Commit 96e419a

Browse files
zubyjzubyj
authored
Merge pull request #66 from zubyj/fix-dynamic-routing
Fix Dynamic Routing & Visual Update for Leetcode tabs
2 parents b0aa327 + 3e8c970 commit 96e419a

File tree

9 files changed

+1088
-394
lines changed

9 files changed

+1088
-394
lines changed

‎manifest.json‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,8 @@
1414
},
1515
"permissions": [
1616
"storage",
17-
"tabs"
17+
"tabs",
18+
"webNavigation"
1819
],
1920
"host_permissions": [
2021
"https://api.leetcodeapp.com/*"
@@ -33,7 +34,8 @@
3334
],
3435
"matches": [
3536
"https://leetcode.com/problems/*"
36-
]
37+
],
38+
"run_at": "document_end"
3739
}
3840
],
3941
"web_accessible_resources": [

‎src/background/background.ts‎

Lines changed: 87 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -70,39 +70,104 @@ chrome.runtime.onMessage.addListener((request) => {
7070
}
7171
});
7272

73+
// Keep track of the last state to avoid duplicate updates
74+
let lastState = {
75+
problemPath: '',
76+
view: '', // 'problem' or 'solutions'
77+
lastPathname: '', // Track full pathname to detect real navigation
78+
lastUrl: '', // Track full URL to detect refreshes
79+
lastUpdateTime: 0 // Track time of last update to prevent rapid re-triggers
80+
};
81+
7382
chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
74-
if (changeInfo.status === 'complete' && tab.url) {
83+
if (tab.url) {
7584
const url = tab.url;
7685
let problemUrl = /^https:\/\/leetcode\.com\/problems\/.*\/?/;
86+
87+
// Check if this is a leetcode problem page
7788
if (url.match(problemUrl)) {
78-
chrome.storage.local.get(['currentLeetCodeProblemTitle', 'descriptionTabUpdated', 'solutionsTabUpdated'], (result) => {
79-
let lastTitle = result.currentLeetCodeProblemTitle || '';
80-
let descriptionTabUpdated = result.descriptionTabUpdated || false;
81-
let solutionsTabUpdated = result.solutionsTabUpdated || false;
82-
if (tab.title !== lastTitle) {
89+
// Extract the problem path from the URL
90+
const problemPath = url.match(/\/problems\/([^/]+)/)?.[1];
91+
const pathname = new URL(url).pathname;
92+
93+
// Determine the current view - now only distinguishing between problem view and solutions
94+
let currentView = url.includes('/solutions') ? 'solutions' : 'problem';
95+
96+
// Only trigger updates on actual page loads or problem changes
97+
const isPageLoad = changeInfo.status === 'complete';
98+
const isProblemChange = problemPath !== lastState.problemPath;
99+
const isViewChange = currentView !== lastState.view;
100+
101+
// Check if this is a video navigation within solutions
102+
const isInternalSolutionsNavigation =
103+
currentView === 'solutions' &&
104+
lastState.view === 'solutions' &&
105+
problemPath === lastState.problemPath;
106+
107+
// Detect actual page refresh vs internal navigation
108+
const isActualRefresh =
109+
url === lastState.lastUrl &&
110+
isPageLoad &&
111+
changeInfo.url === undefined &&
112+
!isInternalSolutionsNavigation &&
113+
Date.now() - lastState.lastUpdateTime > 1000;
114+
115+
const isRealNavigation =
116+
!isInternalSolutionsNavigation &&
117+
((pathname !== lastState.lastPathname || isViewChange) &&
118+
!pathname.includes('playground') &&
119+
!pathname.includes('editor') &&
120+
!pathname.includes('interpret-solution') &&
121+
!pathname.includes('submissions'));
122+
123+
// Update last URL and time
124+
if (!isInternalSolutionsNavigation) {
125+
lastState.lastUrl = url;
126+
}
127+
128+
// Only update if there's a real navigation, problem change, or actual refresh
129+
if ((isProblemChange || (isViewChange && isRealNavigation) || isActualRefresh) && problemPath) {
130+
console.log(`State change detected - ${
131+
isProblemChange ? 'New Problem' :
132+
isViewChange ? 'View Changed' :
133+
isActualRefresh ? 'Page Refresh' :
134+
'Page Load'
135+
}`);
136+
137+
// Update last state
138+
lastState.problemPath = problemPath;
139+
lastState.view = currentView;
140+
lastState.lastPathname = pathname;
141+
lastState.lastUpdateTime = Date.now();
142+
143+
// Reset flags only on problem change or actual refresh
144+
if (isProblemChange || isActualRefresh) {
83145
chrome.storage.local.set({
146+
'currentLeetCodeProblem': problemPath,
84147
'currentLeetCodeProblemTitle': tab.title,
85148
'descriptionTabUpdated': false,
86149
'solutionsTabUpdated': false
87150
});
88-
// If the title has changed, we reset both flags
89-
descriptionTabUpdated = false;
90-
solutionsTabUpdated = false;
91151
}
92152

93-
let descriptionUrl = /^https:\/\/leetcode\.com\/problems\/.*\/(description\/)?/;
94-
if (!descriptionTabUpdated && url.match(descriptionUrl)) {
95-
chrome.storage.local.set({ 'descriptionTabUpdated': true });
96-
chrome.tabs.sendMessage(tabId, { action: 'updateDescription', title: tab.title || 'title' });
97-
}
153+
// Get current state
154+
chrome.storage.local.get(['descriptionTabUpdated', 'solutionsTabUpdated'], (result) => {
155+
let descriptionTabUpdated = result.descriptionTabUpdated || false;
156+
let solutionsTabUpdated = result.solutionsTabUpdated || false;
98157

99-
let solutionsUrl = /^https:\/\/leetcode\.com\/problems\/.*\/solutions\/?/;
100-
if (url.match(solutionsUrl)) {
101-
chrome.storage.local.set({ 'solutionsTabUpdated': true });
102-
chrome.tabs.sendMessage(tabId, { action: 'updateSolutions', title: tab.title || 'title' });
103-
}
104-
});
158+
// Always update description tab when in problem view
159+
if (currentView === 'problem') {
160+
chrome.storage.local.set({ 'descriptionTabUpdated': true });
161+
chrome.tabs.sendMessage(tabId, { action: 'updateDescription', title: tab.title || 'title' });
162+
}
163+
164+
// Always update solutions tab when in solutions view
165+
if (currentView === 'solutions') {
166+
chrome.storage.local.set({ 'solutionsTabUpdated': true });
167+
chrome.tabs.sendMessage(tabId, { action: 'updateSolutions', title: tab.title || 'title' });
168+
}
169+
});
170+
}
105171
}
106172
}
107-
});
108-
173+
});

‎src/content-script/themeDetector.js‎

Lines changed: 33 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,16 @@
11
// Listen for messages from the background script or popup
22
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
3-
if (request.action === 'detectTheme') {
4-
const theme = detectPageTheme();
5-
console.log(`Detecting theme: ${theme}`);
6-
sendResponse({ theme });
3+
if (request.action === 'detectTheme' || request.action === 'getTheme') {
4+
debouncedThemeDetection(sendResponse);
5+
return true; // Keep the message channel open for asynchronous response
76
}
8-
if (request.action === 'getTheme') {
9-
const theme = detectPageTheme();
10-
console.log(`Getting theme: ${theme}`);
11-
sendResponse({ theme });
12-
}
13-
return true; // Keep the message channel open for asynchronous response
147
});
158

169
// Function to detect the theme of the current LeetCode page
1710
function detectPageTheme() {
18-
console.log('Starting theme detection on leetcode page...');
19-
2011
// Force a quick check to see if this is a LeetCode page
2112
const url = window.location.href;
2213
const isLeetCodePage = url.includes('leetcode.com');
23-
console.log('Is LeetCode page:', isLeetCodePage, url);
2414

2515
// Method 1: Check for LeetCode's light theme indicator (most reliable)
2616
// In light mode LeetCode specifically has a white background for these elements
@@ -30,11 +20,9 @@ function detectPageTheme() {
3020

3121
if (mainContent) {
3222
const bgColor = window.getComputedStyle(mainContent).backgroundColor;
33-
console.log('Main content background color:', bgColor);
3423

3524
// LeetCode light mode has white or very light background
3625
if (bgColor.includes('255, 255, 255') || bgColor.includes('rgb(255, 255, 255)')) {
37-
console.log('Theme detected from content: LIGHT (white background)');
3826
return 'light';
3927
}
4028
}
@@ -45,79 +33,48 @@ function detectPageTheme() {
4533
// If the dark mode switcher has a sun icon, it means we're in light mode
4634
const sunIcon = darkModeSwitcher.querySelector('svg[data-icon="sun"]');
4735
if (sunIcon) {
48-
console.log('Theme detected from dark mode switcher: LIGHT (sun icon visible)');
4936
return 'light';
5037
}
5138
// If the dark mode switcher has a moon icon, it means we're in dark mode
5239
const moonIcon = darkModeSwitcher.querySelector('svg[data-icon="moon"]');
5340
if (moonIcon) {
54-
console.log('Theme detected from dark mode switcher: dark (moon icon visible)');
5541
return 'dark';
5642
}
5743
}
5844

5945
// Method 3: Check HTML tag class for 'dark' or 'light'
6046
const htmlElement = document.documentElement;
6147
if (htmlElement.classList.contains('dark')) {
62-
console.log('Theme detected from HTML class: dark');
6348
return 'dark';
6449
} else if (htmlElement.classList.contains('light')) {
65-
console.log('Theme detected from HTML class: LIGHT');
6650
return 'light';
6751
}
6852

6953
// Method 4: Check data-theme attribute
7054
const dataTheme = htmlElement.getAttribute('data-theme');
7155
if (dataTheme === 'dark') {
72-
console.log('Theme detected from data-theme: dark');
7356
return 'dark';
7457
} else if (dataTheme === 'light') {
75-
console.log('Theme detected from data-theme: LIGHT');
7658
return 'light';
7759
}
7860

7961
// Method 5: Check header/navbar background color (very reliable for LeetCode)
8062
const header = document.querySelector('header') || document.querySelector('nav');
8163
if (header) {
8264
const headerBgColor = window.getComputedStyle(header).backgroundColor;
83-
console.log('Header background color:', headerBgColor);
8465

8566
// LeetCode light mode header is usually white or very light
8667
if (headerBgColor.includes('255, 255, 255') ||
8768
headerBgColor.includes('rgb(255, 255, 255)') ||
8869
!isColorDark(headerBgColor)) {
89-
console.log('Theme detected from header: LIGHT');
9070
return 'light';
9171
} else {
92-
console.log('Theme detected from header: dark');
9372
return 'dark';
9473
}
9574
}
9675

97-
// Method 6: Check the code editor background (LeetCode specific)
98-
const codeEditor = document.querySelector('.monaco-editor');
99-
if (codeEditor) {
100-
const editorBgColor = window.getComputedStyle(codeEditor).backgroundColor;
101-
console.log('Code editor background color:', editorBgColor);
102-
if (isColorDark(editorBgColor)) {
103-
console.log('Theme detected from code editor: dark');
104-
return 'dark';
105-
} else {
106-
console.log('Theme detected from code editor: LIGHT');
107-
return 'light';
108-
}
109-
}
110-
111-
// Method 7: Check background color to determine if dark or light
112-
const backgroundColor = window.getComputedStyle(document.body).backgroundColor;
113-
console.log('Body background color:', backgroundColor);
114-
if (isColorDark(backgroundColor)) {
115-
console.log('Theme detected from body bg: dark');
116-
return 'dark';
117-
} else {
118-
console.log('Theme detected from body bg: LIGHT');
119-
return 'light';
120-
}
76+
// Default to dark if can't detect
77+
return 'dark';
12178
}
12279

12380
// Helper function to determine if a color is dark based on luminance
@@ -140,4 +97,31 @@ function isColorDark(color) {
14097

14198
// Return true for dark colors (lower luminance)
14299
return luminance < 0.5;
143-
}
100+
}
101+
102+
// Debounce function to limit how often a function can be called
103+
function debounce(func, wait) {
104+
let timeout;
105+
return function executedFunction(...args) {
106+
const later = () => {
107+
clearTimeout(timeout);
108+
func(...args);
109+
};
110+
clearTimeout(timeout);
111+
timeout = setTimeout(later, wait);
112+
};
113+
}
114+
115+
// Store last detected theme to prevent unnecessary updates
116+
let lastDetectedTheme = null;
117+
118+
// Debounced theme detection function
119+
const debouncedThemeDetection = debounce((sendResponse) => {
120+
const theme = detectPageTheme();
121+
if (theme !== lastDetectedTheme) {
122+
lastDetectedTheme = theme;
123+
if (sendResponse) {
124+
sendResponse({ theme });
125+
}
126+
}
127+
}, 500);

0 commit comments

Comments
 (0)