Address Bar Scripts

You don't have to be a coder to have fun with these URL bar scripts.

Todays article is kind of technical. But If you prefer something else, please check out:
https://pau1.substack.com/p/all-the-articles

Using data:text/html, in the browser’s address bar can be a neat way to run small HTML or JavaScript snippets directly in your browser. However, it has both advantages and limitations, which are good to understand, especially for web development or testing.

Advantages of data:text/html Scripts

1. Quick Testing: It’s a handy tool for running simple HTML or JavaScript snippets without setting up files or servers. For example, testing JavaScript functions or experimenting with HTML structure can be done immediately.

2. Offline Compatibility: Since the code is directly embedded, it doesn’t rely on any external files or server access. This can be useful for quick demonstrations or when testing in a network-restricted environment.

3. Portable and Shareable: You can encode short HTML/JavaScript code as a data:text/html URL and share it with others, making it useful for brief examples or teaching. This can also be a useful alternative to JSFiddle or CodePen for small snippets.

4. Browser-Specific Testing: This allows testing in different browsers to see how they render basic HTML and JavaScript, helping to quickly check cross-browser compatibility for simple code.

Limitations of data:text/html Scripts

1. Security Restrictions: Browsers heavily restrict what data:text/html URLs can do. Many modern browsers limit access to JavaScript and prevent most external network requests for security reasons. This means you won’t have access to the same functionality as you would in a regular webpage.

