I have searched everywhere for this. I've even tried looking at other extensions to see how it's done. What is the simplest way to create an addition to my extension that enables me to drag;

Click Extension Icon -> Drag/select content area -> capture as screenshot/png for me to pass to an API

I've got my basic plugin down and it captures images and screenshots, but I want to create this feature, where I may drag and select a content area. I've never had to create something like this before and I've no idea how to do it in Javascript.

Edit: I don't want this done for me, I just need an idea of how it's done. I've never heard of Javascript doing this but I know the functionality exists because other extensions do this.

Edit 2: The only thing I've found that es close to what I want is "html2canvas", but I'm not sure how I'd turn that into a drag/select element.

Cheers!

I have searched everywhere for this. I've even tried looking at other extensions to see how it's done. What is the simplest way to create an addition to my extension that enables me to drag;

Click Extension Icon -> Drag/select content area -> capture as screenshot/png for me to pass to an API

I've got my basic plugin down and it captures images and screenshots, but I want to create this feature, where I may drag and select a content area. I've never had to create something like this before and I've no idea how to do it in Javascript.

Edit: I don't want this done for me, I just need an idea of how it's done. I've never heard of Javascript doing this but I know the functionality exists because other extensions do this.

Edit 2: The only thing I've found that es close to what I want is "html2canvas", but I'm not sure how I'd turn that into a drag/select element.

Cheers!

• javascript
• jquery
• google-chrome-extension

Share Improve this question Follow edited Jan 22, 2015 at 21:59 John Smith asked Jan 22, 2015 at 21:36 John SmithJohn Smith 5111 silver badge55 bronze badges 6

• You don't just create an account on Stack Overflow to ask people to do things for you. Take a look at this page first. – Marco Bonelli Commented Jan 22, 2015 at 21:42
• 1 @MarcoBonelli I'm not asking to have it done for me, I'm asking for a little help. What am I suppose to do on StackOverflow before asking a question? – John Smith Commented Jan 22, 2015 at 21:44
• The problem about your question is that is almost pletely off-topic on this site. First of all because you're saying "I have no idea how to do it", which doesn't encourage people to answer your question, because you're not showing any effort; secondly, because your question doesn't appear to have a clear problem statement. A good question, instead, is a question asking for help about a specific topic, in which you show you've already created something and you're willing to improve or maybe get it to work properly. – Marco Bonelli Commented Jan 22, 2015 at 21:52
• @MarcoBonelli but that's exactly the problem...I have nothing to show, because I've found nothing through research. Which is why I'm here. This is a specific topic, that's why I tagged "Google Chrome Extension". I wasn't aware this site was for people who "had a basic idea of how to do things and that only". I am hear to be pointed in the right direction, so I can turn my "I have no idea how to do it" into a "thanks! I couldn't find this on my own". I could post my code up? Completely irrelevant though because it does nothing like what I'm asking. – John Smith Commented Jan 22, 2015 at 21:57
• You're saying that you've already got your "basic plugin down and it captures images and screenshots". So showing it would be a good idea. It may be a long code, so you may need to cut the essential parts out of it and post them. With that code, you can ask for help on how to improve it to make the user select the desired screenshot area. Secondly, it isn't clear what you mean by "drag and drop", can you show some example, like an existing extension you tried? That would be helpful. – Marco Bonelli Commented Jan 22, 2015 at 22:03

 |  Show 1 more ment

1 Answer 1

Sorted by: Reset to default 9

If you already have the part that captures the screenshot all you need is to crop it to the correct size right?

That size is just a set of start and end coordinates for dragging. We can make a simple script using jQuery and an element to keep track of this and give feedback to the user. The basic principles here are:

1. listen to the JS events (mousedown, mousemove, mouseup) so you know what your user is doing
2. Add an absolutely positioned <div> to the screen to be your selection.

Here is a proof of concept: http://jsfiddle/x2xmjrya/

And here is the important JS:

// Things we need to keep track of
var start = {};
var end = {};
var isSelecting = false;

$(window)
    // Listen for selection
    .on('mousedown', function($event) {
        // Update our state
        isSelecting = true;
        $('#selection').removeClass('plete');
        start.x = $event.pageX;
        start.y = $event.pageY;

        // Add selection to screen
        $('#selection').css({
            left: start.x,
            top: start.y
        });
    })
    // Listen for movement
    .on('mousemove', function($event) {
        // Ignore if we're not selecing
        if (!isSelecting) { return; }

        // Update our state
        end.x = $event.pageX;
        end.y = $event.pageY;

        // Move & resize selection to reflect mouse position
        $('#selection').css({
            left: start.x < end.x ? start.x : end.x,
            top: start.y < end.y ? start.y : end.y,
            width: Math.abs(start.x - end.x),
            height: Math.abs(start.y - end.y)
        });
    })
    // listen for end
    .on('mouseup', function($event) {
        // Update our state
        isSelecting = false;
        $('#selection').addClass('plete');
    });

You would use the mouseup callback to also kick off the screencap and crop