Fix Dynamic Routing & Visual Update for Leetcode tabs #66

Original file line number	Diff line number	Diff line change
Expand Up		@@ -14,7 +14,8 @@
		},
		"permissions": [
		"storage",
	"tabs"
	"tabs",
	"webNavigation"
		],
		"host_permissions": [
		"https://api.leetcodeapp.com/*"
Expand All		@@ -33,7 +34,8 @@
		],
		"matches": [
		"https://leetcode.com/problems/*"
	]
	],
	"run_at": "document_end"
		}
		],
		"web_accessible_resources": [
Expand Down

109 changes: 87 additions & 22 deletions src/background/background.ts

Show comments View file Open in desktop

Original file line number	Diff line number	Diff line change
Expand Up		@@ -70,39 +70,104 @@ chrome.runtime.onMessage.addListener((request) => {
		}
		});

	// Keep track of the last state to avoid duplicate updates
	let lastState = {
	problemPath: '',
	view: '', // 'problem' or 'solutions'
	lastPathname: '', // Track full pathname to detect real navigation
	lastUrl: '', // Track full URL to detect refreshes
	lastUpdateTime: 0 // Track time of last update to prevent rapid re-triggers
	};

		chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
	if (changeInfo.status === 'complete' && tab.url) {
	if (tab.url) {
		const url = tab.url;
		let problemUrl = /^https:\/\/leetcode\.com\/problems\/.*\/?/;

	// Check if this is a leetcode problem page
		if (url.match(problemUrl)) {
	chrome.storage.local.get(['currentLeetCodeProblemTitle', 'descriptionTabUpdated', 'solutionsTabUpdated'], (result) => {
	let lastTitle = result.currentLeetCodeProblemTitle \|\| '';
	let descriptionTabUpdated = result.descriptionTabUpdated \|\| false;
	let solutionsTabUpdated = result.solutionsTabUpdated \|\| false;
	if (tab.title !== lastTitle) {
	// Extract the problem path from the URL
	const problemPath = url.match(/\/problems\/([^/]+)/)?.[1];
	const pathname = new URL(url).pathname;

	// Determine the current view - now only distinguishing between problem view and solutions
	let currentView = url.includes('/solutions') ? 'solutions' : 'problem';

	// Only trigger updates on actual page loads or problem changes
	const isPageLoad = changeInfo.status === 'complete';
	const isProblemChange = problemPath !== lastState.problemPath;
	const isViewChange = currentView !== lastState.view;

	// Check if this is a video navigation within solutions
	const isInternalSolutionsNavigation =
	currentView === 'solutions' &&
	lastState.view === 'solutions' &&
	problemPath === lastState.problemPath;

	// Detect actual page refresh vs internal navigation
	const isActualRefresh =
	url === lastState.lastUrl &&
	isPageLoad &&
	changeInfo.url === undefined &&
	!isInternalSolutionsNavigation &&
	Date.now() - lastState.lastUpdateTime > 1000;

	const isRealNavigation =
	!isInternalSolutionsNavigation &&
	((pathname !== lastState.lastPathname \|\| isViewChange) &&
	!pathname.includes('playground') &&
	!pathname.includes('editor') &&
	!pathname.includes('interpret-solution') &&
	!pathname.includes('submissions'));

	// Update last URL and time
	if (!isInternalSolutionsNavigation) {
	lastState.lastUrl = url;
	}

	// Only update if there's a real navigation, problem change, or actual refresh
	if ((isProblemChange \|\| (isViewChange && isRealNavigation) \|\| isActualRefresh) && problemPath) {
	console.log(`State change detected - ${
	isProblemChange ? 'New Problem' :
	isViewChange ? 'View Changed' :
	isActualRefresh ? 'Page Refresh' :
	'Page Load'
	}`);

	// Update last state
	lastState.problemPath = problemPath;
	lastState.view = currentView;
	lastState.lastPathname = pathname;
	lastState.lastUpdateTime = Date.now();

	// Reset flags only on problem change or actual refresh
	if (isProblemChange \|\| isActualRefresh) {
		chrome.storage.local.set({
	'currentLeetCodeProblem': problemPath,
		'currentLeetCodeProblemTitle': tab.title,
		'descriptionTabUpdated': false,
		'solutionsTabUpdated': false
		});
	// If the title has changed, we reset both flags
	descriptionTabUpdated = false;
	solutionsTabUpdated = false;
		}

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

	let solutionsUrl = /^https:\/\/leetcode\.com\/problems\/.*\/solutions\/?/;
	if (url.match(solutionsUrl)) {
	chrome.storage.local.set({ 'solutionsTabUpdated': true });
	chrome.tabs.sendMessage(tabId, { action: 'updateSolutions', title: tab.title \|\| 'title' });
	}
	});
	// Always update description tab when in problem view
	if (currentView === 'problem') {
	chrome.storage.local.set({ 'descriptionTabUpdated': true });
	chrome.tabs.sendMessage(tabId, { action: 'updateDescription', title: tab.title \|\| 'title' });
	}

	// Always update solutions tab when in solutions view
	if (currentView === 'solutions') {
	chrome.storage.local.set({ 'solutionsTabUpdated': true });
	chrome.tabs.sendMessage(tabId, { action: 'updateSolutions', title: tab.title \|\| 'title' });
	}
	});
	}
		}
		}
	});

	});

