The Wiert Corner – irregular stream of stuff

Jeroen W. Pluimers on .NET, C#, Delphi, databases, and personal interests

  • My badges

    Mastodon

  • Twitter Updates

  • My Flickr Stream

    20140508-Delphi-2007--Project-Options--Cannot-Edit-Application-Title-HelpFile-Icon-Theming20140430-Fiddler-Filter-Actions-Button-Run-Filterset-now20140424-VMware-Fusion-6.0.3.-no-reclaimable
    More Photos

  • Pages

  • All categories

  • Enter your email address to subscribe to this blog and receive notifications of new posts by email.

    Join 1,862 other subscribers

Archive for the ‘Web Browsers’ Category

« Previous Entries
Next Entries »

Bookmarklet-Youtube: Add all subscriptions to watch-later

Posted by jpluimers on 2023/05/16

Saved because I want to learn how to save a YouTube URL into a [Wayback/Archive] YouTube: Watch later play list, as doing it by hand takes at least 10 seconds per URL.

[Wayback/Archive] Bookmarklet-Youtube: Add all subscriptions to watch-later

–jeroen

Posted in Bookmarklet, Development, GoogleBookmarks, JavaScript/ECMAScript, Power User, Scripting, Software Development, Web Browsers | Leave a Comment »

Some more links on bookmarklets: this time ones that operate on (selection of text on) the current page

Posted by jpluimers on 2023/05/04

As a continuation of the various bookmarklet posts, here is one with information on bookmarklets that operate on the current page, for instance when you already got text selected.

All via [Wayback/Archive] bookmarklet that works on link of current selection – Google Search

–jeroen

Posted in Bookmarklet, Development, JavaScript/ECMAScript, Power User, Scripting, Software Development, Web Browsers, Web Development | Leave a Comment »

I want to check out how to do POST requests using bookmarklets in order to save URLs to the WayBack machine

Posted by jpluimers on 2023/04/27

I want to check out how to do POST requests using bookmarklets in order to save URLs to the Wayback machine.

The reason is that every few months or so, saving a page the normal way through a something like https://web.archive.org/save/URL fails for one reason or the other, but going to https://web.archive.org/save, then entering URL, and pressing “SAVE PAGE” button works fine:

The the failing way above is using a GET request, the succeeding workaround will open https://web.archive.org/save/URL  using the below POST request (where I omitted some HTTP cookies and HTTP header fields for brevity).

  • POST request using PowerShell:
    $session = New-Object Microsoft.PowerShell.Commands.WebRequestSession
