feat: add video links to neetcode and striver

[Sbrjt]

Summary by Sourcery

Add support for showing Neetcode and Striver YouTube solution videos on LeetCode solution pages and expose a corresponding user setting.

New Features:

• Introduce SolutionVideos component that embeds Neetcode and Striver YouTube solution videos and provides a quick YouTube search link.
• Add a content hook to inject solution videos into LeetCode solution pages when the feature is enabled.

Enhancements:

• Add a configurable videoSolution feature flag to the extension settings.
• Refactor utility placement by moving getRange into the shared lib module and reusing it from the API utilities.
• Define typed data models for Neetcode and Striver JSON sources used by the new APIs.
• Polish onboarding documentation examples and extend the acknowledgements with Neetcode and Striver sources.
• Update options and popup UIs to use the unified Switch component path.

Build:

• Pin TypeScript to version 6.0 in package.json.

Documentation:

• Clarify LeetCode DOM selection examples in ONBOARDING.md and add references to Neetcode and Striver data sources.

[sourcery-ai]

Hey - I've found 3 issues, and left some high level feedback:

• The new getStriver/getNeetcode helpers fetch remote JSON on every use; consider memoizing or reusing the fetched data (and using Promise.all for parallel fetches) to avoid repeated network calls when navigating between solutions.
• getStriver currently extracts video IDs only from youtu.be URLs and assumes a non-null yt_link; broaden the parsing to support standard youtube.com/watch?v= links and gracefully handle missing or malformed entries to reduce silent failures.
• The YouTube search link in SolutionVideos uses target="_blank" without a rel attribute; add rel="noopener noreferrer" to avoid potential security and performance issues when opening new tabs.

Prompt for AI Agents

Please address the comments from this code review:

## Overall Comments
- The new getStriver/getNeetcode helpers fetch remote JSON on every use; consider memoizing or reusing the fetched data (and using Promise.all for parallel fetches) to avoid repeated network calls when navigating between solutions.
- getStriver currently extracts video IDs only from `youtu.be` URLs and assumes a non-null yt_link; broaden the parsing to support standard `youtube.com/watch?v=` links and gracefully handle missing or malformed entries to reduce silent failures.
- The YouTube search link in SolutionVideos uses `target="_blank"` without a `rel` attribute; add `rel="noopener noreferrer"` to avoid potential security and performance issues when opening new tabs.

## Individual Comments

### Comment 1
<location path="src/utils/api.ts" line_range="122-131" />
<code_context>
 	return Object.values(questions)
 }

+export async function getStriver(problemSlug: string) {
+	const lcLink = `https://leetcode.com/problems/${problemSlug}/`
+
+	const res = await fetch(
+		'https://raw.githubusercontent.com/hitarth-gg/CP/main/striver-a2z.json',
+	)
+	const json: StriverData[] = await res.json()
+
+	const ytLink = json
+		.flatMap((step) => step.sub_steps)
+		.flatMap((subStep) => subStep.topics)
+		.find((topic) => topic.lc_link === lcLink)?.yt_link
+
+	const videoId = ytLink?.match(/youtu\.be\/([^?]+)/)?.[1]
+	return videoId
+}
</code_context>
<issue_to_address>
**issue:** Video ID extraction from Striver data only handles `youtu.be` short links.

The current regex only extracts IDs from `youtu.be` links, so `videoId` will be `undefined` for other valid YouTube URL formats (e.g., `youtube.com/watch`, `/embed/`, etc.). It would be more robust to handle multiple common YouTube URL patterns or use a shared helper to normalize IDs from different URL shapes.
</issue_to_address>

### Comment 2
<location path="src/utils/api.ts" line_range="125-134" />
<code_context>
+export async function getStriver(problemSlug: string) {
+	const lcLink = `https://leetcode.com/problems/${problemSlug}/`
+
+	const res = await fetch(
+		'https://raw.githubusercontent.com/hitarth-gg/CP/main/striver-a2z.json',
+	)
+	const json: StriverData[] = await res.json()
+
+	const ytLink = json
+		.flatMap((step) => step.sub_steps)
+		.flatMap((subStep) => subStep.topics)
+		.find((topic) => topic.lc_link === lcLink)?.yt_link
+
+	const videoId = ytLink?.match(/youtu\.be\/([^?]+)/)?.[1]
+	return videoId
+}
+
+export async function getNeetcode(problemSlug: string) {
+	const res = await fetch(
+		'https://raw.githubusercontent.com/neetcode-gh/leetcode/main/.problemSiteData.json',
+	)
+	const json: NeetcodeData = await res.json()
+	const videoId = json.find(({ link }) => link === `${problemSlug}/`)?.video
+	return videoId
</code_context>
<issue_to_address>
**issue:** Network and JSON parsing failures in `getNeetcode`/`getStriver` are not handled.

These functions assume `fetch` and `res.json()` always succeed. In a content script, rejected promises can break the feature. Consider wrapping the calls in `try/catch`, returning `undefined` on failure and optionally logging (e.g. `console.debug`) so the YouTube search fallback can still render.
</issue_to_address>

### Comment 3
<location path="src/components/SolutionVideos.tsx" line_range="40-45" />
<code_context>
+
+function Search({ question }: Pick<Props, 'question'>) {
+	return (
+		<a
+			href={`https://www.youtube.com/results?search_query=${encodeURIComponent(
+				`${question.id}. ${question.title} LeetCode`,
+			)}`}
+			target='_blank'
+			className='bg-fill-secondary hover:bg-fill-primary inline-flex
+				items-center gap-2 rounded-lg border px-3 py-2 transition'
+		>
</code_context>
<issue_to_address>
**🚨 issue (security):** External link opened with `target="_blank"` should use `rel="noopener noreferrer"`.

This external link opens a new tab without `rel="noopener noreferrer"`, which lets the new page access `window.opener`. Please add `rel="noopener noreferrer"` to this anchor for safer handling of `target="_blank"` links.
</issue_to_address>

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}