1<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8" data-next-head=""/><meta name="viewport" content="width=device-width, initial-scale=1" data-next-head=""/><title data-next-head="">Tools - @heppokofrontend</title><meta name="description" content="These are homemade tools that can be used for both daily and stream.If you find any glitches, please let me know." data-next-head=""/><meta property="og:url" content="https://heppokofrontend.dev/tools" data-next-head=""/><meta property="og:type" content="article" data-next-head=""/><meta property="og:type" content="article" data-next-head=""/><meta property="og:title" content="Tools - @heppokofrontend" data-next-head=""/><meta property="og:description" content="These are homemade tools that can be used for both daily and stream.If you find any glitches, please let me know." data-next-head=""/><meta property="og:site_name" content="@heppokofrontend" data-next-head=""/><meta property="og:image" content="https://heppokofrontend.dev/ogp.png" data-next-head=""/><meta name="twitter:card" content="summary" data-next-head=""/><meta name="google-site-verification" content="7uBLndYIK5gfOyG8Gmg6fAsJt8l1tvU8SuKw4dAI2mc" data-next-head=""/><link rel="shortcut icon" href="/favicon.ico" data-next-head=""/><link rel="apple-touch-icon" href="/apple-touch-icon.png" data-next-head=""/><link rel="canonical" href="https://heppokofrontend.dev/tools" data-next-head=""/><meta name="format-detection" content="telephone=no"/><link rel="preload" href="/_next/static/chunks/3tp8o3xblgnsq.css" as="style"/><link rel="preload" href="/_next/static/chunks/357yj-6-_xu9e.css" as="style"/><link rel="preload" href="/_next/static/chunks/24qypk6m2r2qi.css" as="style"/><link rel="stylesheet" href="/_next/static/chunks/3tp8o3xblgnsq.css" data-n-g=""/><link rel="stylesheet" href="/_next/static/chunks/357yj-6-_xu9e.css" data-n-g=""/><link rel="stylesheet" href="/_next/static/chunks/24qypk6m2r2qi.css" data-n-p=""/><noscript data-n-css=""></noscript>
1<script src="/_next/static/chunks/44atk915wj_9d.js" defer=""></script>
1<script src="/_next/static/chunks/268nsc3fo3v30.js" defer=""></script>
1<script src="/_next/static/chunks/1pmp79l4tlfwt.js" defer=""></script>
1<script src="/_next/static/chunks/2rb05-9p91bi0.js" defer=""></script>
1<script src="/_next/static/chunks/turbopack-2b12cy1fxs4qu.js" defer=""></script>
1<script src="/_next/static/chunks/2p5y04oah6a8k.js" defer=""></script>
1<script src="/_next/static/chunks/turbopack-43dier2qjb8r3.js" defer=""></script>
1<script src="/_next/static/P_zKmBMBbt9-WGpubvA1M/_buildManifest.js" defer=""></script>
1<script src="/_next/static/P_zKmBMBbt9-WGpubvA1M/_ssgManifest.js" defer=""></script>
1<script src="/_next/static/P_zKmBMBbt9-WGpubvA1M/_clientMiddlewareManifest.js" defer=""></script>
1</head><body><div id="__next"><div class="Default-module__0zAQwG__container"><header id="header" class="Header-module__mUfDba__header "><div><div class="Header-module__mUfDba__primary"><h1 class="Header-module__mUfDba__h1"><a class="SiteName-module__PLVO2G__link" href="/en">@heppokofrontend</a></h1><div><ul class="LanguageSwitch-module__PWL4SW__lang"><li class="LanguageSwitch-module__PWL4SW__langItem"><a aria-current="page" class="LanguageSwitch-module__PWL4SW__langLink">en</a></li><li class="LanguageSwitch-module__PWL4SW__langItem"><a class="LanguageSwitch-module__PWL4SW__langLink" href="/tools">ja</a></li></ul></div></div><div class="Header-module__mUfDba__secondary"><nav></nav><p class="Header-module__mUfDba__p">Here is a private playground.</p><p class="Header-module__mUfDba__p">Please keep in mind that we do not plan to maintain it accurately.</p></div></div></header><main class="Default-module__0zAQwG__main"><div class="PageHeader-module__oXT_6G__wrap"><h1 class="PageTitle-module__pwGlXG__title">Tools</h1><p>These are homemade tools that can be used for both daily and stream.</p><p>If you find any glitches, please let me know.</p></div><div class="Text-module__jzhKSq__wrap"><p class="Page-module__3_q_3W__bold">â <a href="/en/webdev">Click here for developer tools!</a></p></div><details class="Disclosure-module__zpRfmG__details" open=""><summary class="Disclosure-module__zpRfmG__summary"><span class="Disclosure-module__zpRfmG__title">Filter</span></summary><div class="Disclosure-module__zpRfmG__content"><form><ul class="Page-module__3_q_3W__filterList"><li><label class="Page-module__3_q_3W__filterListLabel"><input type="checkbox" class="Page-module__3_q_3W__filterListInput"/>Browser</label></li><li><label class="Page-module__3_q_3W__filterListLabel"><input type="checkbox" class="Page-module__3_q_3W__filterListInput"/>For streamer</label></li><li><label class="Page-module__3_q_3W__filterListLabel"><input type="checkbox" class="Page-module__3_q_3W__filterListInput"/>OBS: Browser</label></li><li><label class="Page-module__3_q_3W__filterListLabel"><input type="checkbox" class="Page-module__3_q_3W__filterListInput"/>OBS: Window Capture</label></li></ul><p class="Page-module__3_q_3W__filterKeyword"><label>ãã¼ã¯ã¼ã</label><input type="text" value=""/></p><div class="Page-module__3_q_3W__filterFooter"><p class="Page-module__3_q_3W__filterFooterApplyButton"><button type="submit" class="FunctionButton-module__MpKObW__button">Apply</button></p><p class="Page-module__3_q_3W__filterFooterCount" aria-live="polite">All will be displayed</p></div></form></div></details><div class="mt-10" aria-live="polite"><ul class="grid gap-8 sm:grid-cols-2 sm:gap-10"><li><a class="group relative grid grid-cols-[min(20%,80px)_1fr] grid-rows-[auto_1fr] gap-x-[12px] rounded pr-[24px] no-underline before:pointer-events-none before:absolute before:-top-2 before:-left-2 before:-z-1 before:size-[calc(100%+1rem)] before:rounded before:bg-gray-100 before:opacity-0 before:transition-opacity hover:before:opacity-100 after:absolute after:inset-y-0 after:right-[8px] after:my-auto after:size-2 after:rotate-45 after:border-t after:border-r after:border-black after:transition-[margin] after:duration-200 after:ease-out after:content-[''] hover:after:mr-[-4px]" href="/en/tools/obs/what-time-is-it-now"><span class="col-start-2 col-end-3 row-start-1 text-sm font-bold group-hover:underline">The current time for OBS</span><span class="col-start-1 col-end-2 row-start-1 -row-end-1 grid aspect-square w-full place-items-center rounded-sm bg-white text-[32px] border border-gray-300" aria-hidden="true">ð</span><div class="col-start-2 col-end-3"><p class="text-sm"></p><ul class="mt-1.5 flex flex-wrap gap-1 text-xs leading-none"><li class="rounded px-2 py-1 bg-[#468af9] text-white">Browser</li><li class="rounded px-2 py-1 bg-[#c3345b] text-white">For streamer</li><li class="rounded px-2 py-1 bg-[#152251] text-white">OBS: Browser</li></ul></div></a></li><li><a class="group relative grid grid-cols-[min(20%,80px)_1fr] grid-rows-[auto_1fr] gap-x-[12px] rounded pr-[24px] no-underline before:pointer-events-none before:absolute before:-top-2 before:-left-2 before:-z-1 before:size-[calc(100%+1rem)] before:rounded before:bg-gray-100 before:opacity-0 before:transition-opacity hover:before:opacity-100 after:absolute after:inset-y-0 after:right-[8px] after:my-auto after:size-2 after:rotate-45 after:border-t after:border-r after:border-black after:transition-[margin] after:duration-200 after:ease-out after:content-[''] hover:after:mr-[-4px]" href="/en/tools/copy-vtube-json"><span class="col-start-2 col-end-3 row-start-1 text-sm font-bold group-hover:underline">copy.vtube.json</span><span class="col-start-1 col-end-2 row-start-1 -row-end-1 grid aspect-square w-full place-items-center rounded-sm bg-white text-[32px] border border-gray-300" aria-hidden="true">ð</span><div class="col-start-2 col-end-3"><p class="text-sm"></p><ul class="mt-1.5 flex flex-wrap gap-1 text-xs leading-none"><li class="rounded px-2 py-1 bg-[#468af9] text-white">Browser</li></ul></div></a></li><li><a class="group relative grid grid-cols-[min(20%,80px)_1fr] grid-rows-[auto_1fr] gap-x-[12px] rounded pr-[24px] no-underline before:pointer-events-none before:absolute before:-top-2 before:-left-2 before:-z-1 before:size-[calc(100%+1rem)] before:rounded before:bg-gray-100 before:opacity-0 before:transition-opacity hover:before:opacity-100 after:absolute after:inset-y-0 after:right-[8px] after:my-auto after:size-2 after:rotate-45 after:border-t after:border-r after:border-black after:transition-[margin] after:duration-200 after:ease-out after:content-[''] hover:after:mr-[-4px]" href="/en/tools/notice-tweet-generator"><span class="col-start-2 col-end-3 row-start-1 text-sm font-bold group-hover:underline">Notice Tweet Generator</span><span class="col-start-1 col-end-2 row-start-1 -row-end-1 grid aspect-square w-full place-items-center rounded-sm bg-white text-[32px] border border-gray-300" aria-hidden="true">ð¢</span><div class="col-start-2 col-end-3"><p class="text-sm"></p><ul class="mt-1.5 flex flex-wrap gap-1 text-xs leading-none"><li class="rounded px-2 py-1 bg-[#468af9] text-white">Browser</li></ul></div></a></li><li><a class="group relative grid grid-cols-[min(20%,80px)_1fr] grid-rows-[auto_1fr] gap-x-[12px] rounded pr-[24px] no-underline before:pointer-events-none before:absolute before:-top-2 before:-left-2 before:-z-1 before:size-[calc(100%+1rem)] before:rounded before:bg-gray-100 before:opacity-0 before:transition-opacity hover:before:opacity-100 after:absolute after:inset-y-0 after:right-[8px] after:my-auto after:size-2 after:rotate-45 after:border-t after:border-r after:border-black after:transition-[margin] after:duration-200 after:ease-out after:content-[''] hover:after:mr-[-4px]" href="/en/tools/create-no-mention-text"><span class="col-start-2 col-end-3 row-start-1 text-sm font-bold group-hover:underline">Create No Mention Text</span><span class="col-start-1 col-end-2 row-start-1 -row-end-1 grid aspect-square w-full place-items-center rounded-sm bg-white text-[32px] border border-gray-300" aria-hidden="true">ð</span><div class="col-start-2 col-end-3"><p class="text-sm"></p><ul class="mt-1.5 flex flex-wrap gap-1 text-xs leading-none"><li class="rounded px-2 py-1 bg-[#468af9] text-white">Browser</li></ul></div></a></li><li><a target="_blank" rel="noopener noreferrer" class="group relative grid grid-cols-[min(20%,80px)_1fr] grid-rows-[auto_1fr] gap-x-[12px] rounded pr-[24px] no-underline before:pointer-events-none before:absolute before:-top-2 before:-left-2 before:-z-1 before:size-[calc(100%+1rem)] before:rounded before:bg-gray-100 before:opacity-0 before:transition-opacity hover:before:opacity-100" href="https://github.com/heppokofrontend/play-sound-on-keydown"><span class="col-start-2 col-end-3 row-start-1 text-sm font-bold group-hover:underline">Play-sound-on-keydown<img alt="Open the link in new tab" loading="lazy" width="14" height="14" decoding="async" data-nimg="1" class="NewTabIcon-module__Pshs5G__img" style="color:transparent" src="/new-window.svg"/></span><span class="col-start-1 col-end-2 row-start-1 -row-end-1 grid aspect-square w-full place-items-center rounded-sm bg-white text-[32px] border border-gray-300" aria-hidden="true">ð</span><div class="col-start-2 col-end-3"><p class="text-sm"></p><ul class="mt-1.5 flex flex-wrap gap-1 text-xs leading-none"><li class="rounded px-2 py-1 bg-[#c3345b] text-white">For streamer</li></ul></div></a></li><li><a target="_blank" rel="noopener noreferrer" class="group relative grid grid-cols-[min(20%,80px)_1fr] grid-rows-[auto_1fr] gap-x-[12px] rounded pr-[24px] no-underline before:pointer-events-none before:absolute before:-top-2 before:-left-2 before:-z-1 before:size-[calc(100%+1rem)] before:rounded before:bg-gray-100 before:opacity-0 before:transition-opacity hover:before:opacity-100" href="https://github.com/heppokofrontend/obs-analog-clock"><span class="col-start-2 col-end-3 row-start-1 text-sm font-bold group-hover:underline">OBS Analog Clock<img alt="Open the link in new tab" loading="lazy" width="14" height="14" decoding="async" data-nimg="1" class="NewTabIcon-module__Pshs5G__img" style="color:transparent" src="/new-window.svg"/></span><span class="col-start-1 col-end-2 row-start-1 -row-end-1 grid aspect-square w-full place-items-center rounded-sm bg-white text-[32px] border border-gray-300" aria-hidden="true">ð°ï¸</span><div class="col-start-2 col-end-3"><p class="text-sm"></p><ul class="mt-1.5 flex flex-wrap gap-1 text-xs leading-none"><li class="rounded px-2 py-1 bg-[#c3345b] text-white">For streamer</li><li class="rounded px-2 py-1 bg-[#152251] text-white">OBS: Browser</li></ul></div></a></li><li><a class="group relative grid grid-cols-[min(20%,80px)_1fr] grid-rows-[auto_1fr] gap-x-[12px] rounded pr-[24px] no-underline before:pointer-events-none before:absolute before:-top-2 before:-left-2 before:-z-1 before:size-[calc(100%+1rem)] before:rounded before:bg-gray-100 before:opacity-0 before:transition-opacity hover:before:opacity-100 after:absolute after:inset-y-0 after:right-[8px] after:my-auto after:size-2 after:rotate-45 after:border-t after:border-r after:border-black after:transition-[margin] after:duration-200 after:ease-out after:content-[''] hover:after:mr-[-4px]" href="/en/tools/obs/participation"><span class="col-start-2 col-end-3 row-start-1 text-sm font-bold group-hover:underline">Participation members list for OBS</span><span class="col-start-1 col-end-2 row-start-1 -row-end-1 grid aspect-square w-full place-items-center rounded-sm bg-white text-[32px] border border-gray-300" aria-hidden="true">ð¥</span><div class="col-start-2 col-end-3"><p class="text-sm"></p><ul class="mt-1.5 flex flex-wrap gap-1 text-xs leading-none"><li class="rounded px-2 py-1 bg-[#468af9] text-white">Browser</li><li class="rounded px-2 py-1 bg-[#c3345b] text-white">For streamer</li><li class="rounded px-2 py-1 bg-[#152251] text-white">OBS: Window Capture</li></ul></div></a></li><li><a class="group relative grid grid-cols-[min(20%,80px)_1fr] grid-rows-[auto_1fr] gap-x-[12px] rounded pr-[24px] no-underline before:pointer-events-none before:absolute before:-top-2 before:-left-2 before:-z-1 before:size-[calc(100%+1rem)] before:rounded before:bg-gray-100 before:opacity-0 before:transition-opacity hover:before:opacity-100 after:absolute after:inset-y-0 after:right-[8px] after:my-auto after:size-2 after:rotate-45 after:border-t after:border-r after:border-black after:transition-[margin] after:duration-200 after:ease-out after:content-[''] hover:after:mr-[-4px]" href="/en/tools/obs/watchalong"><span class="col-start-2 col-end-3 row-start-1 text-sm font-bold group-hover:underline">Watchalong Stopwatch for OBS</span><span class="col-start-1 col-end-2 row-start-1 -row-end-1 grid aspect-square w-full place-items-center rounded-sm bg-white text-[32px] border border-gray-300" aria-hidden="true">â±ï¸</span><div class="col-start-2 col-end-3"><p class="text-sm"></p><ul class="mt-1.5 flex flex-wrap gap-1 text-xs leading-none"><li class="rounded px-2 py-1 bg-[#468af9] text-white">Browser</li><li class="rounded px-2 py-1 bg-[#c3345b] text-white">For streamer</li><li class="rounded px-2 py-1 bg-[#152251] text-white">OBS: Window Capture</li></ul></div></a></li><li><a class="group relative grid grid-cols-[min(20%,80px)_1fr] grid-rows-[auto_1fr] gap-x-[12px] rounded pr-[24px] no-underline before:pointer-events-none before:absolute before:-top-2 before:-left-2 before:-z-1 before:size-[calc(100%+1rem)] before:rounded before:bg-gray-100 before:opacity-0 before:transition-opacity hover:before:opacity-100 after:absolute after:inset-y-0 after:right-[8px] after:my-auto after:size-2 after:rotate-45 after:border-t after:border-r after:border-black after:transition-[margin] after:duration-200 after:ease-out after:content-[''] hover:after:mr-[-4px]" href="/en/tools/display-as-rgb-light"><span class="col-start-2 col-end-3 row-start-1 text-sm font-bold group-hover:underline">Use the display as RGB light</span><span class="col-start-1 col-end-2 row-start-1 -row-end-1 grid aspect-square w-full place-items-center rounded-sm bg-white text-[32px] border border-gray-300" aria-hidden="true">ð¡</span><div class="col-start-2 col-end-3"><p class="text-sm"></p><ul class="mt-1.5 flex flex-wrap gap-1 text-xs leading-none"><li class="rounded px-2 py-1 bg-[#468af9] text-white">Browser</li></ul></div></a></li></ul></div><h2 class="HeadingLevel2-module__LIvtyq__h2 common-module__yXWdca__h2">Google Chrome Extensions</h2><p class="mb-10"><img alt="Available in the Chrom Web Store" loading="lazy" width="340" height="96" decoding="async" data-nimg="1" class="Page-module__3_q_3W__chorme" style="color:transparent" srcSet="/_next/image?url=%2Ftools%2Fimages%2FiNEddTyWiMfLSwFD6qGq.png&w=384&q=75 1x, /_next/image?url=%2Ftools%2Fimages%2FiNEddTyWiMfLSwFD6qGq.png&w=750&q=75 2x" src="/_next/image?url=%2Ftools%2Fimages%2FiNEddTyWiMfLSwFD6qGq.png&w=750&q=75"/></p><ul class="grid gap-8 sm:grid-cols-2 sm:gap-10"><li><a target="_blank" rel="noopener noreferrer" class="group relative grid grid-cols-[min(20%,80px)_1fr] grid-rows-[auto_1fr] gap-x-[12px] rounded pr-[24px] no-underline before:pointer-events-none before:absolute before:-top-2 before:-left-2 before:-z-1 before:size-[calc(100%+1rem)] before:rounded before:bg-gray-100 before:opacity-0 before:transition-opacity hover:before:opacity-100" href="https://chrome.google.com/webstore/detail/ollnnjepahcgphpjjhcfohpelmpldghj"><span class="col-start-2 col-end-3 row-start-1 text-sm font-bold group-hover:underline">Close duplicate tab<img alt="Open the link in new tab" loading="lazy" width="14" height="14" decoding="async" data-nimg="1" class="NewTabIcon-module__Pshs5G__img" style="color:transparent" src="/new-window.svg"/></span><span class="col-start-1 col-end-2 row-start-1 -row-end-1 grid aspect-square w-full place-items-center rounded-sm bg-white text-[32px]" aria-hidden="true"><img alt="" loading="lazy" width="80" height="80" decoding="async" data-nimg="1" class="size-[90%]" style="color:transparent" srcSet="/_next/image?url=%2Ftools%2Fimages%2Fchrome-extension-close-duplicate-tabs.png&w=96&q=75 1x, /_next/image?url=%2Ftools%2Fimages%2Fchrome-extension-close-duplicate-tabs.png&w=256&q=75 2x" src="/_next/image?url=%2Ftools%2Fimages%2Fchrome-extension-close-duplicate-tabs.png&w=256&q=75"/></span><div class="col-start-2 col-end-3"><p class="text-sm">This Extension allows you to organize duplicate tabs in an instant and reload the remaining tabs to make them up-to-date!</p><ul class="mt-1.5 flex flex-wrap gap-1 text-xs leading-none"><li class="rounded px-2 py-1 bg-[#e7e7e7]">Chrome Extension</li></ul></div></a></li><li><a target="_blank" rel="noopener noreferrer" class="group relative grid grid-cols-[min(20%,80px)_1fr] grid-rows-[auto_1fr] gap-x-[12px] rounded pr-[24px] no-underline before:pointer-events-none before:absolute before:-top-2 before:-left-2 before:-z-1 before:size-[calc(100%+1rem)] before:rounded before:bg-gray-100 before:opacity-0 before:transition-opacity hover:before:opacity-100" href="https://chrome.google.com/webstore/detail/bouquet/apcgmjgoniiddekoelefocimfnhnkaah"><span class=
1"col-start-2 col-end-3 row-start-1 text-sm font-bold group-hover:underline">Bouquet<img alt="Open the link in new tab" loading="lazy" width="14" height="14" decoding="async" data-nimg="1" class="NewTabIcon-module__Pshs5G__img" style="color:transparent" src="/new-window.svg"/></span><span class="col-start-1 col-end-2 row-start-1 -row-end-1 grid aspect-square w-full place-items-center rounded-sm bg-white text-[32px]" aria-hidden="true"><img alt="" loading="lazy" width="80" height="80" decoding="async" data-nimg="1" class="size-[90%]" style="color:transparent" srcSet="/_next/image?url=%2Ftools%2Fimages%2Fchrome-extension-bouquet.png&w=96&q=75 1x, /_next/image?url=%2Ftools%2Fimages%2Fchrome-extension-bouquet.png&w=256&q=75 2x" src="/_next/image?url=%2Ftools%2Fimages%2Fchrome-extension-bouquet.png&w=256&q=75"/></span><div class="col-start-2 col-end-3"><p class="text-sm">Arrange all tabs of the currently open window in screen</p><ul class="mt-1.5 flex flex-wrap gap-1 text-xs leading-none"><li class="rounded px-2 py-1 bg-[#e7e7e7]">Chrome Extension</li></ul></div></a></li><li><a target="_blank" rel="noopener noreferrer" class="group relative grid grid-cols-[min(20%,80px)_1fr] grid-rows-[auto_1fr] gap-x-[12px] rounded pr-[24px] no-underline before:pointer-events-none before:absolute before:-top-2 before:-left-2 before:-z-1 before:size-[calc(100%+1rem)] before:rounded before:bg-gray-100 before:opacity-0 before:transition-opacity hover:before:opacity-100" href="https://chrome.google.com/webstore/detail/pjoggomlkaanadbegagokiioonfaedle"><span class="col-start-2 col-end-3 row-start-1 text-sm font-bold group-hover:underline">Hand Tool for browser<img alt="Open the link in new tab" loading="lazy" width="14" height="14" decoding="async" data-nimg="1" class="NewTabIcon-module__Pshs5G__img" style="color:transparent" src="/new-window.svg"/></span><span class="col-start-1 col-end-2 row-start-1 -row-end-1 grid aspect-square w-full place-items-center rounded-sm bg-white text-[32px]" aria-hidden="true"><img alt="" loading="lazy" width="80" height="80" decoding="async" data-nimg="1" class="size-[90%]" style="color:transparent" srcSet="/_next/image?url=%2Ftools%2Fimages%2Fchrome-extension-hand-tool.png&w=96&q=75 1x, /_next/image?url=%2Ftools%2Fimages%2Fchrome-extension-hand-tool.png&w=256&q=75 2x" src="/_next/image?url=%2Ftools%2Fimages%2Fchrome-extension-hand-tool.png&w=256&q=75"/></span><div class="col-start-2 col-end-3"><p class="text-sm">Will enable you to scroll by dragging while holding down the space key, just like photo processing or illustration creation apps.</p><ul class="mt-1.5 flex flex-wrap gap-1 text-xs leading-none"><li class="rounded px-2 py-1 bg-[#e7e7e7]">Chrome Extension</li></ul></div></a><span class="mt-1 ml-[calc(0.25*20rem+12px)] block w-fit rounded-b text-sm"><a class="relative block rounded-full border border-black pr-[24px] pl-[12px] no-underline hover:underline after:absolute after:inset-y-0 after:right-3 after:my-auto after:size-1 after:rotate-45 after:border-t after:border-r after:border-black after:transition-[margin] after:duration-200 after:content-[''] hover:after:mr-[-4px]" href="/en/demo/chrome-extension-drag-scroll">DEMO</a></span></li><li><a target="_blank" rel="noopener noreferrer" class="group relative grid grid-cols-[min(20%,80px)_1fr] grid-rows-[auto_1fr] gap-x-[12px] rounded pr-[24px] no-underline before:pointer-events-none before:absolute before:-top-2 before:-left-2 before:-z-1 before:size-[calc(100%+1rem)] before:rounded before:bg-gray-100 before:opacity-0 before:transition-opacity hover:before:opacity-100" href="https://chrome.google.com/webstore/detail/placeholder-into-value/algihlehcffcpmokaliahcmebfkekkch"><span class="col-start-2 col-end-3 row-start-1 text-sm font-bold group-hover:underline">Placeholder into value<img alt="Open the link in new tab" loading="lazy" width="14" height="14" decoding="async" data-nimg="1" class="NewTabIcon-module__Pshs5G__img" style="color:transparent" src="/new-window.svg"/></span><span class="col-start-1 col-end-2 row-start-1 -row-end-1 grid aspect-square w-full place-items-center rounded-sm bg-white text-[32px]" aria-hidden="true"><img alt="" loading="lazy" width="80" height="80" decoding="async" data-nimg="1" class="size-[90%]" style="color:transparent" srcSet="/_next/image?url=%2Ftools%2Fimages%2Fchrome-extension-placeholder-into-value.png&w=96&q=75 1x, /_next/image?url=%2Ftools%2Fimages%2Fchrome-extension-placeholder-into-value.png&w=256&q=75 2x" src="/_next/image?url=%2Ftools%2Fimages%2Fchrome-extension-placeholder-into-value.png&w=256&q=75"/></span><div class="col-start-2 col-end-3"><p class="text-sm"></p><ul class="mt-1.5 flex flex-wrap gap-1 text-xs leading-none"><li class="rounded px-2 py-1 bg-[#e7e7e7]">Chrome Extension</li></ul></div></a></li><li><a target="_blank" rel="noopener noreferrer" class="group relative grid grid-cols-[min(20%,80px)_1fr] grid-rows-[auto_1fr] gap-x-[12px] rounded pr-[24px] no-underline before:pointer-events-none before:absolute before:-top-2 before:-left-2 before:-z-1 before:size-[calc(100%+1rem)] before:rounded before:bg-gray-100 before:opacity-0 before:transition-opacity hover:before:opacity-100" href="https://chrome.google.com/webstore/detail/image-manipulator/obkebbjepldbhebchaimjhmgbpniiceb"><span class="col-start-2 col-end-3 row-start-1 text-sm font-bold group-hover:underline">Image Manipulator<img alt="Open the link in new tab" loading="lazy" width="14" height="14" decoding="async" data-nimg="1" class="NewTabIcon-module__Pshs5G__img" style="color:transparent" src="/new-window.svg"/></span><span class="col-start-1 col-end-2 row-start-1 -row-end-1 grid aspect-square w-full place-items-center rounded-sm bg-white text-[32px]" aria-hidden="true"><img alt="" loading="lazy" width="80" height="80" decoding="async" data-nimg="1" class="size-[90%]" style="color:transparent" srcSet="/_next/image?url=%2Ftools%2Fimages%2Fchrome-extension-image-manipulator.png&w=96&q=75 1x, /_next/image?url=%2Ftools%2Fimages%2Fchrome-extension-image-manipulator.png&w=256&q=75 2x" src="/_next/image?url=%2Ftools%2Fimages%2Fchrome-extension-image-manipulator.png&w=256&q=75"/></span><div class="col-start-2 col-end-3"><p class="text-sm">You can flip, rotate, enlarge, and view information about the image from a image context menu allows.</p><ul class="mt-1.5 flex flex-wrap gap-1 text-xs leading-none"><li class="rounded px-2 py-1 bg-[#e7e7e7]">Chrome Extension</li></ul></div></a></li><li><a target="_blank" rel="noopener noreferrer" class="group relative grid grid-cols-[min(20%,80px)_1fr] grid-rows-[auto_1fr] gap-x-[12px] rounded pr-[24px] no-underline before:pointer-events-none before:absolute before:-top-2 before:-left-2 before:-z-1 before:size-[calc(100%+1rem)] before:rounded before:bg-gray-100 before:opacity-0 before:transition-opacity hover:before:opacity-100" href="https://chromewebstore.google.com/detail/convert-url-text-to-links/abenkfdcgjcigijkifdmjhpehoilnnid"><span class="col-start-2 col-end-3 row-start-1 text-sm font-bold group-hover:underline">Convert URL Text to Links<img alt="Open the link in new tab" loading="lazy" width="14" height="14" decoding="async" data-nimg="1" class="NewTabIcon-module__Pshs5G__img" style="color:transparent" src="/new-window.svg"/></span><span class="col-start-1 col-end-2 row-start-1 -row-end-1 grid aspect-square w-full place-items-center rounded-sm bg-white text-[32px]" aria-hidden="true"><img alt="" loading="lazy" width="80" height="80" decoding="async" data-nimg="1" class="size-[90%]" style="color:transparent" srcSet="/_next/image?url=%2Ftools%2Fimages%2Fchrome-extension-convert-url-text-to-links.png&w=96&q=75 1x, /_next/image?url=%2Ftools%2Fimages%2Fchrome-extension-convert-url-text-to-links.png&w=256&q=75 2x" src="/_next/image?url=%2Ftools%2Fimages%2Fchrome-extension-convert-url-text-to-links.png&w=256&q=75"/></span><div class="col-start-2 col-end-3"><p class="text-sm">It converts non-linked text on a Web page into a link.</p><ul class="mt-1.5 flex flex-wrap gap-1 text-xs leading-none"><li class="rounded px-2 py-1 bg-[#e7e7e7]">Chrome Extension</li></ul></div></a>
1<span class="mt-1 ml-[calc(0.25*20rem+12px)] block w-fit rounded-b text-sm"><a class="relative block rounded-full border border-black pr-[24px] pl-[12px] no-underline hover:underline after:absolute after:inset-y-0 after:right-3 after:my-auto after:size-1 after:rotate-45 after:border-t after:border-r after:border-black after:transition-[margin] after:duration-200 after:content-[''] hover:after:mr-[-4px]" href="/en/demo/chrome-extension-convert-url-text-to-links">DEMO</a></span></li><li><a target="_blank" rel="noopener noreferrer" class="group relative grid grid-cols-[min(20%,80px)_1fr] grid-rows-[auto_1fr] gap-x-[12px] rounded pr-[24px] no-underline before:pointer-events-none before:absolute before:-top-2 before:-left-2 before:-z-1 before:size-[calc(100%+1rem)] before:rounded before:bg-gray-100 before:opacity-0 before:transition-opacity hover:before:opacity-100" href="https://chromewebstore.google.com/detail/the-up-one-level-button-f/jgjolidlaihemplmnaoeifpejbaobpbi"><span class="col-start-2 col-end-3 row-start-1 text-sm font-bold group-hover:underline">The Up One Level Button for browser<img alt="Open the link in new tab" loading="lazy" width="14" height="14" decoding="async" data-nimg="1" class="NewTabIcon-module__Pshs5G__img" style="color:transparent" src="/new-window.svg"/></span><span class="col-start-1 col-end-2 row-start-1 -row-end-1 grid aspect-square w-full place-items-center rounded-sm bg-white text-[32px]" aria-hidden="true"><img alt="" loading="lazy" width="80" height="80" decoding="async" data-nimg="1" class="size-[90%]" style="color:transparent" srcSet="/_next/image?url=%2Ftools%2Fimages%2Fchrome-extension-up-one-level.png&w=96&q=75 1x, /_next/image?url=%2Ftools%2Fimages%2Fchrome-extension-up-one-level.png&w=256&q=75 2x" src="/_next/image?url=%2Ftools%2Fimages%2Fchrome-extension-up-one-level.png&w=256&q=75"/></span><div class="col-start-2 col-end-3"><p class="text-sm">The extension is simply for navigating from the current web page to its parent directory.</p><ul class="mt-1.5 flex flex-wrap gap-1 text-xs leading-none"><li class="rounded px-2 py-1 bg-[#e7e7e7]">Chrome Extension</li></ul></div></a></li><li><a target="_blank" rel="noopener noreferrer" class="group relative grid grid-cols-[min(20%,80px)_1fr] grid-rows-[auto_1fr] gap-x-[12px] rounded pr-[24px] no-underline before:pointer-events-none before:absolute before:-top-2 before:-left-2 before:-z-1 before:size-[calc(100%+1rem)] before:rounded before:bg-gray-100 before:opacity-0 before:transition-opacity hover:before:opacity-100" href="https://chromewebstore.google.com/detail/hpliknlffjiipmfodaldbihcbgkpmanf"><span class="col-start-2 col-end-3 row-start-1 text-sm font-bold group-hover:underline">Magnifier Usable Only with Mouse<img alt="Open the link in new tab" loading="lazy" width="14" height="14" decoding="async" data-nimg="1" class="NewTabIcon-module__Pshs5G__img" style="color:transparent" src="/new-window.svg"/></span><span class="col-start-1 col-end-2 row-start-1 -row-end-1 grid aspect-square w-full place-items-center rounded-sm bg-white text-[32px]" aria-hidden="true"><img alt="" loading="lazy" width="80" height="80" decoding="async" data-nimg="1" class="size-[90%]" style="color:transparent" srcSet="/_next/image?url=%2Ftools%2Fimages%2Fchrome-extension-magnifier.png&w=96&q=75 1x, /_next/image?url=%2Ftools%2Fimages%2Fchrome-extension-magnifier.png&w=256&q=75 2x" src="/_next/image?url=%2Ftools%2Fimages%2Fchrome-extension-magnifier.png&w=256&q=75"/></span><div class="col-start-2 col-end-3"><p class="text-sm">A tool to zoom in on web pages without using a keyboard. The zoom method can be customized!</p><ul class="mt-1.5 flex flex-wrap gap-1 text-xs leading-none"><li class="rounded px-2 py-1 bg-[#e7e7e7]">Chrome Extension</li></ul></div></a></li><li><a target="_blank" rel="noopener noreferrer" class="group relative grid grid-cols-[min(20%,80px)_1fr] grid-rows-[auto_1fr] gap-x-[12px] rounded pr-[24px] no-underline before:pointer-events-none before:absolute before:-top-2 before:-left-2 before:-z-1 before:size-[calc(100%+1rem)] before:rounded before:bg-gray-100 before:opacity-0 before:transition-opacity hover:before:opacity-100" href="https://chromewebstore.google.com/detail/cmbechjncgniomlnlgjljkedpkhniiaa"><span class="col-start-2 col-end-3 row-start-1 text-sm font-bold group-hover:underline">Modify Request Headers<img alt="Open the link in new tab" loading="lazy" width="14" height="14" decoding="async" data-nimg="1" class="NewTabIcon-module__Pshs5G__img" style="color:transparent" src="/new-window.svg"/></span><span class="col-start-1 col-end-2 row-start-1 -row-end-1 grid aspect-square w-full place-items-center rounded-sm bg-white text-[32px]" aria-hidden="true"><img alt="" loading="lazy" width="80" height="80" decoding="async" data-nimg="1" class="size-[90%]" style="color:transparent" srcSet="/_next/image?url=%2Ftools%2Fimages%2Fchrome-extension-modify-request-headers.png&w=96&q=75 1x, /_next/image?url=%2Ftools%2Fimages%2Fchrome-extension-modify-request-headers.png&w=256&q=75 2x" src="/_next/image?url=%2Ftools%2Fimages%2Fchrome-extension-modify-request-headers.png&w=256&q=75"/></span><div class="col-start-2 col-end-3"><p class="text-sm">This is a Google Chrome extension that modifies request headers.</p><ul class="mt-1.5 flex flex-wrap gap-1 text-xs leading-none"><li class="rounded px-2 py-1 bg-[#e7e7e7]">Chrome Extension</li></ul></div></a></li></ul></main><nav class="BreadCrumb-module__A5YHLa__wrap" id="BREADCRUMB"><ul class="BreadCrumb-module__A5YHLa__ul"><li class="BreadCrumb-module__A5YHLa__li"><a class="BreadCrumb-module__A5YHLa__link" href="/en">Home</a></li><li class="BreadCrumb-module__A5YHLa__li"><span>Tools</span></li></ul></nav><footer id="footer" class="Footer-module__7mNlWq__wrap"><p class="Footer-module__7mNlWq__primary"><span><a href="https://twitter.com/intent/tweet?utm_source=twitter" class="twitter-share-button" data-text=" 2 3--- 4Tools | @â heppokofrontend 5" data-via="heppokoFrontend" data-related="kawarabeecma" data-hashtag="ã¸ã£ã½ãããã³ãã¨ã³ãé" data-size="large" data-lang="en" data-url="https://hepp
5okofrontend.dev/tools?utm_source=twitter&utm_medium=social&utm_campaign=social">Tweet</a></span></p><div class="Footer-module__7mNlWq__secondary"><ul class="Footer-module__7mNlWq__linkList"><li class="Footer-module__7mNlWq__linkListItem"><a href="/en/privacy-policy">Privacy Policy (Japanese Only)</a></li><li class="Footer-module__7mNlWq__linkListItem"><a href="/en/guidelines">Content Usage Guidelines (Japanese Only)</a></li><li class="Footer-module__7mNlWq__linkListItem"><a href="/en/disclaimer">Disclaimer (Japanese Only)</a></li></ul><p class="Footer-module__7mNlWq__copyright"><small>© heppokofrontend.</small></p></div></footer></div></div>
5<script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/tools","query":{},"buildId":"P_zKmBMBbt9-WGpubvA1M","nextExport":true,"autoExport":true,"isFallback":false,"locale":"en","locales":["ja","en"],"defaultLocale":"ja","scriptLoader":[]}</script>
5</body></html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.