$session.UserAgent = "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36"
Invoke-WebRequest -UseBasicParsing -Uri "https://web.archive.org/save/URL" `
-Method "POST" `
-WebSession $session `
-Headers @{
"method"="POST"
  "origin"="https://web.archive.org"
  "referer"="https://web.archive.org/save"
} `
-ContentType "application/x-www-form-urlencoded" `
-Body "url=URL&capture_outlinks=on&capture_all=on&capture_screenshot=on"
  • POST request using cURL on bash:
    curl 'https://web.archive.org/save/URL' \
  -H 'origin: https://web.archive.org' \
  -H 'content-type: application/x-www-form-urlencoded' \
  -H 'referer: https://web.archive.org/save' \
  --data-raw 'url=URL&capture_outlinks=on&capture_all=on&capture_screenshot=on' \
  --compressed
  • POST request using the fetch API in JavaScript:
    fetch("https://web.archive.org/save/URL", {
  "headers": {
    "content-type": "application/x-www-form-urlencoded",
  },
  "referrer": "https://web.archive.org/save",
  "body": "url=URL&capture_outlinks=on&capture_all=on&capture_screenshot=on",
  "method": "POST",
  "mode": "cors"
});

BTW: Yes, I know that URL is not a valid URL, so it will return a page with “http://url/ URL syntax is not valid.“.

All links below via [Wayback/Archive] bookmarklet post request – Google Search:

I tried to put createFormSubmittingBookmarklets/createFormSubmitBookmarklets.js in a bookmarklet using both userjs.up.seesaa.net/js/bookmarklet.html and skalman.github.io/UglifyJS-online. That failed: somehow this code does not want to run as bookmarklet.

Running it from the console is fine though, and gave me this basic bookmarklet template:

javascript:function sf(ur,ty,fd){function me(tg,pr){var el=document.createElement(tg);for(const[nm,vl]of Object.entries(pr)){el.setAttribute(nm,vl);}return el}const fm=me("form",{action:ur,method:ty,style:"display:hidden;"});for(const[nm,vl]of Object.entries(fd)){fm.appendChild(me("input",{name:nm, value:vl}))}document.body.appendChild(fm);fm.submit()}sf("https://web.archive.org/save","post",{"url":"URL","capture_outlinks":"on","capture_all":"on","capture_screenshot":"on","wm-save-mywebarchive":"on","email_result":"on","":"SAVE PAGE"});

There bold URL there is the URL to be saved. I need to test this, then rework it to become parameterised.

–jeroen

Posted in Bookmarklet, Development, JavaScript/ECMAScript, Power User, Scripting, Software Development, Web Browsers, Web Development | Leave a Comment »

For my reading list: some links on Twitter bookmarklets

Posted by jpluimers on 2023/03/15

Yup, web browser bookmarklets, though hardly published about any more, I still like them (and wrote about them before). With a little bit, usually unreadable, JavaScript, they can add magical functionality to your browser.

So here are some links on Twitter related bookmarklets:

All via [Wayback/Archive] twitter bookmarklet – Google Search.

–jeroen

Posted in Bookmarklet, Development, JavaScript/ECMAScript, Power User, Scripting, Software Development, Web Browsers, Web Development | Leave a Comment »

google chrome devtools – Use JavaScript to set value of textbox when .value and events don’t seem to work – Stack Overflow

Posted by jpluimers on 2022/11/29

For my link archive: [Wayback/Archive] google chrome devtools – Use JavaScript to set value of textbox when .value and events don’t seem to work – Stack Overflow

TL;DR

Sometimes fields are blocked from pasting values.

Normally a trick like this works in the chrome development panel console:

document.getElementById('nonPasteElementID').value = 'myValueFromTheClipboard'

With some web development environments this does not work.

For react, after finding the react render name for the input (in the case of the answer, it was “reactNameForInputElement“) this is a solution:

To make it work you will need this:

const input = document.getElementById('nonPasteElementID');
const event = new Event('reactNameForInputElement', { bubbles: true });
input.value = '1';
input.dispatchEvent(event);

–jeroen

Posted in Chrome, Chrome, Development, Google, JavaScript/ECMAScript, Power User, Scripting, Software Development, Web Browsers, Web Development | Leave a Comment »

Online Image Dimension & Size Finder from URL | MyFreeOnlineTools

Posted by jpluimers on 2022/11/10

This was the only site I could find that can you can enter a URL and get the image dimensions.

[Wayback/Archive.is] Onlie Image Dimension & Size Finder from URL | MyFreeOnlineTools

Yes, you can use web-browser tools for this, but the responsive web usually gives you the wrong size.

And yes, it should be “Online”, not “Onlie”, but I used the web-page title which already has the error.

Read the rest of this entry »

Posted in Bookmarklet, Development, Power User, Software Development, Web Browsers, Web Development | Leave a Comment »

Converting an html dl (delimited list) on a page to a table from the Chrome console

Posted by jpluimers on 2022/09/14

A while ago, I wanted to convert the dl delimited list html element on a web page into a regular table so I could more easily reorder the data into cells.

So I ran the below bit of code in the Chrome Console after first putting the mentioned table with id here_table in the place where I wanted the table to be included:


<table id="here_table"></table>

view raw

_table.html

hosted with ❤ by GitHub


var arr = $("#delimitedList").children().map(function () {
return $(this).html();
}).get();
for (var i = 0; i < arr.length; i += 2) {
$('#here_table').append('<tr><td>' + arr[i] + '</td><td>' + arr[i + 1] + '</td></tr>');
}

view raw

convertDlToTable.js

hosted with ❤ by GitHub

For this script to work, you need jQuery, so yesterday I wrote Better, Stronger, Safer jQuerify Bookmarklet | Learning jQuery.

The code is based on [Wayback/Archive.is] Rebuild each definition list () as a table using JQuery – Stack Overflow (thanks [Wayback/Archive.is] easy!) with an important adoption instead of calling text() to get the textual dt and dd information, it uses html() so the original innerHTML is being preserved.

Some similar JavaScript pieces of code are at [Wayback/Archive.is] Turning HTML into a nested JavaScript array with jQuery – Stack Overflow.

Related:

–jeroen

Posted in Bookmarklet, Chrome, Development, Google, JavaScript/ECMAScript, jQuery, Pingback, Power User, Scripting, Software Development, Stackoverflow, Web Browsers, Web Development | Leave a Comment »

Better, Stronger, Safer jQuerify Bookmarklet | Learning jQuery

Posted by jpluimers on 2022/09/06

For my link archive, the [Wayback] Better, Stronger, Safer jQuerify Bookmarklet | Learning jQuery

Via: [Wayback/Archive.is] Include jQuery in the JavaScript Console – Stack Overflow (thanks [Wayback/Archive.is] brichins!)

When you do not have jQuery installed, then the Chrome console will give you the error [Wayback/Archive.is] javascript – TypeError: $(...).children is not a function – Stack Overflow which has code to load jQuery in this gist: [Wayback/Archive.is] use jQuery in Chrome javascript console.

If this bookmarklet ever starts to fail, then I need to check out these links:

The content of the JQueryfi bookmarklet is in the below gist:


javascript:(function(){var%20el=document.createElement(%22div%22),b=document.getElementsByTagName(%22body%22)[0],otherlib=!1,msg=%22%22;el.style.position=%22fixed%22,el.style.height=%2232px%22,el.style.width=%22220px%22,el.style.marginLeft=%22-110px%22,el.style.top=%220%22,el.style.left=%2250%25%22,el.style.padding=%225px%2010px%22,el.style.zIndex=1001,el.style.fontSize=%2212px%22,el.style.color=%22#222%22,el.style.backgroundColor=%22#f99%22;function%20showMsg(){var%20txt=document.createTextNode(msg);el.appendChild(txt),b.appendChild(el),window.setTimeout(function(){txt=null,typeof%20jQuery==%22undefined%22?b.removeChild(el):(jQuery(el).fadeOut(%22slow%22,function(){jQuery(this).remove()}),otherlib&&(window.$jq=jQuery.noConflict()))},2500)}if(typeof%20jQuery!=%22undefined%22)return%20msg=%22This%20page%20already%20using%20jQuery%20v%22+jQuery.fn.jquery,showMsg();typeof%20$==%22function%22&&(otherlib=!0);function%20getScript(url,success){var%20script=document.createElement(%22script%22);script.src=url;var%20head=document.getElementsByTagName(%22head%22)[0],done=!1;script.onload=script.onreadystatechange=function(){!done&&(!this.readyState||this.readyState==%22loaded%22||this.readyState==%22complete%22)&&(done=!0,success(),script.onload=script.onreadystatechange=null,head.removeChild(script))},head.appendChild(script)}getScript(%22http://code.jquery.com/jquery.min.js%22,function(){return%20typeof%20jQuery==%22undefined%22?msg=%22Sorry,%20but%20jQuery%20was%20not%20able%20to%20load%22:(msg=%22This%20page%20is%20now%20jQuerified%20with%20v%22+jQuery.fn.jquery,otherlib&&(msg+=%22%20and%20noConflict().%20Use%20$jq(),%20not%20$().%22)),showMsg()})})();

view raw

jQuerify.url

hosted with ❤ by GitHub


javascript:(function(){var el=document.createElement("div"),b=document.getElementsByTagName("body")[0],otherlib=!1,msg="";el.style.position="fixed",el.style.height="32px",el.style.width="220px",el.style.marginLeft="-110px",el.style.top="0",el.style.left="50%",el.style.padding="5px 10px",el.style.zIndex=1001,el.style.fontSize="12px",el.style.color="#222",el.style.backgroundColor="#f99";function showMsg(){var txt=document.createTextNode(msg);el.appendChild(txt),b.appendChild(el),window.setTimeout(function(){txt=null,typeof jQuery=="undefined"?b.removeChild(el):(jQuery(el).fadeOut("slow",function(){jQuery(this).remove()}),otherlib&&(window.$jq=jQuery.noConflict()))},2500)}if(typeof jQuery!="undefined")return msg="This page already using jQuery v"+jQuery.fn.jquery,showMsg();typeof $=="function"&&(otherlib=!0);function getScript(url,success){var script=document.createElement("script");script.src=url;var head=document.getElementsByTagName("head")[0],done=!1;script.onload=script.onreadystatechange=function(){!done&&(!this.readyState||this.readyState=="loaded"||this.readyState=="complete")&&(done=!0,success(),script.onload=script.onreadystatechange=null,head.removeChild(script))},head.appendChild(script)}getScript("http://code.jquery.com/jquery.min.js&quot;,function(){return typeof jQuery=="undefined"?msg="Sorry, but jQuery was not able to load":(msg="This page is now jQuerified with v"+jQuery.fn.jquery,otherlib&&(msg+=" and noConflict(). Use $jq(), not $().")),showMsg()})})();

view raw

UrlDecoded.js

hosted with ❤ by GitHub

–jeroen

Posted in Bookmarklet, Development, JavaScript/ECMAScript, jQuery, Power User, Scripting, Software Development, Web Browsers, Web Development | Leave a Comment »

iOS/Android Privacy: InAppBrowser.com – see what JavaScript commands get injected through an in-app browser · Felix Krause

Posted by jpluimers on 2022/08/31

Especially on Archive, but also on Android and other mobile operating systems, mobile apps can have their in-app browsers to circumvent the OS provided wrapper around the system browser.

On iOS, the Safari is the only system browser engine whereas on Android you can have other engines too, so less Android applications have in-app browsers.

Most of those in-app browsers are in social media applications that go to great length to keep their users inside a walled garden.

The site [Wayback/Archive] inAppBrowser.com helps checking how severely information is leaked through the in-app browser as those potentially have a lot of control. TikTok is worst capturing all input including credentials like user names and passwords.

Read the rest of this entry »

Posted in Chrome, Conference Topics, Conferences, Development, Event, Firefox, iOS Development, JavaScript/ECMAScript, Mobile Development, Power User, Privacy, Safari, Scripting, Security, Software Development, Web Browsers, Web Development | Leave a Comment »

Converting inline svg xml to png

Posted by jpluimers on 2022/07/19

A while ago, I had a web page showing the logo as inline svg xml code.

Edit 20231209: [Wayback/Archive] Render SVG to PNG: Edit fiddle – JSFiddle – Code Playground (explained in [Wayback/Archive] html – Convert embedded SVG to PNG in-place – Stack Overflow by [Wayback/Archive] User anatoly techtonik – Stack Overflow) works way better than the InfoHeap link:

  1. Replace the svg element in it (but keep the id="inputSvg" attribute!),
  2. Run the fiddle,
  3. Save the rendered PNG file by right-clicking the “PNG (Save link as..)” link then saving the file.

Original content

It took a while to find a place to convert that on-line: [Wayback/Archive.is] inline svg xml to png – online html sandbox – InfoHeap (via [Wayback/Archive.is] Convert svg xml text to png image using canvas – InfoHeap):

The solution is a bit of JavaScript (quoted below) that you can run-online: modify the svg bit in it, then run it, scroll down in the result and verify if the canvas fits (when not: adapt the canvas side, then re-run).

The svg xml code needs to be all on one line, so remove any line breaks in it before running.

I have tested it in Chrome, but it should work in non-Chromium browsers like Firefox as well.

The inner workings of the JavaScript conversion code is explained in [Wayback/Archive.is] html – Convert embedded SVG to PNG in-place – Stack Overflow with more demo code at [Archive.is] Rasterizing In-Document SVG (thanks [Wayback] Phrogz!).

Related: [Archive.is] Jeroen Wiert Pluimers on Twitter: “Nieuwe logo, oude logo. Vrijwel alle werknemers werden een halve dag naar huis gestuurd om ruimte te maken voor de genodigden voor de zodat die de introductie van naam en logo konden bijwonen. Heel goed om verbinding te verliezen met je echte doelgroep. … “

Provalu logo

MareGroep logo

--jeroen


<div id="diagram_image">
<svg id="inputSvg" xmlns="http://www.w3.org/2000/svg&quot; xmlns:inkspace="http://www.inkscape.org/namespaces/inkscape&quot; xmlns:xlink="http://www.w3.org/1999/xlink&quot; viewBox="0 0 640 120">
<defs id="defs_block">
<filter height="1.504" id="filter_blur" inkspace:collect="always" width="1.1575" x="-0.07875" y="-0.252">
<feGaussianBlur id="feGaussianBlur3780" inkspace:collect="always" stdDeviation="4.2" />
</filter>
</defs>
<title>blockdiag</title>
<desc/>
<rect fill="rgb(0,0,0)" height="40" stroke="rgb(0,0,0)" style="filter:url(#filter_blur);opacity:0.7;fill-opacity:1" width="128" x="67" y="46" />
<rect fill="rgb(0,0,0)" height="40" stroke="rgb(0,0,0)" style="filter:url(#filter_blur);opacity:0.7;fill-opacity:1" width="128" x="259" y="46" />
<rect fill="rgb(0,0,0)" height="40" stroke="rgb(0,0,0)" style="filter:url(#filter_blur);opacity:0.7;fill-opacity:1" width="128" x="451" y="46" />
<rect fill="rgb(255,255,255)" height="40" stroke="rgb(0,0,0)" width="128" x="64" y="40" />
<text fill="rgb(0,0,0)" font-family="sans-serif" font-size="11" font-style="normal" font-weight="normal" text-anchor="middle" textLength="55" x="128" y="66">discovery</text>
<rect fill="rgb(255,255,255)" height="40" stroke="rgb(0,0,0)" width="128" x="256" y="40" />
<text fill="rgb(0,0,0)" font-family="sans-serif" font-size="11" font-style="normal" font-weight="normal" text-anchor="middle" textLength="55" x="320" y="66">execution</text>
<rect fill="rgb(255,255,255)" height="40" stroke="rgb(0,0,0)" width="128" x="448" y="40" />
<text fill="rgb(0,0,0)" font-family="sans-serif" font-size="11" font-style="normal" font-weight="normal" text-anchor="middle" textLength="55" x="512" y="66">reporting</text>
<path d="M 192 60 L 248 60" fill="none" stroke="rgb(0,0,0)" />
<polygon fill="rgb(0,0,0)" points="255,60 248,56 248,64 255,60" stroke="rgb(0,0,0)" />
<path d="M 384 60 L 440 60" fill="none" stroke="rgb(0,0,0)" />
<polygon fill="rgb(0,0,0)" points="447,60 440,56 440,64 447,60" stroke="rgb(0,0,0)" />
</svg>
</div>
<img id="outputPngImage" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4
//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="/>
<span id="outputPngLinkSpan">
<a href="">PNG (Save link as..)</a>
</span>

view raw

page-body.html

hosted with ❤ by GitHub


class SVGtoPNGDataURL {
constructor() {
this.canvas = document.createElement('canvas'); // Not shown on page
this.canvas2DContext = this.canvas.getContext('2d');
this.loaderImage = new Image; // Not shown on page
}
// Generate PNG data URL from SVG and send it to callback function when ready
go(svgElement, dataUrlCallback) {
var svgAsXML = (new XMLSerializer).serializeToString( svgElement );
this.loaderImage.width = this.canvas.width = svgElement.clientWidth;
this.loaderImage.height = this.canvas.height = svgElement.clientHeight;
var self = this;
this.loaderImage.onload = function() {
self.canvas2DContext.drawImage( self.loaderImage, 0, 0, self.loaderImage.width, self.loaderImage.height );
dataUrlCallback(self.canvas.toDataURL());
};
this.loaderImage.src = 'data:image/svg+xml,' + encodeURIComponent( svgAsXML );
}
};
var converter = new SVGtoPNGDataURL();
var inputSvgElement = document.querySelector('#inputSvg'), // Inline SVG element
outputPngImage = document.querySelector('#outputPngImage'), // Where to draw the result
outputPngLink = document.querySelector('#outputPngLinkSpan a');
converter.go(inputSvgElement, dataUrlCallback=function(dataURL) {
outputPngImage.src = dataURL;
outputPngLink.href = dataURL;
});

view raw

render-script.js

hosted with ❤ by GitHub

Posted in Chrome, Development, Firefox, JavaScript/ECMAScript, Power User, Scripting, Software Development, Web Browsers, Web Development | Leave a Comment »

« Previous Entries
Next Entries »