I am working on video downloader extension for Google Chrome, and it is my first project (I am making Chrome extension for the first time). As I know you should use JavaScript for functionality of extension.

I want to do following: I am on some website where is some video player and i want to let user to download that video. I think Video Downloader Plus is related to my purpose. So how can I let user do functional above?

I am working on video downloader extension for Google Chrome, and it is my first project (I am making Chrome extension for the first time). As I know you should use JavaScript for functionality of extension.

I want to do following: I am on some website where is some video player and i want to let user to download that video. I think Video Downloader Plus is related to my purpose. So how can I let user do functional above?

• javascript
• google-chrome
• google-chrome-extension

• Please specify your problem to a single concise question and show us what you tried so far. – Sebastian Speitel Commented Sep 19, 2019 at 11:34
• @SebastianSpeitel As I said i have no idea about how can i donwload video with javascript from any website, so i want hint or example – iLiA Commented Sep 19, 2019 at 11:48
• It's a very broad topic, quite possibly very complicated as well. Start by inspecting the code of other extensions which you can do easily in devtools. Also learn how to use devtools to facilitate debugging various contexts of extensions. – woxxom Commented Sep 19, 2019 at 12:08
• yes but how can i inspect it? – iLiA Commented Sep 19, 2019 at 12:19

3 Answers 3

Use JavaScript to look through the user's DOM.

Take anything that's <embed> on the page...

document.getElementsByTagName("embed")

That's usually a video player. The embed tag has a URL, use JavaScript to parse the URL that's written in the embed tag, you have your video URL. if you use JavaScript to navigate to a page, you can effectively download it.

For instance if you used

window.location.href = 'VIDEO URL'; 

you would download the video. Example embedded code:

   <embed width="420" height="315"
    src="https://www.youtube.com/embed/tgbNymZ7vqY">

Please note: usually people are using iframes now to plop a video onto the page:

<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY">
</iframe>

So maybe your code should be able to parse things like YouTube URLs within iframes, as well as embedded videos.

<button onclick="downloadImage()">Download Image</button>

function downloadImage() {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', 'https://via.placeholder.com/150', true);
  xhr.responseType = 'blob';
  xhr.onload = function() {
    var urlCreator = window.URL || window.webkitURL;
    var imageUrl = urlCreator.createObjectURL(this.response);
    var tag = document.createElement('a');
    tag.href = imageUrl;
    tag.target = '_blank';
    tag.download = 'sample.png';
    document.body.appendChild(tag);
    tag.click();
    document.body.removeChild(tag);
  };
  xhr.onerror = err => {
    alert('Failed to download picture');
  };
  xhr.send();
}

If you see cors problem then adds It will works only download with image and video

Here's how to use it with the Fetch API using a Promise:

export async function download(url) {
    return new Promise((res, rej) => {
        fetch(url).then(res => res.blob()).then(file => {
            const tempUrl = URL.createObjectURL(file);
            const aTag = document.createElement("a");
            aTag.href = tempUrl;
            aTag.download = url.replace(/^.*[\\\/]/, '');
            document.body.appendChild(aTag);
            aTag.click();
            URL.revokeObjectURL(tempUrl);
            aTag.remove();
            res();
        }).catch(err => {
            rej(err);
        });
    });
}

Source: https://www.codingnepalweb.com/download-file-from-url-with-javascript/