chrome extension · draw on the web

Draw on any page. It's still there tomorrow.

Free drawing tools that only put pixels on your screen lose the annotation the moment you scroll or reload. webmark stores what you drew as a shape tied to the page — not a picture of it.

↓ Download webmark v0.5.1 .zip · unpacked install below · what's new
the kit

Six tools, one keystroke each

Pen P
Highlighter H
Line L
Rectangle R
Ellipse O
Eraser E

Plus select & move (S), text notes (T), crop (C), undo/redo, a region screenshot, and JSON export — all without opening a menu.

why it doesn't drift away

Coordinates, not pixels

Canvas-based tools draw on the viewport — scroll, and the ink stays where the window was, not where the content went. webmark's DOM-anchoring ties each annotation to the element under it, and follows that element through reflows.

Pixel coordinates
Drift after a layout reflow, measured across test pages
155–1024px
DOM-anchored (v2)
Median drift after the same reflows
0px

Honest median, not a guarantee — dense multi-column layouts can still shift an individual mark by up to ~410px. Full numbers in the project's own SPIKE-2 results.

where it lives

On your device. That's it.

Annotations save automatically per URL — open the page, they're there. Files (local PDFs and images) get their own viewer, keyed by content hash. Nothing is uploaded, because nothing is ever sent anywhere.

zero network requests local storage only JSON export / import Manifest V3
install

Not on the Web Store yet

webmark is distributed directly for now — Chrome won't install a downloaded .zip in one click, so it's a short manual load:

Download the .zip above and unzip it anywhere on disk.

Open chrome://extensions in a new tab.

Turn on Developer mode (top-right toggle).

Click Load unpacked and select the unzipped folder.

версия 0.5.1 · 28 сентября 2026

Что нового

главное

Панель инструментов больше не прячется под полоской «Открыть файл»

Открываешь картинку с диска — и панели не видно: её целиком закрывала верхняя полоска «Открыть файл либо перетащите изображение или PDF-файл сюда». Со стороны выглядело так, будто файл открылся, а расширение на это не отреагировало.

Панель теперь встаёт под полоской и следит за её высотой: на узком окне полоска переносится в две строки — панель уезжает ниже вместе с ней. Перетаскиванием загнать панель обратно под полоску тоже нельзя. Заодно только что открытый файл начинается под панелью, а не под ней же спрятанным верхним краем, и подсказка про перетаскивание пропадает, когда файл уже открыт.

было в 0.5.0

Скриншот во вьюере наконец работает

Открываешь картинку через иконку папки, рисуешь по ней, жмёшь «скриншот» — и до сих пор в ответ приходило «Скриншот недоступен на этой странице». То есть кнопка не работала ровно там, ради чего вьюер и сделан.

Причина: вьюер — внутренняя страница расширения, и обычный системный снимок экрана на ней запрещён браузером. Теперь вьюер собирает кадр сам из своих же пикселей. Побочный плюс: панель инструментов и верхняя полоска с именем файла в кадр не попадают вообще — их больше не нужно прятать.

фича

Снимок обрезается по картинке, а не по окну

Маленькое изображение раньше сохранялось PNG-файлом во весь экран, с широкими серыми полями вокруг. Теперь в кадр попадает сам файл плюс то, что ты на нём нарисовал — даже если штрих чуть вылез за край.

Если сам выделил область кропом (C) — она главнее: работает ровно как раньше.

фича

Узнаваемые иконки на панели

Ластик, кроп, «снимок в файл», «снимок в буфер» и «открыть файл» — вместо эмодзи, которые на каждой системе выглядели по-своему и мало что говорили о действии. Ориентир — привычные обозначения из графических редакторов.

багфиксы

Исправлено

  • Внутреннее правило вёрстки складывало все новые иконки в один угол экрана — сужено так, чтобы касаться только холста для рисования.
  • Кнопки «экспорт» и «импорт» пока остаются значками-квадратиками: подходящих символов нет в системном шрифте, иконки для них ещё не нарисованы.
для тестировщика

Что проверить

Часть 1 — то, что менялось в этой версии. Часть 2 — короткий смоук: это не трогали, но убедиться стоит. Если пункт ведёт себя не так — важно, на каком сайте и что было на экране.

Часть 1 · новое в 0.5.1

Иконка папки на панели → «Открыть файл» → любая картинка с диска.

  • Главное: открой картинку → панель инструментов видна целиком, ничем не перекрыта, и стоит под верхней полоской. Подсказки «либо перетащите изображение…» в полоске уже нет.
  • Сузь окно браузера так, чтобы верхняя полоска перенеслась в две строки → панель уезжает ниже вместе с ней, не заходит под неё.
  • Перетащи панель за «точки» слева вверх до упора → выше полоски она не встаёт.
  • Верхний край самой картинки панелью не закрыт.
  • Ниже — то, что появилось в 0.5.0, стоит перепроверить заодно:
  • Открой картинку, нарисуй по ней и нажми скриншот в файл → файл скачался, ошибки «Скриншот недоступен» нет. Открой файл глазами: картинка и рисунок на месте, панели инструментов и верхней полоски с именем файла в кадре нет.
  • То же самое кнопкой скриншот в буфер → вставь (Ctrl+V) в любой редактор — вставляется тот же кадр.
  • Возьми маленькую картинку → в скачанном PNG нет широких серых полей: кадр по размеру картинки.
  • Нарисуй штрих так, чтобы он чуть вылезал за край картинки → в кадре он не обрезан.
  • Теперь выдели область кропом (C) и сделай снимок → сохраняется ровно выделенная область, как и раньше.
  • То же самое с PDF: открыть, порисовать, снять скриншот.
  • Посмотри на панель инструментов: у ластика, кропа, двух кнопок снимка и кнопки «открыть файл» — картинки, а не эмодзи, каждая внутри своей кнопки, ничего не съехало в угол экрана. Наведение подсказывает, что делает кнопка.
  • Проверь панель на «тяжёлом» сайте (например, GitHub или новостной портал) — иконки видны, не пропали.

Часть 2 · смоук — не должно было сломаться

Быстрая проверка основного, 3–5 минут.

  • Нарисовать пером на любимом сайте → F5 → аннотации на месте, на бейдже верное число.
  • Поскроллить страницу вниз-вверх — рисунок держится за контент, а не за экран.
  • Ластик, выделение и перемещение (E, S) работают; Ctrl+Z / Ctrl+Shift+Z откатывают и возвращают.
  • Скриншот на обычной странице → файл скачался; открыть его глазами: аннотации в кадре есть, панели инструментов в кадре нет.
  • Кроп (C): выделить область → скриншот сохраняет только её.
  • Менеджер (≡): страницы в списке, «Открыть» ведёт куда надо, «Удалить» удаляет.
  • Esc → оверлей уходит, ссылки на странице снова кликаются.

Что прислать по каждому расхождению: адрес страницы, что делал, что ожидал, что увидел. Скриншот — если видно глазами. Если расширение «замолчало» целиком — загляни в chrome://extensions, нет ли там красной ошибки у webmark.