Day 331: death by iframes

engineering

tl;dr some days of indie hacking are fun, and some days are hard and frustrating. today was the latter. and so it is.

yesterday, i wrote down goals for getting browserflow cloud working end-to-end, but when i woke up this morning, i felt inspired to tackle the other thing i had written down at the beginning of quarantine as a deep work candidate: improving the editing experience.

right now, if you want to get the text of an element, you have to:

  1. click on the plus button to add a command

  2. filter the command list / scroll and click “get element text”

  3. click the “select” button

  4. select the element

this isn’t terrible, but it can get tedious, especially if you’re selecting multiple elements from the page. my goal is to try to make everything possible within recording mode so that you can just click on an element, select “get element text”, and fill in the variable name on the page itself so that you don’t have to go back and forth between the editor and the page.

so i set about doing that today, thinking that it shouldn’t be too hard.

a whole day of struggling later, i feel freaking pooped and i’m nowhere near done. i fell into a trap that sometimes eats me alive: getting stuck thinking through all the edge cases

building the feature i described would be pretty easy on a normal page. but the internet doesn’t just have normal pages. specifically, there are pages that use iframes which makes implementing everything 100x more complicated.

for example, when someone selects an element, i want to show an input box on the page that lets them put in the name of the variable that they want to assign to it. what happens if the element is inside an iframe? should the input box be inside the iframe or on the top frame? what if the iframe doesn’t have enough space to show the input box? ok so i should put it on the top frame. but where? if i want to put it next to the element that they selected, then i need to get the coordinates of that element but if it’s inside an iframe or a series of iframes, i need to offset the coordinates by the coordinates of the iframes to get the position in the top frame.

then there’s the matter of actually letting the user select the element inside the iframe. when their mouse moves into/out of an iframe, it appears as if they’re just moving their mouse from one part of the page to the other, but browserflow needs to do hella message passing to synchronize states and figure out what the user is pointing at

i hate iframes and i wish i could just let myself build things without supporting them but i know it would eat me up every time someone tells me that browserflow doesn’t work on some site or another because iframes are still widely used here in the year of our lord 2020

chrome extensions are hard, let’s go shopping

(if you’re here from my taiwan post, welcome to my journal. sometimes it’s educational, sometimes it’s weird, and sometimes it’s filled with boring tech garbage like this that puts even me to sleep. you never know what you’re gonna get!)