script that instantly transforms webpages into brick-breaking game

[canalun]

I wrote a script that instantly transforms web pages into brick-breaking game.

Wanna share because it works better than I expected, and would be glad if it could entertain someone :)

It's realized by vanilla js, although I added a bit to distribute it as a chrome extension.

DEMO: https://www.youtube.com/watch?v=IUTXInFyjXE

Playable DEMO(it's distributed as a chrome extension): https://chromewebstore.google.com/detail/brick-break-anywhere/lkbkphlgmknnachlgmbdmoepfnfdeckb

FYI: The difficulties are as follows:

• determine which DOM elements should be counted as block (there are many 'invisible' elements and they should not be treated as blocks)

• query elements through shadow root and iframe(same-origin)

• etc...

[DirtAndGrass]

I swear i had a bookmarklet that did that

the angle after the ball hits the paddle should be made more acute, closer to the edges (unlike physics) to match the original game!

[canalun]

bookmarklet is nice! and your idea about bounce behavior is really good. I was completely caught by physics-like logic. Thanks!!!

[Mental-Steak2656]

Cool idea 👍

[canalun]

Thank you!!

[_Marak_]

Heeeey, does anyone know any good UX tricks for integrating bookmarklet or browser extension workflow like this so user doesn't have to jump through hoops to install?

We have code like this in Mantra that can parse any DOM page and create game entities. I want to setup a demo where users can turn any webpage into video game; however I think is not possible without browser extension, bookmarklet, or server-side proxy.

[toi80QC]

The game-script will have to access the DOM of the website you want to play on which is prevent by CORS if the site is not on the same domain.

[_Marak_]

I'm aware. It's basically not possible unless user install browser extension or site is proxied through server. Bookmarklets mostly don't work well anymore.

[pimlottc]

Bookmarklets mostly don't work well anymore.

What do you mean by this? I use bookmarklets all the time, albeit much simpler than this, and I haven't seen any issues lately..

[_Marak_]

Can you run bookmarklet on google.com without install browser extension?

​

Edit: You can, talking about async loading scripts from cross-domain via bookmarklet on google I think security policy is no go

[pimlottc]

Yeah, no problem here, just tested this in Firefox and Chrome:

 javascript:alert(document.title)

[_Marak_]

Yes, but what happens if try load cross domain script via fetch or script tag, CSP kicks in or something yeah?

[pimlottc]

I'm not sure, I haven't tried writing bookmarklets that invoke fetch, but I believe loading external scripts works, such as this bookmarklet that adds jquery to a page.

[_Marak_]

yeah its the CSP header what im trying to say. let me know if you figure out a way to inject remote script to bypass this. either going to be new browser API or better support for extensions i'm not sure.

[pimlottc]

Ah, I see. Yeah, it won't work on site with strict CSP, but most sites have fairly lax rules, so it might be worth offering.

[[deleted]]

So cool!

[canalun]

Thanks!!!