{"id":70,"date":"2023-07-05T16:15:21","date_gmt":"2023-07-05T08:15:21","guid":{"rendered":"https:\/\/clifford.io\/blog\/?p=70"},"modified":"2024-06-29T12:51:49","modified_gmt":"2024-06-29T04:51:49","slug":"create-a-simple-article-reader-bookmarklet","status":"publish","type":"post","link":"https:\/\/clifford.io\/blog\/create-a-simple-article-reader-bookmarklet\/","title":{"rendered":"How to Create a Simple Article Reader Bookmarklet"},"content":{"rendered":"\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_60 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title \" >Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\" role=\"button\"><label for=\"item-69e3073da16b5\" ><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input aria-label=\"Toggle\" aria-label=\"item-69e3073da16b5\"  type=\"checkbox\" id=\"item-69e3073da16b5\"><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/clifford.io\/blog\/create-a-simple-article-reader-bookmarklet\/#What_is_a_bookmarklet\" title=\"What is a bookmarklet\">What is a bookmarklet<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/clifford.io\/blog\/create-a-simple-article-reader-bookmarklet\/#Step_1_Sizing_up_the_article_reader_bookmarklet\" title=\"Step 1 : Sizing up the article reader bookmarklet\">Step 1 : Sizing up the article reader bookmarklet<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/clifford.io\/blog\/create-a-simple-article-reader-bookmarklet\/#Step_2_Create_a_text_file_for_your_bookmarklets_Javascript_code\" title=\"Step 2 : Create a text file for your bookmarklet&#8217;s Javascript code\">Step 2 : Create a text file for your bookmarklet&#8217;s Javascript code<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/clifford.io\/blog\/create-a-simple-article-reader-bookmarklet\/#Step_3_Including_the_readability_Javascript_library\" title=\"Step 3 : Including the readability Javascript library\">Step 3 : Including the readability Javascript library<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/clifford.io\/blog\/create-a-simple-article-reader-bookmarklet\/#Step_4_Writing_the_CSS_for_the_article_reader_bookmarklet\" title=\"Step 4 : Writing the CSS for the article reader bookmarklet\">Step 4 : Writing the CSS for the article reader bookmarklet<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/clifford.io\/blog\/create-a-simple-article-reader-bookmarklet\/#Step_5_Setting_up_the_Javascript\" title=\"Step 5 : Setting up the Javascript\">Step 5 : Setting up the Javascript<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/clifford.io\/blog\/create-a-simple-article-reader-bookmarklet\/#Step_7_Install_the_bookmarklet\" title=\"Step 7 : Install the bookmarklet\">Step 7 : Install the bookmarklet<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/clifford.io\/blog\/create-a-simple-article-reader-bookmarklet\/#Step_8_Test_the_Bookmarklet\" title=\"Step 8 : Test the Bookmarklet\">Step 8 : Test the Bookmarklet<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"What_is_a_bookmarklet\"><\/span>What is a bookmarklet<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>A bookmarklet is simply a piece of Javascript code that can be embedded in your web browser&#8217;s bookmark bar. This Javascript code can run in the context of the web page that you are currently viewing in your browser tab, and then perform a variety of tasks on the page for you. As to what a bookmarklet can do, it is only up to your imagination and creativity.<\/p>\n\n\n\n<p>In this post, we&#8217;ll explore step-by-step on how to make a simple article reader bookmarklet that generates a clutter-free, simplified view of any web page, making it easy on the eyes. We&#8217;ll also look at how to set up the bookmarklet on your web browser. This tutorial assumes you have basic knowledge of HTML, CSS and Javascript. Also, we&#8217;ll be using Mozilla&#8217;s <a href=\"https:\/\/github.com\/mozilla\/readability\" target=\"_blank\" rel=\"noreferrer noopener\">Readability library<\/a> for extracting web page content for our bookmarklet.<\/p>\n\n\n\n<p>Let&#8217;s start!<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_1_Sizing_up_the_article_reader_bookmarklet\"><\/span>Step 1 : Sizing up the article reader bookmarklet<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Before we start to code, we&#8217;ll want to have an idea of:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>What we want the bookmarklet to do<\/li>\n\n\n\n<li>How the user interface (UI) would look like<\/li>\n<\/ul>\n\n\n\n<p>This should be easy because we are going for something really simple. To answer the 2 questions above, we will be building a tool that extracts only the important content sections of any web page and placing them in a side panel for easy viewing and reading. Here&#8217;s a screenshot of what the finished article reader bookmarklet would look like:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"399\" src=\"https:\/\/clifford.io\/blog\/wp-content\/uploads\/2023\/07\/simple-reader.png\" alt=\"article reader bookmarklet\" class=\"wp-image-78\" srcset=\"https:\/\/clifford.io\/blog\/wp-content\/uploads\/2023\/07\/simple-reader.png 800w, https:\/\/clifford.io\/blog\/wp-content\/uploads\/2023\/07\/simple-reader-300x150.png 300w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_2_Create_a_text_file_for_your_bookmarklets_Javascript_code\"><\/span>Step 2 : Create a text file for your bookmarklet&#8217;s Javascript code<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Use your favourite text editor and create a new file. Let&#8217;s call it &#8220;simple_article_reader.js&#8221;. Next, start off your file with this code wrapper:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">javascript: (() => {\n  \/\/ All Javascript code logic, CSS and HTML here\n})();<\/pre>\n\n\n\n<p>This is the standard &#8220;container&#8221; for the article reader bookmarklet and all your Javascript code logic, HTML and CSS will subsequently go into this container.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_3_Including_the_readability_Javascript_library\"><\/span>Step 3 : Including the readability Javascript library<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>We will add the readability library from the JSDelivr CDN to our bookmarklet script. This script will then be injected into the web page&#8217;s DOM (in the &lt;head&gt; section) once the bookmarklet is triggered.<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">javascript: (() => {\n  \/* Add the readability library *\/\n  let __read = document.createElement('script');\n  __read.setAttribute(\"src\",\"https:\/\/cdn.jsdelivr.net\/npm\/moz-readability@0.2.1\/Readability.min.js\");\n  let __head = document.head || document.getElementsByTagName('head')[0];\n  __head.appendChild(__read);\n....\n})();<\/pre>\n\n\n\n<p>Notice the double underscore (__) used to declare the Javascript variables? This is to prevent variable name clashes with the main web page&#8217;s Javascript. Remember our bookmarklet Javascript will run in the context of the web page we trigger it on.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_4_Writing_the_CSS_for_the_article_reader_bookmarklet\"><\/span>Step 4 : Writing the CSS for the article reader bookmarklet<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>In our case, our article reader bookmarklet UI comprises a side panel of 600px in width, is positioned on the right, and anchors to the top and bottom of the page. It has a header that shows the name of the website and a close button to the far right of the header for closing the panel. It also has an author byline and a content panel that is vertically scrollable if the content gets long. With this, we set up the CSS as such:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">javascript: (() => {\n....\n  let __css = `\n    body{\n      overflow-y:hidden;\n    }\n    .panel_mask{\n      position:fixed;\n      top:0;\n      left:0;\n      right:0;\n      bottom:0;\n      background:#000000;\n      opacity:0.6;\n      z-index:9999999998;\n    }\n    .simple_reader_close{\n      position:absolute;\n      right:10px;\n      color:#ffffff;\n    }\n    #simple_reader_panel{\n      width:600px;\n      position:fixed;\n      top:0;\n      bottom:0;\n      right:0px;\n      background:#ffffff;\n      border-left:3px solid #000000;\n      z-index:9999999999;\n      box-sizing:border-box;\n    }\n    #simple_reader_panel .head{\n      position:relative;\n      font-weight:bold;\n      text-align:center;\n      color:#ffffff;\n      background:#000000;\n      font-size:18px !important;\n      padding:10px;\n    }\n    #simple_reader_panel .author{\n      font-size:16px !important;\n      padding:10px;\n      color:#333333;\n      width:100%;\n      background:#f1f1f1;\n    }\n    #the_content_window{\n      width:100%;\n      height:90vh;\n      overflow:auto;\n      padding:10px;\n      padding-bottom:50px;\n      font-size:11px;\n    }\n    #simple_reader_panel p{\n      font-size:16px !important;\n      line-height:21px !important;\n      color:#000000;\n      margin:10px 0px;\n    }\n    #simple_reader_panel p a{\n      font-size:16px !important;\n      line-height:19px !important;\n      color:red;\n    }\n    #simple_reader_panel p a:hover{\n      background:red;\n      text-decoration:none;\n      color:#ffffff;\n    }\n    .a_title{\n      font-size: 18px;\n      font-weight: bold;\n      margin:10px 0px;\n    }\n    #the_content_window h2{\n      font-size:14px;\n    }\n    #the_content_window h3{\n      font-size:13px;\n    }\n    #the_content_window h5{\n      font-size:12px;\n    }\n    #the_content_window h6{\n      font-size:12px;\n    }\n  `;\n  let __style = document.createElement('style');\n  __style.id = \"simple_reader_css\";\n  if (__style.styleSheet){\n    __style.styleSheet.cssText = __css;\n  } else {\n    __style.appendChild(document.createTextNode(__css));\n  }    \n  __head.appendChild(__style);\n....\n})();<\/pre>\n\n\n\n<p>Likewise, we will append the CSS style to the &lt;head&gt; of the document too. Next, setting up the Javascript!<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_5_Setting_up_the_Javascript\"><\/span>Step 5 : Setting up the Javascript<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>In this last step for our article reader bookmarklet, we will create the side panel UI using HTML and Javascript:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">javascript: (() => {\n....\n  let __body = document.body || document.getElementsByTagName('body')[0];\n    window.setTimeout(function(){\n        let __documentClone = document.cloneNode(true);\n        let __article = new Readability(__documentClone).parse();\n        let __mask = document.createElement('div');\n        __mask.classList.add('panel_mask');\n        __body.appendChild(__mask);\n        let __panel = document.createElement('div');\n        __panel.id = 'simple_reader_panel';\n        let __html = '&lt;div class=\"head\">'+__article.siteName;\n        __html += '&lt;a href=\"javascript:;\" class=\"simple_reader_close\" onclick=\"close_reader_panel()\">&amp;cross;&lt;\/a>';\n        __html += '&lt;\/div>';\n        __html += '&lt;div class=\"author\">&lt;a href=\"'+window.location.href+'\">'+__article.byline+'&lt;\/a>&lt;\/div>';\n        __html += '&lt;div id=\"the_content_window\">';\n        __html += '&lt;h1 class=\"a_title\">'+__article.title+'&lt;\/h1>';\n        __html += __article.content;\n        __html += '&lt;\/div>';\n        __panel.innerHTML = __html;\n        __body.appendChild(__panel);\n    },1000);\n....\n})();\n<\/pre>\n\n\n\n<p>Notice a setTimeout function with a 1 second delay? This is to provide a short delay for the readability library to load before our Javascript can function properly.<\/p>\n\n\n\n<p>Finally, we will also add a function for the user to close the bookmarklet panel:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">window.close_reader_panel = function(){\n  document.querySelector('#simple_reader_css').remove();\n  document.querySelector('#simple_reader_panel').remove();\n};<\/pre>\n\n\n\n<p><\/p>\n\n\n\n<p>The full code for the bookmarklet would look like this:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-theme=\"dracula\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">javascript: (() => {\n    let __read = document.createElement('script');\n    __read.setAttribute(\"src\",\"https:\/\/cdn.jsdelivr.net\/npm\/moz-readability@0.2.1\/Readability.min.js\");\n    let __head = document.head || document.getElementsByTagName('head')[0];\n    __head.appendChild(__read);\n    let __css = `\n        body{\n            overflow-y:hidden;\n        }\n        .panel_mask{\n            position:fixed;\n            top:0;\n            left:0;\n            right:0;\n            bottom:0;\n            background:#000000;\n            opacity:0.6;\n            z-index:9999999998;\n        }\n        .simple_reader_close{\n            position:absolute;\n            right:10px;\n            color:#ffffff;\n        }\n        #simple_reader_panel{\n            width:600px;\n            position:fixed;\n            top:0;\n            bottom:0;\n            right:0px;\n            transition:0.5s right;\n            background:#ffffff;\n            border-left:3px solid #000000;\n            z-index:9999999999;\n            box-sizing:border-box;\n        }\n        #simple_reader_panel .head{\n            position:relative;\n            font-weight:bold;\n            text-align:center;\n            color:#ffffff;\n            background:#000000;\n            font-size:18px !important;\n            padding:10px;\n        }\n        #simple_reader_panel .author{\n            font-size:16px !important;\n            padding:10px;\n            color:#333333;\n            width:100%;\n            background:#f1f1f1;\n        }\n        #the_content_window{\n            width:100%;\n            height:90vh;\n            overflow:auto;\n            padding:10px;\n            padding-bottom:50px;\n            font-size:11px;\n        }\n        #simple_reader_panel p{\n            font-size:16px !important;\n            line-height:21px !important;\n            color:#000000;\n            margin:10px 0px;\n        }\n        #simple_reader_panel p a{\n            font-size:16px !important;\n            line-height:19px !important;\n            color:red;\n        }\n        #simple_reader_panel p a:hover{\n            background:red;\n            text-decoration:none;\n            color:#ffffff;\n        }\n        .a_title{\n            font-size: 18px;\n            font-weight: bold;\n            margin:10px 0px;\n        }\n        #the_content_window h2{\n            font-size:14px;\n        }\n        #the_content_window h3{\n            font-size:13px;\n        }\n        #the_content_window h5{\n            font-size:12px;\n        }\n        #the_content_window h6{\n            font-size:12px;\n        }\n    `;\n    let __style = document.createElement('style');\n    __style.id = \"simple_reader_css\";\n    if (__style.styleSheet){\n        __style.styleSheet.cssText = __css;\n    } else {\n        __style.appendChild(document.createTextNode(__css));\n    }    \n    __head.appendChild(__style);\n    let __body = document.body || document.getElementsByTagName('body')[0];\n    window.setTimeout(function(){\n        let __documentClone = document.cloneNode(true);\n        let __article = new Readability(__documentClone).parse();\n        let __mask = document.createElement('div');\n        __mask.classList.add('panel_mask');\n        __body.appendChild(__mask);\n        let __panel = document.createElement('div');\n        __panel.id = 'simple_reader_panel';\n        let __html = '&lt;div class=\"head\">'+__article.siteName;\n        __html += '&lt;a href=\"javascript:;\" class=\"simple_reader_close\" onclick=\"close_reader_panel()\">&amp;cross;&lt;\/a>';\n        __html += '&lt;\/div>';\n        __html += '&lt;div class=\"author\">&lt;a href=\"'+window.location.href+'\">'+__article.byline+'&lt;\/a>&lt;\/div>';\n        __html += '&lt;div id=\"the_content_window\">';\n        __html += '&lt;h1 class=\"a_title\">'+__article.title+'&lt;\/h1>';\n        __html += __article.content;\n        __html += '&lt;\/div>';\n        __panel.innerHTML = __html;\n        __body.appendChild(__panel);\n    },1000);\n    window.close_reader_panel = function(){\n        document.querySelector('#simple_reader_css').remove();\n        document.querySelector('#simple_reader_panel').remove();\n    };\n})();<\/pre>\n\n\n\n<p>Next, we&#8217;ll look at how to install and use the bookmarklet!<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_7_Install_the_bookmarklet\"><\/span>Step 7 : Install the bookmarklet<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>First, you need to enable your web browser&#8217;s bookmark bar. This can be found in the settings section of the browser you are using. You can also <a href=\"https:\/\/www.makeuseof.com\/show-hide-bookmarks-bar-chrome-edge-firefox-vivaldi-opera\/\" target=\"_blank\" rel=\"noreferrer noopener\">check this article<\/a> to learn how to turn on your bookmarks bar.<\/p>\n\n\n\n<p>To install the article reader bookmarklet, simply follow the same steps as you would when you create a standard bookmark. Here&#8217;s an example for the Brave browser : Right-click on the bookmarks bar and select &#8220;Add Page&#8221;.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"453\" src=\"https:\/\/clifford.io\/blog\/wp-content\/uploads\/2023\/07\/bookmarklet-add-page-1.png\" alt=\"Add page on bookmarks bar\" class=\"wp-image-82\" srcset=\"https:\/\/clifford.io\/blog\/wp-content\/uploads\/2023\/07\/bookmarklet-add-page-1.png 800w, https:\/\/clifford.io\/blog\/wp-content\/uploads\/2023\/07\/bookmarklet-add-page-1-300x170.png 300w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p>Next, enter &#8220;Simple Reader&#8221; (or any name you would prefer) in the &#8220;Name&#8221; field. Then, copy the full code of the bookmarklet and paste it in the &#8220;URL&#8221; field. Click &#8220;Save&#8221;. Make sure this is shown on the bookmarks bar so that you can access it conveniently. If everything goes well, you should see the &#8220;Simple Reader&#8221; on your bookmarks bar.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"454\" src=\"https:\/\/clifford.io\/blog\/wp-content\/uploads\/2023\/07\/bookmarks-bar.png\" alt=\"Bookmarks bar\" class=\"wp-image-84\" srcset=\"https:\/\/clifford.io\/blog\/wp-content\/uploads\/2023\/07\/bookmarks-bar.png 800w, https:\/\/clifford.io\/blog\/wp-content\/uploads\/2023\/07\/bookmarks-bar-300x170.png 300w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p>Great. Installation is done! Now, let&#8217;s try it out.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Step_8_Test_the_Bookmarklet\"><\/span>Step 8 : Test the Bookmarklet<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Visit any web article page. Try this one &#8211; https:\/\/www.makeuseof.com\/chrome-simulate-color-blindness\/<\/p>\n\n\n\n<p>Once the page loads, click on your bookmarklet. You will a side panel with the main article sections displayed in a simplified and clutter-free manner.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"418\" src=\"https:\/\/clifford.io\/blog\/wp-content\/uploads\/2023\/07\/bookmarklet-example.png\" alt=\"\" class=\"wp-image-88\" srcset=\"https:\/\/clifford.io\/blog\/wp-content\/uploads\/2023\/07\/bookmarklet-example.png 800w, https:\/\/clifford.io\/blog\/wp-content\/uploads\/2023\/07\/bookmarklet-example-300x157.png 300w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>That&#8217;s all!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>We&#8217;ll explore step-by-step on how to make a bookmarklet that generates a clutter-free, simplified view of any web page, making it easy on the eyes. We&#8217;ll also look at how to set up the bookmarklet on your web browser.<\/p>\n","protected":false},"author":1,"featured_media":91,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[16,18,19,17],"class_list":["post-70","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-development","tag-bookmarklet","tag-css","tag-html","tag-javascript"],"_links":{"self":[{"href":"https:\/\/clifford.io\/blog\/wp-json\/wp\/v2\/posts\/70","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/clifford.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/clifford.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/clifford.io\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/clifford.io\/blog\/wp-json\/wp\/v2\/comments?post=70"}],"version-history":[{"count":5,"href":"https:\/\/clifford.io\/blog\/wp-json\/wp\/v2\/posts\/70\/revisions"}],"predecessor-version":[{"id":106,"href":"https:\/\/clifford.io\/blog\/wp-json\/wp\/v2\/posts\/70\/revisions\/106"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/clifford.io\/blog\/wp-json\/wp\/v2\/media\/91"}],"wp:attachment":[{"href":"https:\/\/clifford.io\/blog\/wp-json\/wp\/v2\/media?parent=70"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/clifford.io\/blog\/wp-json\/wp\/v2\/categories?post=70"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/clifford.io\/blog\/wp-json\/wp\/v2\/tags?post=70"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}