Chrome Extension

[calummoore]

Hi @sourabh2k15 - I think for MVP 1.0 the Chrome Extension should do the following:

• Capture the full page (ignoring static parts of the page)
• Sign in - so we can associate a user with an upload
• Directly upload images to Webframe after the screenshot completes
• Attempt to populate info from page properties in the title - e.g. pricing, terms, etc
• Allow the user to update the categories provided (and add a site name if it does not exist)

I used Full Page Screen Catpure to capture the original set of screenshots (it works really well) and it looks like it's open source on Github. I think that will be a good place to start!

You can read a little more about how the Webframe tech stack works here - https://1productaweek.com/webframe-launch-review/#product-dev

We don't currently have an API for uploading the images (currently they are all stored in a Google Cloud Storage bucket) - so we'll probably need to create one. I imagine that being a simple NodeJS server that simply takes the upload and pushes it into a Google Cloud Bucket (there is a NodeJS library that does that).

Let me know if you have any more thoughts or ideas on the above!

[calummoore]

I've put together a quick design of what it could look like. You don't need to keep exactly to it, but I think something like that will look good! I've uploaded the Sketch file to this repo if you want to check that out too.

I think with this design we can just adapt Full Page Screen Capture.

[sourabh2k15]

Thanks for the detailed explanation, I have a chrome extension that captures visible part of screen and I've always been curious about the workings of the full page screenshot extension works, good to know it's open source! I'll dig in and use that as a base to build up on.

Yup the nodejs service should be simple. I'll update you tomorrow on my progress. I am excited for this cause I've been building projects over the years and I am influenced by 1productaweek, I am using this project as a takeoff to build more stuff consistently :)

[sourabh2k15]

update :

https://github.com/sourabh2k15/webframe-extension

it's very similar in functionality to full-page screenshot, it scrolls and clicks pics and then aggregates them on new tab, one thing TODO is modify how we calculate window scroll dimensions, cause that decides if the static stuff in the page (navbar) get included in every screenshot, you can try my extension on any stackoverflow page and you'll understand the issue.

I can probably borrow the same calculations from their code and then we'll have the same results, their extension works well on the stackoverflow page.

[calummoore]

Great stuff @sourabh2k15! Look forward to seeing this come to life 👍🏽!

Yeah, that's one of the great things about the Full Page Screen Capture extension - it does a great job of avoiding duplication on the static stuff.

[sourabh2k15]

update : still playing around with the full page extension's source code, there's some serious callback hell going on

[sourabh2k15]

ahh cool I got what they're doing :) , going to use this thread to record my findings so future devs can be pointed to this ->

1) the code does screenshots in reverse ( bottom to top scroll) and takes into account sticky navbars 2) capturing active tab, chrome will anyway capture the navbar too but they crop it off later on canvas based on recorded x,y positions and stitch the whole thing together

[calummoore]

Nice @sourabh2k15 ! How's it going? Let me know when it's ready to take for a spin 😀!

[freearhey]

Hi, I recently created an extension for Chrome that takes screenshots of the entire page using the built-in engine (without stitching and scrolling). Take a look, maybe it will help you somehow - https://github.com/freearhey/screenie