본문으로 건너뛰기
Download Manager Plus

개발자용

링크나 JavaScript로 어떤 웹사이트에서든 Download Manager Plus에 다운로드를 보내요.

“Download Manager Plus에 추가” 버튼

버튼처럼 보이는 링크예요. JavaScript 없이도 동작하고, 도우미 스크립트가 있으면 브리지를 쓸 수 있을 때 브리지를 사용해요.

미리보기

Download Manager Plus에 추가
HTML
<a
  class="dmplus-button"
  href="https://download.extension.lat/add?name=manual.pdf&url=https%3A%2F%2Fexample.com%2Ffiles%2Fmanual.pdf"
  data-dmplus-url="https://example.com/files/manual.pdf"
  data-dmplus-name="manual.pdf"
  rel="nofollow"
>
  Download Manager Plus에 추가
</a>

<style>
  .dmplus-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    border-radius: 999px;
    background: #a3e635;
    color: #1a2e05;
    font: 600 0.875rem/1 system-ui, sans-serif;
    text-decoration: none;
  }
  .dmplus-button:focus-visible {
    outline: 2px solid #1a2e05;
    outline-offset: 2px;
  }
</style>

도우미 스크립트

window.DownloadManagerPlus를 제공하는 의존성 없는 작은 스크립트예요. TypeScript 타입은 dmplus.d.ts.

HTML
<script src="https://download.extension.lat/sdk/dmplus.js" defer></script>

<!-- 선택 사항: data-dmplus-url이 있는 링크는 브리지를 사용해요. -->
<script src="https://download.extension.lat/sdk/dmplus.js" data-dmplus-auto defer></script>

script 태그에 data-dmplus-auto를 넣으면 data-dmplus-url이 있는 링크가 브리지를 사용해요. 사용자가 작성한 링크를 보여 주는 페이지에서는 이렇게 하지 마세요. 신뢰한 사이트에서는 브리지가 묻지 않고 다운로드해요.

JavaScript
// 사이트에서 브리지를 쓸 수 있으면 브리지를 쓰고, 아니면 범용 링크를 열어요.
const result = await window.DownloadManagerPlus.addDownload({
  url: "https://example.com/files/manual.pdf",
  name: "manual.pdf",
});

if ("requestId" in result) {
  const state = await window.DownloadManagerPlus.bridge.status(result.requestId);
  console.log(state.status); // "pending", "downloading", "complete"…
}

JavaScript 브리지

사용자가 웹사이트의 다운로드 전송을 허용하거나(시작 안내는 모든 사이트에 이것을 제안해요) 확장 프로그램 아이콘에서 사이트를 허용하면, 페이지는 window.postMessage로 다운로드를 요청하고 상태를 확인할 수 있어요. 사이트를 신뢰함(https)으로 표시하지 않으면 사용자는 여전히 각 다운로드를 확인해요.

메시지
이름설명
dmplus:add다운로드를 요청해요. url과 선택 항목 fileName, folder를 보내요.
dmplus:status이 페이지가 요청한 다운로드의 상태를 확인해요.
dmplus:result확장 프로그램의 응답이에요. 보낸 id와 같아요.
dmplus:ready확장 프로그램이 페이지에서 브리지가 활성임을 알려요.
dmplus:ping브리지가 활성인지 물어요. 확장 프로그램은 dmplus:ready로 답해요.
JavaScript
// 도우미 스크립트 없이, postMessage로 같은 프로토콜을 써요.
window.addEventListener("message", (event) => {
  if (event.source !== window) return;
  if (event.data?.source === "dmplus-extension" && event.data.type === "dmplus:result") {
    console.log(event.data.id, event.data.result);
  }
});

window.postMessage(
  {
    id: crypto.randomUUID(),
    request: { url: "https://example.com/files/manual.pdf", fileName: "manual.pdf", v: 1 },
    source: "dmplus",
    type: "dmplus:add",
  },
  location.origin
);

레퍼런스

상태

상태
이름설명
pending사용자가 다운로드를 확인하기를 기다리는 중이에요.
rejected사용자가 거절했거나 창을 닫았어요.
downloading다운로드하는 중이에요.
complete다운로드가 끝났어요.
failed다운로드를 완료하지 못했어요.

오류 코드

오류 코드
이름설명
invalid-request잘못된 메시지, http(s)가 아닌 주소, 또는 로컬 네트워크 주소예요.
unsupported-version이 페이지가 확장 프로그램보다 새로운 프로토콜 버전을 사용해요.
rate-limited이 사이트에서 분당 10회를 넘은 요청이에요.
too-many-pending이미 확인을 기다리는 요청이 있어요.
not-found그 ID가 없거나, 이 페이지가 요청한 것이 아니에요.
internal내부 오류예요. 다시 시도해 주세요.

제한과 개인정보

http(s) 주소만 허용되며, 사용자 지정 헤더나 쿠키는 없어요. 각 사이트는 분당 최대 10회 요청할 수 있고, 자신이 요청한 다운로드의 상태만 받아요. 공개 사이트는 사용자의 로컬 네트워크에 있는 파일을 요청할 수 없어요.