DEV Community

Cover image for Remixing other people's websites

Remixing other people's websites

Ben Sinclair on October 12, 2018

Why would you want to change the UI of a site you visit? Well, there're loads of reasons: Personalise your experience Remove unwanted ...
Collapse
 
jackharner profile image
Jack Harner 🚀

I'm working on a Firefox Extension that does this for the inventory system ChannelAdvisor that I use a lot at work. If it can save me a single click, I'll find a way to automate it. Things like:

  • Auto-expanding a textarea to show the full text
  • changing quantity inputs into type=number so I can use the arrow keys instead of typing the number
  • Taking dates and counting how many days since so we know if it's within our return policy
  • Click to copy order numbers, product SKUs and more.

Saves me a lot of time and I can share it with my coworkers to make everyone's lives easier.

Collapse
 
moopet profile image
Ben Sinclair

Part of what prompted me to make this post was that at work one of our developers has just converted a userscript into a Chrome extension and we've been looking at different tools for different jobs. Our script reacts to our different development/testing/preprod environments by fetching information about the builds and making it appear in an overlay, with links off to releases and tickets and stuff. That's very bespoke so it's going to remain internal, though.

Are you planning on publishing your extension when it's done?

Collapse
 
jackharner profile image
Jack Harner 🚀

I haven't really thought about publishing it broadly. I'm not sure how much longer I'll be at my current employer and I wouldn't want to release something into the wild that I wouldn't have any way to continue testing or bug-fixing.

Might move it over to GitHub or something so other people could build off it.

Collapse
 
aurelkurtula profile image
aurel kurtula • Edited

Interestingly I did something like this just yesterday.

I have been using gitlab wikis for a few years now as my personal private diary.

Only yesterday I decided to make the thing look exactly how I wanted:

Absolutely no one else would ever benefit from this extension but the way take my notes, and do my research I am shocked I didn't do this before

Collapse
 
moopet profile image
Ben Sinclair

That's exactly where I'm coming from! It doesn't matter if nobody else ever uses it as long as it solves a problem for you :)

Collapse
 
robertcoopercode profile image
Robert Cooper

I did not even think of using a chrome extension to hide elements of a page on a website. I've always been opening up the console, finding an element, and usually applying a display: none. I might start using a chrome extension so that the style modifications persist accross sessions.

Collapse
 
moopet profile image
Ben Sinclair

You might want to check out userstyles as well then :)

Collapse
 
ahmedmusallam profile image
Ahmed Musallam • Edited

This is Awesome, great post!

I am actually working on a bookmarklet manager chrome extension, you can see it here

It's still in early stages but the premise is simple: Allow editing bookmarklets with the awesome monaco editor that powers Visual Studio Code. So you can easily and quickly edit long bookmarklet scripts as if you were using VSCode.

I have so many ideas for this extension, but it's not there yet. And I think it's going to be awesome!

Collapse
 
sebastiannielsen profile image
Sebastian-Nielsen

Is it possible to overwrite a javascript function on a website`?

Collapse
 
moopet profile image
Ben Sinclair

Kinda. It depends what you're trying to do - for example if you want to replace the handler for a DOM event, you can do that easily enough, but other things aren't possible like simply replacing a function. And you can't touch code that takes place inside someone else's closure...

Collapse
 
sebastiannielsen profile image
Sebastian-Nielsen

Can't you block the website's javascript and inject your own? That way you should be able to rewrite whatever you would like, right?

Thread Thread
 
moopet profile image
Ben Sinclair

Yes you can do this, but unless they have the bit of script you want to block in a separate file, then you're likely to be blocking all the other code which is often required to make the site work!

Collapse
 
mornir profile image
Jérôme Pott • Edited

After reading your post, I started blocking elements with uBlocker Origin. I decluttered the websites I visited the most and I am very happy with the result! Thank you for the tips!!