Resume
+
+
+
+ No resume uploaded
+
+
+
+
+
+
+ Actions
+ ++ Click to detect form fields on the current page and preview + auto-fill suggestions +
+Review the suggested values below. Fields will be highlighted on the page.
+Auto-fill job applications
+No resume uploaded
++ Click to detect form fields on the current page and preview + auto-fill suggestions +
+Name: ${data.personalInfo.fullName}
+Email: ${data.personalInfo.email}
+Phone: ${data.personalInfo.phone}
+Location: ${data.personalInfo.city}, ${data.personalInfo.state}
+Skills: ${data.skills.slice(0, 5).join(', ')}${data.skills.length > 5 ? '...' : ''}
+ `; + + resumeDataDiv.innerHTML = html; + } + + function parseResume(text: string): ResumeData { + // Basic resume parser - extracts email, phone, and text content + const emailRegex = /[\w.-]+@[\w.-]+\.\w+/g; + const phoneRegex = + /(\+?\d{1,3}[-.\s]?)?\(?\d{3}\)?[-.\s]?\d{3}[-.\s]?\d{4}/g; + + const email = text.match(emailRegex)?.[0] || ''; + const phone = text.match(phoneRegex)?.[0] || ''; + + // Extract name (assume first line is name) + const lines = text.split('\n').filter((line) => line.trim()); + const fullName = lines[0] || ''; + + // Basic skill extraction (look for common keywords) + const skillKeywords = [ + 'JavaScript', + 'TypeScript', + 'Python', + 'Java', + 'React', + 'Node.js', + 'SQL', + 'HTML', + 'CSS', + 'Git', + 'AWS', + 'Azure', + 'Docker', + 'Kubernetes', + ]; + const skills = skillKeywords.filter((skill) => + text.toLowerCase().includes(skill.toLowerCase()) + ); + + return { + personalInfo: { + fullName, + email, + phone, + address: '', + city: '', + state: '', + zipCode: '', + country: '', + }, + workExperience: [], + education: [], + skills, + summary: text.substring(0, 500), + }; + } +}); diff --git a/src/services/fieldMatcher.ts b/src/services/fieldMatcher.ts new file mode 100644 index 0000000..ef554df --- /dev/null +++ b/src/services/fieldMatcher.ts @@ -0,0 +1,271 @@ +import type { ResumeData, FormField, FieldMapping } from '../types'; + +export class FieldMatcher { + private resumeData: ResumeData; + + constructor(resumeData: ResumeData) { + this.resumeData = resumeData; + } + + matchFields(fields: FormField[]): FieldMapping[] { + const mappings: FieldMapping[] = []; + + for (const field of fields) { + const mapping = this.findBestMatch(field); + if (mapping) { + mappings.push(mapping); + } + } + + return mappings; + } + + private findBestMatch(field: FormField): FieldMapping | null { + const fieldText = this.normalizeText( + `${field.label} ${field.name} ${field.id}` + ); + + // Personal Info mappings - check specific names first before generic "name" + if (this.matchesAny(fieldText, ['first name', 'firstname', 'given name'])) { + const firstName = + this.resumeData.personalInfo.fullName.split(' ')[0] || ''; + return this.createMapping(field, 'personalInfo.firstName', firstName); + } + + if ( + this.matchesAny(fieldText, [ + 'last name', + 'lastname', + 'surname', + 'family name', + ]) + ) { + const parts = this.resumeData.personalInfo.fullName.split(' '); + const lastName = parts[parts.length - 1] || ''; + return this.createMapping(field, 'personalInfo.lastName', lastName); + } + + if (this.matchesAny(fieldText, ['full name', 'fullname', 'name'])) { + return this.createMapping( + field, + 'personalInfo.fullName', + this.resumeData.personalInfo.fullName + ); + } + + if (this.matchesAny(fieldText, ['email', 'e-mail', 'mail'])) { + return this.createMapping( + field, + 'personalInfo.email', + this.resumeData.personalInfo.email + ); + } + + if (this.matchesAny(fieldText, ['phone', 'telephone', 'mobile', 'cell'])) { + return this.createMapping( + field, + 'personalInfo.phone', + this.resumeData.personalInfo.phone + ); + } + + if (this.matchesAny(fieldText, ['address', 'street'])) { + return this.createMapping( + field, + 'personalInfo.address', + this.resumeData.personalInfo.address + ); + } + + if (this.matchesAny(fieldText, ['city', 'town'])) { + return this.createMapping( + field, + 'personalInfo.city', + this.resumeData.personalInfo.city + ); + } + + if (this.matchesAny(fieldText, ['state', 'province', 'region'])) { + return this.createMapping( + field, + 'personalInfo.state', + this.resumeData.personalInfo.state + ); + } + + if ( + this.matchesAny(fieldText, [ + 'zip', + 'postal', + 'postcode', + 'zip code', + 'postal code', + ]) + ) { + return this.createMapping( + field, + 'personalInfo.zipCode', + this.resumeData.personalInfo.zipCode + ); + } + + if (this.matchesAny(fieldText, ['country'])) { + return this.createMapping( + field, + 'personalInfo.country', + this.resumeData.personalInfo.country + ); + } + + if (this.matchesAny(fieldText, ['linkedin', 'linked in', 'linkedin url'])) { + return this.createMapping( + field, + 'personalInfo.linkedIn', + this.resumeData.personalInfo.linkedIn || '' + ); + } + + if (this.matchesAny(fieldText, ['website', 'portfolio', 'url'])) { + return this.createMapping( + field, + 'personalInfo.website', + this.resumeData.personalInfo.website || '' + ); + } + + // Work Experience + if ( + this.matchesAny(fieldText, [ + 'company', + 'employer', + 'organization', + 'current company', + ]) + ) { + const latestJob = this.resumeData.workExperience[0]; + return this.createMapping( + field, + 'workExperience.company', + latestJob?.company || '' + ); + } + + if ( + this.matchesAny(fieldText, [ + 'position', + 'title', + 'job title', + 'role', + 'current position', + ]) + ) { + const latestJob = this.resumeData.workExperience[0]; + return this.createMapping( + field, + 'workExperience.position', + latestJob?.position || '' + ); + } + + // Education + if ( + this.matchesAny(fieldText, [ + 'school', + 'university', + 'college', + 'institution', + ]) + ) { + const latestEd = this.resumeData.education[0]; + return this.createMapping( + field, + 'education.institution', + latestEd?.institution || '' + ); + } + + if (this.matchesAny(fieldText, ['degree', 'qualification'])) { + const latestEd = this.resumeData.education[0]; + return this.createMapping( + field, + 'education.degree', + latestEd?.degree || '' + ); + } + + if ( + this.matchesAny(fieldText, [ + 'major', + 'field of study', + 'study', + 'specialization', + ]) + ) { + const latestEd = this.resumeData.education[0]; + return this.createMapping( + field, + 'education.field', + latestEd?.field || '' + ); + } + + if (this.matchesAny(fieldText, ['gpa'])) { + const latestEd = this.resumeData.education[0]; + return this.createMapping(field, 'education.gpa', latestEd?.gpa || ''); + } + + // Skills + if (this.matchesAny(fieldText, ['skills', 'skill'])) { + return this.createMapping( + field, + 'skills', + this.resumeData.skills.join(', ') + ); + } + + // Summary/Cover Letter + if ( + this.matchesAny(fieldText, [ + 'summary', + 'about', + 'bio', + 'cover letter', + 'objective', + 'introduction', + ]) + ) { + return this.createMapping( + field, + 'summary', + this.resumeData.summary || '' + ); + } + + return null; + } + + private matchesAny(text: string, keywords: string[]): boolean { + return keywords.some((keyword) => text.includes(keyword)); + } + + private normalizeText(text: string): string { + return text.toLowerCase().replace(/[_-]/g, ' ').trim(); + } + + private createMapping( + field: FormField, + mappedTo: string, + value: string + ): FieldMapping | null { + // Don't create mapping for empty values + if (!value || value.trim() === '') { + return null; + } + + return { + field, + mappedTo, + value, + }; + } +} diff --git a/src/services/formDetector.ts b/src/services/formDetector.ts new file mode 100644 index 0000000..1f57af1 --- /dev/null +++ b/src/services/formDetector.ts @@ -0,0 +1,132 @@ +import type { FormField } from '../types'; + +export class FormDetector { + private readonly formFieldSelectors = [ + 'input[type="text"]', + 'input[type="email"]', + 'input[type="tel"]', + 'input[type="url"]', + 'input[type="number"]', + 'input:not([type])', + 'textarea', + 'select', + ]; + + detectFormFields(): FormField[] { + const fields: FormField[] = []; + const selector = this.formFieldSelectors.join(', '); + const elements = document.querySelectorAll(selector); + + elements.forEach((element) => { + if ( + !( + element instanceof HTMLInputElement || + element instanceof HTMLTextAreaElement || + element instanceof HTMLSelectElement + ) + ) { + return; + } + + // Skip hidden, disabled, or readonly fields + if ( + element.type === 'hidden' || + element.disabled || + ('readOnly' in element && element.readOnly) || + !this.isVisible(element) + ) { + return; + } + + const field = this.extractFieldInfo(element); + if (field) { + fields.push(field); + } + }); + + return fields; + } + + private extractFieldInfo( + element: HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement + ): FormField | null { + const name = element.name || ''; + const id = element.id || ''; + const type = + element instanceof HTMLInputElement + ? element.type + : element.tagName.toLowerCase(); + + // Get label + let label = ''; + + // Try to find label by 'for' attribute + if (id) { + const labelElement = document.querySelector(`label[for="${id}"]`); + if (labelElement) { + label = labelElement.textContent?.trim() || ''; + } + } + + // Try to find parent label + if (!label) { + const parentLabel = element.closest('label'); + if (parentLabel) { + label = parentLabel.textContent?.trim() || ''; + } + } + + // Try to find nearby text + if (!label) { + label = this.findNearbyLabel(element); + } + + // Use placeholder, name, or id as fallback + if (!label) { + label = + element.getAttribute('placeholder') || + element.getAttribute('aria-label') || + name || + id; + } + + return { + element, + type, + name, + id, + label, + value: + element instanceof HTMLSelectElement ? element.value : element.value, + }; + } + + private findNearbyLabel(element: HTMLElement): string { + // Look for text in previous sibling + let sibling = element.previousElementSibling; + if (sibling && sibling.textContent) { + return sibling.textContent.trim(); + } + + // Look for text in parent's previous sibling + const parent = element.parentElement; + if (parent) { + sibling = parent.previousElementSibling; + if (sibling && sibling.textContent) { + return sibling.textContent.trim(); + } + } + + return ''; + } + + private isVisible(element: HTMLElement): boolean { + const style = window.getComputedStyle(element); + return ( + style.display !== 'none' && + style.visibility !== 'hidden' && + style.opacity !== '0' && + element.offsetParent !== null + ); + } +} diff --git a/src/tests/fieldMatcher.test.ts b/src/tests/fieldMatcher.test.ts new file mode 100644 index 0000000..47c2de0 --- /dev/null +++ b/src/tests/fieldMatcher.test.ts @@ -0,0 +1,153 @@ +import { describe, it, expect } from 'vitest'; +import { FieldMatcher } from '../services/fieldMatcher'; +import type { ResumeData, FormField } from '../types'; + +describe('FieldMatcher', () => { + const mockResumeData: ResumeData = { + personalInfo: { + fullName: 'John Doe', + email: 'john.doe@example.com', + phone: '555-123-4567', + address: '123 Main St', + city: 'San Francisco', + state: 'CA', + zipCode: '94102', + country: 'USA', + linkedIn: 'https://linkedin.com/in/johndoe', + website: 'https://johndoe.com', + }, + workExperience: [ + { + company: 'Tech Corp', + position: 'Senior Developer', + startDate: '2020-01', + endDate: '2023-12', + description: 'Built amazing things', + current: true, + }, + ], + education: [ + { + institution: 'State University', + degree: 'Bachelor of Science', + field: 'Computer Science', + graduationDate: '2019-05', + gpa: '3.8', + }, + ], + skills: ['JavaScript', 'TypeScript', 'React', 'Node.js'], + summary: 'Experienced software developer with 5+ years of experience.', + }; + + const createMockField = ( + label: string, + name: string, + id: string + ): FormField => ({ + element: document.createElement('input'), + type: 'text', + name, + id, + label, + value: '', + }); + + it('should match full name field', () => { + const matcher = new FieldMatcher(mockResumeData); + const field = createMockField('Full Name', 'fullName', 'full-name'); + const mappings = matcher.matchFields([field]); + + expect(mappings).toHaveLength(1); + const firstMapping = mappings[0]; + expect(firstMapping).toBeDefined(); + if (firstMapping) { + expect(firstMapping.value).toBe('John Doe'); + } + }); + + it('should match email field', () => { + const matcher = new FieldMatcher(mockResumeData); + const field = createMockField('Email Address', 'email', 'email-input'); + const mappings = matcher.matchFields([field]); + + expect(mappings).toHaveLength(1); + expect(mappings[0]?.value).toBe('john.doe@example.com'); + }); + + it('should match phone field', () => { + const matcher = new FieldMatcher(mockResumeData); + const field = createMockField('Phone Number', 'phone', 'phone-input'); + const mappings = matcher.matchFields([field]); + + expect(mappings).toHaveLength(1); + expect(mappings[0]?.value).toBe('555-123-4567'); + }); + + it('should match company field with latest work experience', () => { + const matcher = new FieldMatcher(mockResumeData); + const field = createMockField( + 'Current Company', + 'company', + 'company-input' + ); + const mappings = matcher.matchFields([field]); + + expect(mappings).toHaveLength(1); + expect(mappings[0]?.value).toBe('Tech Corp'); + }); + + it('should match first name field', () => { + const matcher = new FieldMatcher(mockResumeData); + const field = createMockField('First Name', 'firstName', 'first-name'); + const mappings = matcher.matchFields([field]); + + expect(mappings).toHaveLength(1); + expect(mappings[0]?.value).toBe('John'); + }); + + it('should match last name field', () => { + const matcher = new FieldMatcher(mockResumeData); + const field = createMockField('Last Name', 'lastName', 'last-name'); + const mappings = matcher.matchFields([field]); + + expect(mappings).toHaveLength(1); + expect(mappings[0]?.value).toBe('Doe'); + }); + + it('should not match fields with empty values', () => { + const emptyResumeData: ResumeData = { + ...mockResumeData, + personalInfo: { + ...mockResumeData.personalInfo, + fullName: '', + email: '', + }, + }; + + const matcher = new FieldMatcher(emptyResumeData); + const fields = [ + createMockField('Full Name', 'fullName', 'full-name'), + createMockField('Email', 'email', 'email'), + ]; + const mappings = matcher.matchFields(fields); + + expect(mappings).toHaveLength(0); + }); + + it('should match multiple fields correctly', () => { + const matcher = new FieldMatcher(mockResumeData); + const fields = [ + createMockField('Full Name', 'fullName', 'full-name'), + createMockField('Email', 'email', 'email'), + createMockField('Phone', 'phone', 'phone'), + createMockField('City', 'city', 'city'), + ]; + const mappings = matcher.matchFields(fields); + + expect(mappings).toHaveLength(4); + expect(mappings[0]?.value).toBe('John Doe'); + expect(mappings[1]?.value).toBe('john.doe@example.com'); + expect(mappings[2]?.value).toBe('555-123-4567'); + expect(mappings[3]?.value).toBe('San Francisco'); + }); +}); diff --git a/src/types/browser.d.ts b/src/types/browser.d.ts new file mode 100644 index 0000000..cdf260a --- /dev/null +++ b/src/types/browser.d.ts @@ -0,0 +1,5 @@ +// Type definitions for browser API +///