Google Sheet Preview

VS Code extension to:

• View all columns (headers) of a Google Sheet
• Search for a word across all cells of a sheet

This works with publicly readable Google Sheets by using the built-in CSV export.

Features

• Paste a Google Sheets URL (the usual .../edit#gid=... link) or a direct CSV export URL
• Lists the column headers on the left
• Search box filters rows across all cells (case-insensitive)
• Shows up to 200 matching rows for quick inspection
• Reload button to refresh the sheet
• Optional GID input to switch sheet tabs (works when the spreadsheet ID is known)

Usage

1. Open the Command Palette and run Google Sheets: Open Preview.
2. Paste your Google Sheet link.
   • Example URL format: https://docs.google.com/spreadsheets/d/<ID>/edit#gid=<GID>
   • The extension converts it to CSV automatically: .../export?format=csv&gid=<GID>
3. The webview shows your column headers and provides a search box.
4. To switch tabs: enter a different gid and click Load.

한국어 가이드 (OAuth/일반 URL)

이 확장 기능은 2가지 방식으로 시트를 불러옵니다.

• 공개 CSV 방식: 시트가 공개라면 CSV로 바로 불러옵니다.
• Google API(OAuth) 방식: 공개가 아니라면 본인 계정 권한으로 Google API로 불러옵니다.

1) 준비: OAuth 클라이언트 ID 설정 (비공개 시트에 필요)

• Google Cloud Console에서 OAuth 클라이언트 ID 생성 (애플리케이션 유형: 데스크톱 앱)
• VS Code 설정에서 googleSheetPreview.google.clientId에 클라이언트 ID 입력
• 명령 팔레트 → “Google 시트: 계정 연결 (OAuth)” 실행 → 브라우저 로그인/동의
  • 동의 후 토큰이 안전하게 저장되며, 이후 자동으로 갱신됩니다.
  • 자동 인증이 되지 않는 환경(로컬 서버 차단 등)에서는 메시지의 “코드 붙여넣기”를 눌러 리디렉션된 URL 전체를 붙여넣어도 됩니다.

2) 시트 열기 (URL 입력 방법)

• 명령 팔레트 → “Google 시트: 미리보기 열기”

• 다음과 같은 “일반 편집 URL”을 그대로 붙여넣어도 됩니다 (OAuth 연동 시 권장):

  예) https://docs.google.com/spreadsheets/d/<스프레드시트ID>/edit#gid=<탭GID>

• 제공하신 URL 예시(탭 GID 없음):

  https://docs.google.com/spreadsheets/d/1F9OHp2zjP934MR9H_yTw88a8DhtH9wYY4uzCgiRWlHA/edit?usp=sharing

  • 이 링크는 #gid=...가 없으므로 기본 탭(보통 0)을 먼저 시도합니다.
  • OAuth가 연결되어 있으면 상단의 “시트” 드롭다운이 활성화됩니다. 원하는 탭을 드롭다운에서 선택하면 즉시 전환됩니다.
  • 또는 상단의 GID 입력 란에 원하는 GID를 입력하고 “불러오기”를 눌러도 됩니다.

참고: Google Sheets에서 특정 탭으로 이동한 뒤 브라우저 주소의 #gid=... 값을 복사하면 해당 탭의 GID를 알 수 있습니다.

3) 화면 구성과 동작

• 상단 검색창: 모든 셀에서 단어 검색 (대소문자 무시)
• 시트 드롭다운: OAuth로 불러온 탭 목록 표시, 선택 시 해당 탭 로드
• GID 입력/불러오기: GID를 직접 아는 경우 빠르게 전환
• 새로고침: 현재 탭의 데이터를 다시 불러옴
• 좌측 “열”: 첫 번째 행(헤더) 표시
• 결과 표: 검색 결과 최대 200행까지만 미리보기로 표시

4) 자주 묻는 질문

• CSV로는 안 되는데 API로는 되는 이유는?

  • CSV는 로그인 쿠키가 없으면 접근이 막힐 수 있습니다. OAuth는 본인 계정 권한으로 API 호출하므로 비공개 시트도 접근 가능합니다(읽기 전용 범위).

• 스코프/보안은?

  • 사용 스코프: spreadsheets.readonly (읽기 전용)
  • 토큰은 VS Code Secret Storage에 저장되며, 필요 시 “Google 시트: 계정 연결 해제”로 삭제할 수 있습니다.

Notes:

• The sheet must be publicly readable (or at least accessible without authentication) for CSV export to work.
• If you need private access, you’d need to add OAuth/Service Account flow, which is not implemented in this minimal version.

Development

• Install deps: npm install
• Build: npm run compile
• F5 to launch Extension Development Host

Project structure:

• src/extension.ts – registers the preview command and hosts the webview
• src/utils.ts – URL parsing, HTTPS fetch, and a small CSV parser

Roadmap / Ideas

• Multiple sheet selection (list tabs via metadata)
• Support private sheets via OAuth / Service Account
• Larger result paging and column hide/show toggles
• Save recent sheet URLs per-workspace