{"id":5430,"date":"2021-10-09T22:14:59","date_gmt":"2021-10-09T19:14:59","guid":{"rendered":"https:\/\/unitycoder.com\/blog\/?p=5430"},"modified":"2021-10-09T22:14:59","modified_gmt":"2021-10-09T19:14:59","slug":"greasemonkey-better-pixel-art-viewer-for-itch-io","status":"publish","type":"post","link":"https:\/\/unitycoder.com\/blog\/2021\/10\/09\/greasemonkey-better-pixel-art-viewer-for-itch-io\/","title":{"rendered":"[GreaseMonkey] Better Pixel Art viewer for itch.io"},"content":{"rendered":"\n<p>Default itch.io image viewer is horrible for small pixel art, so here is Firefox Greasemonkey plugin to make the viewer full screen and use pixel scaling.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/i0.wp.com\/unitycoder.com\/blog\/wp-content\/uploads\/2021\/10\/itchio.png?ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" width=\"1017\" height=\"1024\" data-attachment-id=\"5431\" data-permalink=\"https:\/\/unitycoder.com\/blog\/2021\/10\/09\/greasemonkey-better-pixel-art-viewer-for-itch-io\/itchio\/\" data-orig-file=\"https:\/\/i0.wp.com\/unitycoder.com\/blog\/wp-content\/uploads\/2021\/10\/itchio.png?fit=2557%2C2574&amp;ssl=1\" data-orig-size=\"2557,2574\" data-comments-opened=\"1\" data-image-meta=\"{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}\" data-image-title=\"itchio\" data-image-description=\"\" data-image-caption=\"\" data-large-file=\"https:\/\/i0.wp.com\/unitycoder.com\/blog\/wp-content\/uploads\/2021\/10\/itchio.png?fit=1017%2C1024&amp;ssl=1\" src=\"https:\/\/i0.wp.com\/unitycoder.com\/blog\/wp-content\/uploads\/2021\/10\/itchio.png?resize=1017%2C1024&#038;ssl=1\" alt=\"\" class=\"wp-image-5431\" srcset=\"https:\/\/i0.wp.com\/unitycoder.com\/blog\/wp-content\/uploads\/2021\/10\/itchio.png?resize=1017%2C1024&amp;ssl=1 1017w, https:\/\/i0.wp.com\/unitycoder.com\/blog\/wp-content\/uploads\/2021\/10\/itchio.png?resize=298%2C300&amp;ssl=1 298w, https:\/\/i0.wp.com\/unitycoder.com\/blog\/wp-content\/uploads\/2021\/10\/itchio.png?resize=150%2C150&amp;ssl=1 150w, https:\/\/i0.wp.com\/unitycoder.com\/blog\/wp-content\/uploads\/2021\/10\/itchio.png?resize=768%2C773&amp;ssl=1 768w, https:\/\/i0.wp.com\/unitycoder.com\/blog\/wp-content\/uploads\/2021\/10\/itchio.png?resize=1526%2C1536&amp;ssl=1 1526w, https:\/\/i0.wp.com\/unitycoder.com\/blog\/wp-content\/uploads\/2021\/10\/itchio.png?resize=2034%2C2048&amp;ssl=1 2034w, https:\/\/i0.wp.com\/unitycoder.com\/blog\/wp-content\/uploads\/2021\/10\/itchio.png?resize=144%2C144&amp;ssl=1 144w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/a><\/figure>\n\n\n\n<figure class=\"wp-block-embed is-type-rich is-provider-embed-handler wp-block-embed-embed-handler\"><div class=\"wp-block-embed__wrapper\">\n<style>.gist table { margin-bottom: 0; }<\/style><div style=\"tab-size: 8\" id=\"gist112014976\" class=\"gist\">\n    <div class=\"gist-file\" translate=\"no\" data-color-mode=\"light\" data-light-theme=\"light\">\n      <div class=\"gist-data\">\n        \n<div class=\"js-gist-file-update-container js-task-list-container\">\n      <div id=\"file-itchio-better-pixel-art-js\" class=\"file my-2\">\n    \n    <div itemprop=\"text\"\n      class=\"Box-body p-0 blob-wrapper data type-javascript  \"\n      style=\"overflow: auto\" tabindex=\"0\" role=\"region\"\n      aria-label=\"itchio-better-pixel-art.js content, created by unitycoder on 07:28PM on September 25, 2021.\"\n    >\n\n        \n<div class=\"js-check-hidden-unicode js-blob-code-container blob-code-content\">\n\n  <template class=\"js-file-alert-template\">\n  <div data-view-component=\"true\" class=\"flash flash-warn flash-full d-flex flex-items-center\">\n  <svg aria-hidden=\"true\" data-component=\"Octicon\" height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" data-view-component=\"true\" class=\"octicon octicon-alert\">\n    <path d=\"M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\"><\/path>\n<\/svg>\n    <span>\n      This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.\n      <a class=\"Link--inTextBlock\" href=\"https:\/\/github.co\/hiddenchars\" target=\"_blank\">Learn more about bidirectional Unicode characters<\/a>\n    <\/span>\n\n\n  <div data-view-component=\"true\" class=\"flash-action\">        <a href=\"{{ revealButtonHref }}\" data-view-component=\"true\" class=\"btn-sm btn\">    Show hidden characters\n<\/a>\n<\/div>\n<\/div><\/template>\n<template class=\"js-line-alert-template\">\n  <span aria-label=\"This line has hidden Unicode characters\" data-view-component=\"true\" class=\"line-alert tooltipped tooltipped-e\">\n    <svg aria-hidden=\"true\" data-component=\"Octicon\" height=\"16\" viewBox=\"0 0 16 16\" version=\"1.1\" width=\"16\" data-view-component=\"true\" class=\"octicon octicon-alert\">\n    <path d=\"M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z\"><\/path>\n<\/svg>\n<\/span><\/template>\n\n  <table data-hpc class=\"highlight tab-size js-file-line-container\" data-tab-size=\"4\" data-paste-markdown-skip data-tagsearch-path=\"itchio-better-pixel-art.js\">\n        <tr>\n          <td id=\"file-itchio-better-pixel-art-js-L1\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"1\"><\/td>\n          <td id=\"file-itchio-better-pixel-art-js-LC1\" class=\"blob-code blob-code-inner js-file-line\">\/\/ ==UserScript==<\/td>\n        <\/tr>\n        <tr>\n          <td id=\"file-itchio-better-pixel-art-js-L2\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"2\"><\/td>\n          <td id=\"file-itchio-better-pixel-art-js-LC2\" class=\"blob-code blob-code-inner js-file-line\">\/\/ @name     itch.io full screen image viewer<\/td>\n        <\/tr>\n        <tr>\n          <td id=\"file-itchio-better-pixel-art-js-L3\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"3\"><\/td>\n          <td id=\"file-itchio-better-pixel-art-js-LC3\" class=\"blob-code blob-code-inner js-file-line\">\/\/ @namespace   https:\/\/unitycoder.com<\/td>\n        <\/tr>\n        <tr>\n          <td id=\"file-itchio-better-pixel-art-js-L4\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"4\"><\/td>\n          <td id=\"file-itchio-better-pixel-art-js-LC4\" class=\"blob-code blob-code-inner js-file-line\">\/\/ @description better image viewer lightbox for pixel art images<\/td>\n        <\/tr>\n        <tr>\n          <td id=\"file-itchio-better-pixel-art-js-L5\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"5\"><\/td>\n          <td id=\"file-itchio-better-pixel-art-js-LC5\" class=\"blob-code blob-code-inner js-file-line\">\/\/ @version  1.0<\/td>\n        <\/tr>\n        <tr>\n          <td id=\"file-itchio-better-pixel-art-js-L6\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"6\"><\/td>\n          <td id=\"file-itchio-better-pixel-art-js-LC6\" class=\"blob-code blob-code-inner js-file-line\">\/\/ @include  https:\/\/*.itch.io\/*<\/td>\n        <\/tr>\n        <tr>\n          <td id=\"file-itchio-better-pixel-art-js-L7\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"7\"><\/td>\n          <td id=\"file-itchio-better-pixel-art-js-LC7\" class=\"blob-code blob-code-inner js-file-line\">\/\/ @grant    none<\/td>\n        <\/tr>\n        <tr>\n          <td id=\"file-itchio-better-pixel-art-js-L8\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"8\"><\/td>\n          <td id=\"file-itchio-better-pixel-art-js-LC8\" class=\"blob-code blob-code-inner js-file-line\">\/\/ @run-at   document-start<\/td>\n        <\/tr>\n        <tr>\n          <td id=\"file-itchio-better-pixel-art-js-L9\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"9\"><\/td>\n          <td id=\"file-itchio-better-pixel-art-js-LC9\" class=\"blob-code blob-code-inner js-file-line\">\/\/ ==\/UserScript==<\/td>\n        <\/tr>\n        <tr>\n          <td id=\"file-itchio-better-pixel-art-js-L10\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"10\"><\/td>\n          <td id=\"file-itchio-better-pixel-art-js-LC10\" class=\"blob-code blob-code-inner js-file-line\">\n<\/td>\n        <\/tr>\n        <tr>\n          <td id=\"file-itchio-better-pixel-art-js-L11\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"11\"><\/td>\n          <td id=\"file-itchio-better-pixel-art-js-LC11\" class=\"blob-code blob-code-inner js-file-line\">\/\/ http:\/\/greasemonkey.win-start.de\/patterns\/add-css.html<\/td>\n        <\/tr>\n        <tr>\n          <td id=\"file-itchio-better-pixel-art-js-L12\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"12\"><\/td>\n          <td id=\"file-itchio-better-pixel-art-js-LC12\" class=\"blob-code blob-code-inner js-file-line\">function addGlobalStyle(css) <\/td>\n        <\/tr>\n        <tr>\n          <td id=\"file-itchio-better-pixel-art-js-L13\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"13\"><\/td>\n          <td id=\"file-itchio-better-pixel-art-js-LC13\" class=\"blob-code blob-code-inner js-file-line\">{<\/td>\n        <\/tr>\n        <tr>\n          <td id=\"file-itchio-better-pixel-art-js-L14\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"14\"><\/td>\n          <td id=\"file-itchio-better-pixel-art-js-LC14\" class=\"blob-code blob-code-inner js-file-line\">    var head, style;<\/td>\n        <\/tr>\n        <tr>\n          <td id=\"file-itchio-better-pixel-art-js-L15\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"15\"><\/td>\n          <td id=\"file-itchio-better-pixel-art-js-LC15\" class=\"blob-code blob-code-inner js-file-line\">    head = document.getElementsByTagName(&#39;head&#39;)[0];<\/td>\n        <\/tr>\n        <tr>\n          <td id=\"file-itchio-better-pixel-art-js-L16\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"16\"><\/td>\n          <td id=\"file-itchio-better-pixel-art-js-LC16\" class=\"blob-code blob-code-inner js-file-line\">    if (!head) { return; }<\/td>\n        <\/tr>\n        <tr>\n          <td id=\"file-itchio-better-pixel-art-js-L17\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"17\"><\/td>\n          <td id=\"file-itchio-better-pixel-art-js-LC17\" class=\"blob-code blob-code-inner js-file-line\">    style = document.createElement(&#39;style&#39;);<\/td>\n        <\/tr>\n        <tr>\n          <td id=\"file-itchio-better-pixel-art-js-L18\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"18\"><\/td>\n          <td id=\"file-itchio-better-pixel-art-js-LC18\" class=\"blob-code blob-code-inner js-file-line\">    style.type = &#39;text\/css&#39;;<\/td>\n        <\/tr>\n        <tr>\n          <td id=\"file-itchio-better-pixel-art-js-L19\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"19\"><\/td>\n          <td id=\"file-itchio-better-pixel-art-js-LC19\" class=\"blob-code blob-code-inner js-file-line\">    style.innerHTML = css;<\/td>\n        <\/tr>\n        <tr>\n          <td id=\"file-itchio-better-pixel-art-js-L20\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"20\"><\/td>\n          <td id=\"file-itchio-better-pixel-art-js-LC20\" class=\"blob-code blob-code-inner js-file-line\">    head.appendChild(style);<\/td>\n        <\/tr>\n        <tr>\n          <td id=\"file-itchio-better-pixel-art-js-L21\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"21\"><\/td>\n          <td id=\"file-itchio-better-pixel-art-js-LC21\" class=\"blob-code blob-code-inner js-file-line\">}<\/td>\n        <\/tr>\n        <tr>\n          <td id=\"file-itchio-better-pixel-art-js-L22\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"22\"><\/td>\n          <td id=\"file-itchio-better-pixel-art-js-LC22\" class=\"blob-code blob-code-inner js-file-line\">\n<\/td>\n        <\/tr>\n        <tr>\n          <td id=\"file-itchio-better-pixel-art-js-L23\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"23\"><\/td>\n          <td id=\"file-itchio-better-pixel-art-js-LC23\" class=\"blob-code blob-code-inner js-file-line\">\/\/ set custom styles for these elements<\/td>\n        <\/tr>\n        <tr>\n          <td id=\"file-itchio-better-pixel-art-js-L24\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"24\"><\/td>\n          <td id=\"file-itchio-better-pixel-art-js-LC24\" class=\"blob-code blob-code-inner js-file-line\">addGlobalStyle(&#39;#lightbox_container .lightbox.screenshot_lightbox.animated { width:100%; height:100%;}&#39;);<\/td>\n        <\/tr>\n        <tr>\n          <td id=\"file-itchio-better-pixel-art-js-L25\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"25\"><\/td>\n          <td id=\"file-itchio-better-pixel-art-js-LC25\" class=\"blob-code blob-code-inner js-file-line\">addGlobalStyle(&#39;.lightbox.screenshot_lightbox .screenshot_container { width:100%; height:100%;display: flex;}&#39;);<\/td>\n        <\/tr>\n        <tr>\n          <td id=\"file-itchio-better-pixel-art-js-L26\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"26\"><\/td>\n          <td id=\"file-itchio-better-pixel-art-js-LC26\" class=\"blob-code blob-code-inner js-file-line\">addGlobalStyle(&#39;.lightbox.screenshot_lightbox .screenshot_container .lb_screenshot { width:100%; height:auto;   image-rendering: pixelated; image-rendering: -moz-crisp-edges; object-fit:contain;}&#39;);<\/td>\n        <\/tr>\n        <tr>\n          <td id=\"file-itchio-better-pixel-art-js-L27\" class=\"blob-num js-line-number js-blob-rnum\" data-line-number=\"27\"><\/td>\n          <td id=\"file-itchio-better-pixel-art-js-LC27\" class=\"blob-code blob-code-inner js-file-line\">addGlobalStyle(&#39;body.lightbox_open { overflow:auto; !important;}&#39;);<\/td>\n        <\/tr>\n  <\/table>\n<\/div>\n\n\n    <\/div>\n\n  <\/div>\n\n<\/div>\n\n      <\/div>\n      <div class=\"gist-meta\">\n        <a href=\"https:\/\/gist.github.com\/unitycoder\/96d8168286c067c3e1b1dad9f2e0e1d0\/raw\/06c8773171e85049ef6ef3e115b0309df0be489f\/itchio-better-pixel-art.js\" style=\"float:right\" class=\"Link--inTextBlock\">view raw<\/a>\n        <a href=\"https:\/\/gist.github.com\/unitycoder\/96d8168286c067c3e1b1dad9f2e0e1d0#file-itchio-better-pixel-art-js\" class=\"Link--inTextBlock\">\n          itchio-better-pixel-art.js\n        <\/a>\n        hosted with &#10084; by <a class=\"Link--inTextBlock\" href=\"https:\/\/github.com\">GitHub<\/a>\n      <\/div>\n    <\/div>\n<\/div>\n\n<\/div><\/figure>\n\n\n\n<p>Example page:<br><a href=\"https:\/\/0x72.itch.io\/16x16-dungeon-tileset\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/0x72.itch.io\/16&#215;16-dungeon-tileset<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Default itch.io image viewer is horrible for small pixel art, so here is Firefox Greasemonkey plugin to make the viewer full screen and use pixel scaling. Example page:https:\/\/0x72.itch.io\/16&#215;16-dungeon-tileset<\/p>\n","protected":false},"author":1,"featured_media":5431,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[1056,1135],"tags":[1000,537,1212,699,298],"class_list":["post-5430","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-external-tools","category-javascript","tag-browser","tag-greasemonkey","tag-itchio","tag-pixel-art","tag-viewer"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/unitycoder.com\/blog\/wp-content\/uploads\/2021\/10\/itchio.png?fit=2557%2C2574&ssl=1","jetpack_shortlink":"https:\/\/wp.me\/p1KTaT-1pA","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/unitycoder.com\/blog\/wp-json\/wp\/v2\/posts\/5430","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unitycoder.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unitycoder.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unitycoder.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unitycoder.com\/blog\/wp-json\/wp\/v2\/comments?post=5430"}],"version-history":[{"count":1,"href":"https:\/\/unitycoder.com\/blog\/wp-json\/wp\/v2\/posts\/5430\/revisions"}],"predecessor-version":[{"id":5432,"href":"https:\/\/unitycoder.com\/blog\/wp-json\/wp\/v2\/posts\/5430\/revisions\/5432"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/unitycoder.com\/blog\/wp-json\/wp\/v2\/media\/5431"}],"wp:attachment":[{"href":"https:\/\/unitycoder.com\/blog\/wp-json\/wp\/v2\/media?parent=5430"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unitycoder.com\/blog\/wp-json\/wp\/v2\/categories?post=5430"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unitycoder.com\/blog\/wp-json\/wp\/v2\/tags?post=5430"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}