82 changes: 33 additions & 49 deletions src/content-script/themeDetector.js

Show comments View file Open in desktop

Original file line number	Diff line number	Diff line change
		@@ -1,26 +1,16 @@
		// Listen for messages from the background script or popup
		chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
	if (request.action === 'detectTheme') {
	const theme = detectPageTheme();
	console.log(`Detecting theme: ${theme}`);
	sendResponse({ theme });
	if (request.action === 'detectTheme' \|\| request.action === 'getTheme') {
	debouncedThemeDetection(sendResponse);
	return true; // Keep the message channel open for asynchronous response
		}
	if (request.action === 'getTheme') {
	const theme = detectPageTheme();
	console.log(`Getting theme: ${theme}`);
	sendResponse({ theme });
	}
	return true; // Keep the message channel open for asynchronous response
		});

		// Function to detect the theme of the current LeetCode page
		function detectPageTheme() {
	console.log('Starting theme detection on leetcode page...');

		// Force a quick check to see if this is a LeetCode page
		const url = window.location.href;
		const isLeetCodePage = url.includes('leetcode.com');
	console.log('Is LeetCode page:', isLeetCodePage, url);

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

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

		// LeetCode light mode has white or very light background
		if (bgColor.includes('255, 255, 255') \|\| bgColor.includes('rgb(255, 255, 255)')) {
	console.log('Theme detected from content: LIGHT (white background)');
		return 'light';
		}
		}
Expand All		@@ -45,79 +33,48 @@ function detectPageTheme() {
		// If the dark mode switcher has a sun icon, it means we're in light mode
		const sunIcon = darkModeSwitcher.querySelector('svg[data-icon="sun"]');
		if (sunIcon) {
	console.log('Theme detected from dark mode switcher: LIGHT (sun icon visible)');
		return 'light';
		}
		// If the dark mode switcher has a moon icon, it means we're in dark mode
		const moonIcon = darkModeSwitcher.querySelector('svg[data-icon="moon"]');
		if (moonIcon) {
	console.log('Theme detected from dark mode switcher: dark (moon icon visible)');
		return 'dark';
		}
		}

		// Method 3: Check HTML tag class for 'dark' or 'light'
		const htmlElement = document.documentElement;
		if (htmlElement.classList.contains('dark')) {
	console.log('Theme detected from HTML class: dark');
		return 'dark';
		} else if (htmlElement.classList.contains('light')) {
	console.log('Theme detected from HTML class: LIGHT');
		return 'light';
		}

		// Method 4: Check data-theme attribute
		const dataTheme = htmlElement.getAttribute('data-theme');
		if (dataTheme === 'dark') {
	console.log('Theme detected from data-theme: dark');
		return 'dark';
		} else if (dataTheme === 'light') {
	console.log('Theme detected from data-theme: LIGHT');
		return 'light';
		}

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

		// LeetCode light mode header is usually white or very light
		if (headerBgColor.includes('255, 255, 255') \|\|
		headerBgColor.includes('rgb(255, 255, 255)') \|\|
		!isColorDark(headerBgColor)) {
	console.log('Theme detected from header: LIGHT');
		return 'light';
		} else {
	console.log('Theme detected from header: dark');
		return 'dark';
		}
		}

	// Method 6: Check the code editor background (LeetCode specific)
	const codeEditor = document.querySelector('.monaco-editor');
	if (codeEditor) {
	const editorBgColor = window.getComputedStyle(codeEditor).backgroundColor;
	console.log('Code editor background color:', editorBgColor);
	if (isColorDark(editorBgColor)) {
	console.log('Theme detected from code editor: dark');
	return 'dark';
	} else {
	console.log('Theme detected from code editor: LIGHT');
	return 'light';
	}
	}

	// Method 7: Check background color to determine if dark or light
	const backgroundColor = window.getComputedStyle(document.body).backgroundColor;
	console.log('Body background color:', backgroundColor);
	if (isColorDark(backgroundColor)) {
	console.log('Theme detected from body bg: dark');
	return 'dark';
	} else {
	console.log('Theme detected from body bg: LIGHT');
	return 'light';
	}
	// Default to dark if can't detect
	return 'dark';
		}

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

		// Return true for dark colors (lower luminance)
		return luminance < 0.5;
	}
	}

	// Debounce function to limit how often a function can be called
	function debounce(func, wait) {
	let timeout;
	return function executedFunction(...args) {
	const later = () => {
	clearTimeout(timeout);
	func(...args);
	};
	clearTimeout(timeout);
	timeout = setTimeout(later, wait);
	};
	}

	// Store last detected theme to prevent unnecessary updates
	let lastDetectedTheme = null;

	// Debounced theme detection function
	const debouncedThemeDetection = debounce((sendResponse) => {
	const theme = detectPageTheme();
	if (theme !== lastDetectedTheme) {
	lastDetectedTheme = theme;
	if (sendResponse) {
	sendResponse({ theme });
	}
	}
	}, 500);

Navigation Menu

Search code, repositories, users, issues, pull requests...

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Fix Dynamic Routing & Visual Update for Leetcode tabs #66

Uh oh!

Fix Dynamic Routing & Visual Update for Leetcode tabs #66

Filter by extension

Uh oh!

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!