DEV Community

mike dg
mike dg

Posted on

4 1

I made an extension to paste images into dev.to

The extension is available here
https://github.com/mikedg1/dev.to.paste

At some point in the near future, I plan on going through the official publishing process. But it's out in source for now.
There's a few things in there that I'd like to fix before letting it completely loose too. Things like too much logging and relying on setInterval because I could not get any DOM changes to register when the url for the image upload updates.

One of the things that keeps me from writing articles is getting the non-textual content into the article easily.

Most editors let you paste them directly in, not dev.to :( You need to have a file and upload it.

We can fix that, and every image in the article was pasted via this extension.

My Process

I searched for the id of the file input element and wound up discovering this.
Alt Text
The important part is the onChange. We will need to trigger that so the rest of the website does it's thing.

Alt Text
This block waits for a paste, grabs the files if you have an image, then moves through the upload process programatically.

After the image is uploaded, we get a url that needs to be automatically inserted. Unfortunately, I ran into issues watching the DOM for value changes, so we wound up with using setInterval to check every second.

Alt Text

Not being a web developer, I just grabbed insertAtCursor from some wonderful Stack Overflow post.

Hostinger image

Get n8n VPS hosting 3x cheaper than a cloud solution

Get fast, easy, secure n8n VPS hosting from $4.99/mo at Hostinger. Automate any workflow using a pre-installed n8n application and no-code customization.

Start now

Top comments (1)

Collapse
 
heymarkkop profile image
Mark Kop

Exactly what I was looking for!
Perhaps you could add some doc on how to import it to the browser

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay