Thread by @farez

I'll be building my first browser extension for @markfolder and tweeting each step here, tagging it #extdev.

Right now: going through the examples at developer.chrome.com/extensions/get…

(I'm building this on Chrome/macOS Catalina)

A browser extension is just another webpage that you can load and run with a button. HTML + Javascript.

Actually an extension can also react to things happening in the browser (events). Not just for clicking on. #extdev

manifest.json - one file to rule them all. This is where you tell the browser everything it needs to know to "boot up" your extension. #extdev

Hello, browser extension! So far, creating an extension that does next to nothing has been pretty easy. #extdev

Browser scripts allow user actions on any URL. Use Page scripts to restrict actions to certain URLs only.

Content scripts run on a specific tab. You can tell the browser to run a content script whenever certain pages load (injected declaratively), or you can run a content script when certain events happen (injected programmatically)

Well, an hour ago I knew nothing about building a browser extension. Now I've built one that changes the background colour of twitter.com, and I can choose from a selection of 4 colours. Have to say the Chrome developer documentation is really good.

Will continue tomorrow. Hopefully we can get some connection to a backend going then.

I want @markfolder to work on all browsers but I don't want to maintain multiple code bases. So I'm reading up on cross-browser extensions: developer.mozilla.org/en-US/docs/Moz…

All extension developers: "phew". hacks.mozilla.org/2020/06/welcom…

Looks like @markfolder will be running browser actions. Even though you can only bookmark tweet pages, you still should be able to access to the extension from any page to view bookmarked tweets. developer.chrome.com/extensions/bro…

Found/was recommended a couple of tools for making cross-browser extension builds less painful:
github.com/abhijithvijaya…
github.com/webextension-t…

Product update: Got the browser extension to save the tweet to the backend. In this case the backend is just an Airtable. 🎉

I'm using the excellent @nocodeapi to expose an API endpoint I can use for testing (this took 10 min 👏🏽).

Left: Clicking on the extension icon to save the tweet. Right: Airtable table showing the tweet's URL being added in real time. Result! 🤙🏽

Done the technical proof of concept to be confident about building it, so now on to the actual build. First up, some user journeys).

User flows done! Would be nice to prototype it but this is simple enough so I’m going to get coding straight away.

By the way I’m using @GoodNotesApp on iPad for note taking and sketching all the above. I’m doing things as fast as pen and paper again and even quicker for sharing.

Just updated the landing page for markfolder.com. Added a few quotes from people who have signed up, most importantly (!), background gradients! 😎

I used the amazingly easy gradient gallery and tool by @itmeoHQ webgradients.com

I want to take the friction out of the signup as much as possible. So now you won't need to fill in any form. Just tweet @markfolder to get on the list. Thanks to @alexhillman for the @IndieHackers article which inspired this.

10 signups and customer validation conversations for @markfolder so far, from just a landing page. I haven't been promoting the product but I have been more engaged on Twitter, LinkedIn and @IndieHackers and there's where the signups have come from.

The best results have been from a) talking about what I'm doing, sharing product progress in the open, and b) helping people by answering their questions if I have the experience and knowledge to answer it in a helpful way.

Product update: I've worked out a way for users to start using @markfolder right away without signing up. Really excited about this! User journey is basically: 1) Install browser extension, 2) Start using. #nosignup should be a thing.

Build progress: Built out the backend API using @laravelphp, Passport, and Socialite. I love just how productive Laravel makes me. Quicker than #nocode ;). Next: integrating Axios JS library into the browser extension.

I think designing and building the signup, signin and onboarding flow is one of the most under-estimated parts of a SaaS project, in terms of thought and effort required. It's a project in itself.

I had intended to launch with three user categories - free user, no signup, free user, signed up, paid user. Too much work! So I’m launching with free user, signed up first.