2. No File Access: Since data:text/html scripts are embedded URLs, they can’t interact with local files (no file:// access), and APIs like File or FileReader may not function as expected.

3. CSP (Content Security Policy) Issues: Some browsers and environments apply CSP restrictions on data URLs, which can prevent certain JavaScript features from executing. For example, loading external scripts or stylesheets may be blocked.

4. Limited Code Length: There’s a practical limit to how much HTML and JavaScript you can embed, as the address bar has a character limit (usually around 2,000–2,500 characters). This makes it impractical for larger or complex code.

5. No Persistent State: There’s no storage capability (like cookies or localStorage) associated with data:text/html scripts, so anything that requires state persistence is impractical.

6. Compatibility Variability: Not all browsers support data:text/html URLs consistently, especially with JavaScript embedded. Some mobile browsers may not handle them at all, making it unreliable for anything but quick desktop testing.

7. Readability and Maintainability: Large code snippets embedded in a URL are difficult to read and edit. Debugging, especially when dealing with long code, becomes challenging without the usual developer tools available on normal web pages

8. Encode and Decode before use: Run your “script“ through an encoding tool to make it work. Here is the free tool I use: https://https://www.urlencoder.org/
They have a good write up about the tool and how it encodes spaces, html, css source codes, and so on. See below for the example code to encode.

Practical Use Cases

Due to these limitations, data:text/html URLs are most suitable for:

• Running quick, self-contained HTML/JavaScript snippets.

• Testing isolated HTML or JavaScript features.

• Sharing tiny demos for educational purposes.

However, for anything beyond basic, isolated testing, it’s typically better to use a dedicated HTML file or a sandbox environment like JSFiddle or CodePen, where you have access to a broader range of features and fewer restrictions.

Example:

Here is the code snippet I encoded to work in the address bar:

I wrote an OCR reader here, https://1app.ca/ocr.html which extracts the words in a picture into just the text.

Insert the following in your chrome address bar, and click return to see the output: Encoded output:

data:text/html,%3Chtml%3E%0A%20%20%3Chead%3E%0A%20%20%20%20%3C%21--%20Load%20Space%20Grotesk%20font%20from%20Google%20Fonts%20--%3E%0A%20%20%20%20%3Clink%20href%3D%22https%3A%2F%2Ffonts.googleapis.com%2Fcss2%3Ffamily%3DSpace%2BGrotesk%3Awght%40400%26display%3Dswap%22%20rel%3D%22stylesheet%22%3E%0A%20%20%3C%2Fhead%3E%0A%20%20%3Cbody%20style%3D%22background-color%3A%230f172a%3B%20font-family%3ASpace%20Grotesk%2C%20sans-serif%3B%20color%3A%23d6d6d6%3B%20font-size%3A16pt%3B%22%3E%0A%20%20%20%20%3C%21--%20Style%20the%20text%20area%20--%3E%0A%20%20%20%20%3Cdiv%20style%3D%22width%3A60%25%3B%20margin%3Aauto%3B%20text-align%3Aleft%3B%22%3E%0A%3Ch1%3EHeadlines%3C%2Fh1%3E%0A%20%20%20%20%20%20%3Cul%3E%0A%20%20%20%20%20%20%20%20%3Cli%3EA%20group%20of%20four%20Polymarket%20accounts%20have%20collectively%20pumped%20about%20%2430%20million%20of%20crypto%20into%20bets%20that%20Donald%20Trump%20will%20win%20the%20presidential%20election.%3C%2Fli%3E%0A%20%20%20%20%20%20%20%20%3Cli%3ECVS%20Health%20replaced%20its%20top%20executive%20as%20it%20warned%20that%20its%20coming%20earnings%20will%20once%20again%20fall%20short%20of%20Wall%20Street%20expectations%2C%20sending%20its%20shares%20down%20about%205%25.%3C%2Fli%3E%0A%20%20%20%20%20%20%20%20%3Cli%3EProcter%20%26%20Gamble%27s%20quarterly%20sales%20slipped%2C%20dented%20by%20a%20weakened%20Chinese%20economy%20and%20conflict%20in%20the%20Middle%20East.%3C%2Fli%3E%0A%20%20%20%20%20%20%20%20%3Cli%3EThe%20Dow%20and%20S%26P%20500%20rose%20less%20than%200.1%25%20and%200.4%25%2C%20respectively%2C%20as%20technology%20stocks%20powered%20the%20indexes%20to%20fresh%20records.%20The%20Nasdaq%20added%200.6%25.%3C%2Fli%3E%0A%20%20%20%20%20%20%20%20%3Cli%3EOpenAI%20and%20Microsoft%20have%20hired%20investment%20banks%20to%20advise%20them%20on%20their%20equity%20negotiation.%3C%2Fli%3E%0A%20%20%20%20%20%20%20%20%3Cli%3ENokia%20announced%20a%20shakeup%20of%20its%20leadership%20team%20that%20includes%20putting%20more%20focus%20on%20geopolitics.%3C%2Fli%3E%0A%20%20%20%20%20%20%20%20%3Cli%3EActivist%20investor%20Jana%20Partners%20has%20built%20a%20stake%20of%20roughly%205%25%20in%20Lamb%20Weston%20and%20plans%20to%20push%20the%20company%20to%20explore%20a%20sale.%3C%2Fli%3E%0A%20%20%20%20%20%20%20%20%3Cli%3EHyundai%20Motor%27s%20India%20unit%20will%20raise%20more%20than%20%243%20billion%20in%20what%20would%20be%20the%20biggest-ever%20IPO%20in%20India.%3C%2Fli%3E%0A%20%20%20%20%20%20%3C%2Ful%3E%0A%20%20%20%20%20%20%3Ch3%3EWorld-Wide%3C%2Fh3%3E%0A%20%20%20%20%20%20%3Cul%3E%0A%20%20%20%20%20%20%20%20%3Cli%3EThe%20Biden%20administration%20is%20seeking%20to%20leverage%20the%20death%20of%20Yahya%20Sinwar%20in%20a%20new%20push%20to%20end%20the%20war%20in%20Gaza%2C%20but%20Israel%20and%20Hamas%20are%20signaling%20that%20they%20aren%27t%20ready%20to%20halt%20the%20fighting.%3C%2Fli%3E%0A%20%20%20%20%20%20%20%20%3Cli%3EThe%20Justice%20Department%20indicted%20the%20chief%20executive%20of%20a%20data-center%20company%20over%20an%20allegedly%20fake%20datacenter%20audit%20used%20to%20win%20business%20with%20the%20SEC.%3C%2Fli%3E%0A%20%20%20%20%20%20%20%20%3Cli%3EFederal%20auto-safety%20regulators%20are%20probing%20Tesla%27s%20automated-driving%20software%20after%20the%20system%20was%20linked%20to%20several%20crashes.%3C%2Fli%3E%0A%20%20%20%20%20%20%20%20%3Cli%3EDonald%20Trump%27s%20campaign%20has%20picked%20up%20Robert%20F.%20Kennedy%20Jr.%27s%20goal%20to%20take%20on%20ultra-processed%20food%20and%20the%20healthcare%20system.%3C%2Fli%3E%0A%20%20%20%20%20%20%20%20%3Cli%3EElectricity%20went%20out%20across%20Cuba%20hours%20after%20its%20government%20ordered%20the%20shutdown%20of%20nonessential%20businesses%20and%20workplaces.%3C%2Fli%3E%0A%20%20%20%20%20%20%20%20%3Cli%3EMany%20recent%20economic%20indicators%20suggest%20Canada%27s%20economic%20growth%20faltered%20in%20the%20third%20quarter.%3C%2Fli%3E%0A%20%20%20%20%20%20%3C%2Ful%3E%0A%20%20%20%20%3C%2Fdiv%3E%0A%20%20%3C%2Fbody%3E%0A%3C%2Fhtml%3E%0A

Should look like this in the browser:

Here are some more creative uses for this script: Just copy and paste into the address bar.

Play a game: 

data:text/html,
%3Ccenter%3E%3Ch1%3EGuess%20the%20Number%3C/h1%3E%3Cp%3EI%27m%20thinking%20of%20a%20number%20between%201%20and%20100.%20Try%20to%20guess%20it!%3C/p%3E%3Cinput%20id%3D%22guess%22%20type%3D%22number%22%20min%3D%221%22%20max%3D%22100%22%3E%3Cbutton%20onclick%3D%22checkGuess()%22%3EGuess%3C/button%3E%3Cp%20id%3D%22result%22%3E%3C/p%3E%3Cscript%3Elet%20secretNumber%20%3D%20Math.floor(Math.random()%20*%20100)%20%2B%201%3Bfunction%20checkGuess()%20%7Blet%20guess%20%3D%20document.getElementById(%27guess%27).value%3Bif(guess%20%3D%3D%20secretNumber)%20%7Bdocument.getElementById(%27result%27).textContent%20%3D%20%27Correct!%27%3B%7D%20else%20if(guess%20%3E%20secretNumber)%20%7Bdocument.getElementById(%27result%27).textContent%20%3D%20%27Too%20high!%27%3B%7D%20else%20%7Bdocument.getElementById(%27result%27).textContent%20%3D%20%27Too%20low!%27%3B%7D%7D%3C/script%3E%3C/center%3E

***

Bouncy Ball: 

data:text/html,
%3Cdiv%20style%3D%22width%3A%2050px%3B%20height%3A%2050px%3B%20background-color%3A%20red%3B%20border-radius%3A%2050%25%3B%20position%3A%20relative%3B%20animation%3A%20bounce%202s%20infinite%3B%22%3E%3C/div%3E%3Cstyle%3E@keyframes%20bounce%20%7B0%25%20%7Btop%3A%200%3B%7D50%25%20%7Btop%3A%20200px%3B%7D100%25%20%7Btop%3A%200%3B%7D%7D%3C/style%3E

***

Choose Your Adventure: 

data:text/html, %3Ch1%3EChoose%20Your%20Adventure%3C/h1%3E%3Cp%3EYou%27re%20standing%20at%20a%20crossroad.%20Do%20you%20go%20left%20or%20right%3F%3C/p%3E%3Cbutton%20onclick%3D%22alert(%27You%20go%20left%20and%20find%20a%20treasure.%27)%22%3EGo%20Left%3C/button%3E%3Cbutton%20onclick%3D%22alert(%27You%20go%20right%20and%20meet%20a%20wizard.%27)%22%3EGo%20Right%3C/button%3E

***

CSS Box Shadow Generator:

data:text/html,
%3Ch1%3EBox%20Shadow%20Generator%3C/h1%3E%3Clabel%3EX%20Offset%3A%3C/label%3E%3Cinput%20id%3D%22xOffset%22%20type%3D%22number%22%20value%3D%225%22%20oninput%3D%22updateShadow()%22%3E%3Cbr%3E%3Clabel%3EY%20Offset%3A%3C/label%3E%3Cinput%20id%3D%22yOffset%22%20type%3D%22number%22%20value%3D%225%22%20oninput%3D%22updateShadow()%22%3E%3Cbr%3E%3Cdiv%20id%3D%22box%22%20style%3D%22width%3A%20100px%3B%20height%3A%20100px%3B%20background-color%3A%20blue%3B%20box-shadow%3A%205px%205px%205px%20black%3B%22%3E%3C/div%3E%3Cscript%3Efunction%20updateShadow()%20%7B%20let%20x%20%3D%20document.getElementById(%27xOffset%27).value%3B%20let%20y%20%3D%20document.getElementById(%27yOffset%27).value%3B%20document.getElementById(%27box%27).style.boxShadow%20%3D%20x%20%2B%20%27px%20%27%20%2B%20y%20%2B%20%27px%205px%20black%27%3B%7D%3C/script%3E

So there you go. Did you know about this before? Thanks for reading.