Firefox 확장 프로그램의 키보드 단축키: 완전 가이드

I’m happy to translate the article for you, but I’ll need the full text of the post (the content you’d like translated). Could you please paste the article’s body here? Once I have the text, I’ll provide a Korean translation while preserving the source link, formatting, markdown, and any code blocks or URLs unchanged.

manifest.json 명령

전역 키보드 단축키(확장 프로그램이 포커스되지 않아도 사용할 수 있음)용:

{
  "commands": {
    "_execute_action": {
      "suggested_key": {
        "default": "Ctrl+Shift+W"
      },
      "description": "Open Weather & Clock Dashboard"
    },
    "toggle-theme": {
      "suggested_key": {
        "default": "Ctrl+Shift+D"
      },
      "description": "Toggle dark/light mode"
    }
  }
}

사용 가능한 수정자: Ctrl, Alt, Shift, MacCtrl (Mac Cmd 키)

참고: Windows에서는 Ctrl+Alt+* 조합이 차단됩니다. 크로스‑플랫폼 단축키를 위해 Ctrl+Shift+*를 사용하세요.

Source:

백그라운드에서 명령 듣기

browser.commands.onCommand.addListener((command) => {
  switch (command) {
    case 'toggle-theme':
      toggleTheme();
      break;
    // other commands...
  }
});

인‑페이지 키보드 내비게이션

새 탭 페이지 내에서 단축키를 사용하려면:

document.addEventListener('keydown', e => {
  // Don't intercept when user is typing
  if (isTypingContext()) return;

  switch (e.key) {
    case '/':
      e.preventDefault();
      document.getElementById('search-input').focus();
      break;
    case 'Escape':
      document.activeElement.blur();
      break;
    case 'd':
      if (e.ctrlKey) break; // Don't intercept Ctrl+D (bookmark)
      toggleTheme();
      break;
  }
});

function isTypingContext() {
  const tag = document.activeElement.tagName;
  return tag === 'INPUT' || tag === 'TEXTAREA' || document.activeElement.isContentEditable;
}

모든 키로 검색 포커스

일반적인 새 탭 패턴—아무 문자 키를 눌러도 검색창으로 이동합니다:

document.addEventListener('keydown', e => {
  if (isTypingContext()) return;
  if (e.ctrlKey || e.metaKey || e.altKey) return;
  if (e.key.length !== 1) return;

  const searchInput = document.getElementById('search-input');
  searchInput.focus();
  // Don't preventDefault — let the character go into the search box
});

키보드 단축키 표시

도움말 오버레이에 단축키 표시:

const SHORTCUTS = [
  { key: '/', description: 'Focus search' },
  { key: 'Esc', description: 'Clear focus' },
  { key: 'd', description: 'Toggle dark mode' },
  { key: '?', description: 'Show this help' },
];

document.addEventListener('keydown', e => {
  if (isTypingContext()) return;
  if (e.key === '?') {
    toggleHelpOverlay();
  }
});

사용자가 할당한 단축키 가져오기

사용자는 Firefox 확장 프로그램 관리자를 통해 단축키를 재할당할 수 있습니다. 하드코딩된 문자열이 아니라 실제 할당된 단축키를 항상 표시하세요:

async function getShortcutForCommand(commandName) {
  const commands = await browser.commands.getAll();
  const cmd = commands.find(c => c.name === commandName);
  return cmd?.shortcut || 'unassigned';
}

// Display in settings UI
const shortcut = await getShortcutForCommand('toggle-theme');
document.getElementById('shortcut-display').textContent = shortcut;

접근성: ARIA 키보드 패턴

맞춤 위젯 키보드 탐색을 위해 ARIA 저작 관행을 따르세요:

// Radio group keyboard navigation
function handleRadioKeydown(e, items) {
  const currentIndex = items.indexOf(document.activeElement);
  let newIndex;

  switch (e.key) {
    case 'ArrowDown':
    case 'ArrowRight':
      newIndex = (currentIndex + 1) % items.length;
      break;
    case 'ArrowUp':
    case 'ArrowLeft':
      newIndex = (currentIndex - 1 + items.length) % items.length;
      break;
    default:
      return;
  }

  e.preventDefault();
  items[newIndex].focus();
  items[newIndex].click();
}

일반적인 함정

• 브라우저 단축키를 덮어쓰지 말 것 – Ctrl+T, Ctrl+W, Ctrl+N, Ctrl+L, F5는 그대로 두어야 합니다.
• Mac과 Windows 모두에서 테스트할 것 – Mac 사용자는 Cmd를, Windows 사용자는 Ctrl을 사용합니다.
• 고정 키(sticky keys)를 기억할 것 – 일부 사용자는 키보드만으로 탐색합니다; Tab/Shift+Tab 흐름을 테스트하세요.
• 포커스 표시기를 명확히 할 것 – 키보드 사용자를 위해 :focus-visible는 필수입니다.

/* Good focus indicator */
:focus-visible {
  outline: 2px solid var(--accent-color);
  outline-offset: 2px;
}

/* Never do this */
* { outline: none; }

Weather & Clock Dashboard — 무료 Firefox 새 탭 확장 프로그램으로 전체 키보드 탐색을 지원합니다. /를 누르면 검색에 포커스가 이동하고, Esc는 포커스를 해제합니다. MIT 라이선스.