# @ce1pers/window-helpers

> Window Web APIs helpers powered by vanilla javascript.

Latest version **1.1.9** (published 2026-08-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install @ce1pers/window-helpers
pnpm add @ce1pers/window-helpers
yarn add @ce1pers/window-helpers
bun add @ce1pers/window-helpers
```

## Health

**Score 65/100 (B)** — status: active.

Positive: has types; no vulnerabilities; recently updated; high maintenance score; high quality score.

Warnings: low downloads; no esm support.

## Facts

| | |
|---|---|
| Version | 1.1.9 |
| Published | 2026-08-06 |
| First published | 2022-10-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 12.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | __coma__ |
| Maintainers | __coma__ |
| Keywords | window, webAPIs, helpers, vanilla, javascript, typescript, hook, hooks |

## Links

- npm: https://www.npmjs.com/package/@ce1pers/window-helpers
- Repository: https://github.com/code1iners/ce1pers
- Homepage: https://github.com/code1iners/ce1pers#readme
- Issues: https://github.com/code1iners/ce1pers/issues
- npm.io page: https://npm.io/package/@ce1pers/window-helpers

## Alternatives

- [@openai/codex-sdk](https://npm.io/package/@openai/codex-sdk.md) — 731.4K weekly downloads
- [babel-plugin-transform-react-jsx](https://npm.io/package/babel-plugin-transform-react-jsx.md) — 565.0K weekly downloads
- [babel-helper-remove-or-void](https://npm.io/package/babel-helper-remove-or-void.md) — 508.5K weekly downloads
- [@pnpm/store-controller-types](https://npm.io/package/@pnpm/store-controller-types.md) — 186.9K weekly downloads
- [react-native-signature-canvas](https://npm.io/package/react-native-signature-canvas.md) — 155.6K weekly downloads

## Recent versions

- 1.1.9 (latest) — 2026-08-06
- 1.1.8 — 2022-11-15
- 1.1.7 — 2022-11-08
- 1.1.6 — 2022-11-08
- 1.1.5 — 2022-11-08
- 1.1.4 — 2022-11-08
- 1.1.3 — 2022-11-08
- 1.1.2 — 2022-11-08
- 1.1.1 — 2022-11-08
- 1.1.0 — 2022-11-08
- 1.0.4 — 2022-10-01
- 1.0.3 — 2022-10-01
- 1.0.2 — 2022-10-01
- 1.0.1 — 2022-10-01
- 1.0.0 — 2022-10-01

## README

# @ce1pers/window-helpers

브라우저 popup과 `postMessage` 통신을 제어하는 vanilla JavaScript helper입니다. React hook이 아닙니다.

## 설치

```bash
npm install @ce1pers/window-helpers
```

## 공개 API

### `useWindow(inputs?)`

`open`, message 송수신, source/target origin 상태, event listener 제어 메서드를 반환합니다.

| 반환 API | 동작 |
| --- | --- |
| `open(input)` | `windowTarget`에 따라 현재 창 또는 새 browsing context를 열고 창 참조 반환 |
| `sendMessage(input)` | `to: "targetOrigin" | "sourceOrigin"`에 따라 메시지 전송, 성공 여부 반환 |
| `sendMessageToTargetOrigin`, `sendMessageToSourceOrigin` | 지정한 방향으로 `{ type, data }` 전송 |
| `getWindow`, `getSourceOrigin`, `getTargetOrigin` | 현재 상태 조회 |
| `setSourceOrigin`, `setTargetOrigin` | 현재 origin 상태 설정 |
| `openDeepLink(url)` | 현재 창을 deep link로 이동 |
| `subscribe`, `unsubscribe` | message·unload listener 등록·해제 |

`open` 입력에는 `targetOrigin`이 필수이고 `windowTarget`, `width`, `height`, `left`, `top`, `options`, `isPopup`, `callback`을 선택적으로 전달합니다. `windowTarget` 기본값은 `_self`이므로 현재 창을 이동하며, 새 창이나 탭을 열려면 `_blank` 또는 재사용할 이름을 전달해야 합니다. `sendMessage`에는 `to`, `type`, `data`가 모두 필요합니다.

```ts
import { useWindow } from "@ce1pers/window-helpers";

function onMessageCallback(event: MessageEvent) {
  if (event.origin !== "https://child.example.com") return;
  // event.data를 애플리케이션 계약에 따라 검증합니다.
}

const popup = useWindow({ onMessageCallback });
popup.open({
  targetOrigin: "https://child.example.com",
  windowTarget: "_blank",
  isPopup: true,
  width: 400,
  height: 400,
});

popup.sendMessage({
  to: "targetOrigin",
  type: "connection",
  data: { source: "parent" },
});
```

`targetOrigin`은 scheme과 host를 포함한 실제 origin으로 설정하고, 수신 측에서 `event.origin`을 검증해야 합니다. 이 패키지는 메시지 payload의 schema 검증을 제공하지 않습니다.

## 공개 타입

`OpenWindowInputs`, `SendMessageInputs`, `SendMessageToOriginInputs`, `UsePopupInputs`를 export합니다.

## 검증

```bash
npm run build
npm test
```

---
_Source: https://npm.io/package/@ce1pers/window-helpers · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._