// ==UserScript== // @name Youtube Subtitle Downloader v20 // @include https://*youtube.com/* // @author Cheng Zheng // @copyright 2009 Tim Smart; 2011 gw111zz; 2014~2018 Cheng Zheng; // @license GNU GPL v3.0 or later. http://www.gnu.org/copyleft/gpl.html // @require http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js // @version 20 // @grant GM_xmlhttpRequest // @namespace https://greasyfork.org/users/5711 // @description (2018-June-13) v20 fix download error cause by Youtube change their API // ==/UserScript== /* [What is this?] This "Tampermonkey script" allow you download Youtube "Automatic subtitle" AND "closed subtitle" [Note] If not working(rarely), Refresh!! if problem still exist. Email me: guokrfans@gmail.com [Who build this] Author : Cheng Zheng Email : guokrfans@gmail.com Github : https://github.com/1c7/Youtube-Auto-Subtitle-Download If you want improve the script, Github Pull Request are welcome [Note] Few things before you read the code: 0. Some code comments are written in Chinese 1. Youtube have 2 UI: Material design and The old design 2. Code need handle both Auto & Closed subtitle (Explain: "Tampermonkey script" mean you have to install a Chrome extension call "Tampermonkey", and then install this script) [Test Video] https://www.youtube.com/watch?v=bkVsus8Ehxs only have English closed subtitle, nothing else (no auto subtitle) https://www.youtube.com/watch?v=-WEqFzyrbbs no subtitle at all https://www.youtube.com/watch?v=9AzNEG1GB-k have a lot subtitle https://www.youtube.com/watch?v=tqGkOvrKGfY 1:36:33 super long subtitle [Code Explain] mainly three part 1. UI specific (add button on page etc) 2. detech if subtitle exists 3. transform subtitle format & download [Changelog] v1~v15: I forgot, and I am too lazy to check git log v16: add support for auto subtitle v17: fix few minor issue in v16, to make sure all user get update, bump up 1 version v18: fix https://greasyfork.org/zh-CN/forum/discussion/38299/x?locale=zh-CN video too long issue (for example 1:36:33) and cause subtitle error reason is the 'downloadFile' function using a element 'href' attribute to download .srt file. and this 'href' can't handle string that's too long v19: fix HTML html entity problem, for example: apostrophe as ' v20: 2018-June-13 seem like Youtube change their URL format, now URL must have something like '&name=en' v20 test with: https://www.youtube.com/watch?v=tqGkOvrKGfY https://www.youtube.com/watch?time_continue=5&v=36tggrpRoTI */ // text for display var NO_SUBTITLE = 'No subtitle'; var HAVE_SUBTITLE = 'Download subtitle'; // initialize var first_load = true; // indicate if first load this webpage or not var youtube_playerResponse_1c7 = null; // for auto subtitle unsafeWindow.caption_array = []; // store all subtitle // trigger when first load $(document).ready(function(){ start(); }); // Explain this function: we repeatly try if certain HTML element exist, // if it does, we call init() // if it doesn't, stop trying after certain time function start(){ var retry_count = 0; var RETRY_LIMIT = 20; // use "setInterval" is because "$(document).ready()" still not enough, still too early // 330 work for me. if (new_material_design_version()) { var material_checkExist = setInterval(function () { if (document.querySelectorAll('.title.style-scope.ytd-video-primary-info-renderer').length) { init(); clearInterval(material_checkExist); } retry_count = retry_count + 1; if (retry_count > RETRY_LIMIT) { clearInterval(material_checkExist); } }, 330); } else { var checkExist = setInterval(function () { if ($('#watch7-headline').length) { init(); clearInterval(checkExist); } retry_count = retry_count + 1; if (retry_count > RETRY_LIMIT) { clearInterval(checkExist); } }, 330); } } // trigger when loading new page // (actually this would also trigger when first loading, that's not what we want, that's why we need to use firsr_load === false) // (new Material design version would trigger this "yt-navigate-finish" event. old version would not.) var body = document.getElementsByTagName("body")[0]; body.addEventListener("yt-navigate-finish", function(event) { if (current_page_is_video_page() === false) { return; } youtube_playerResponse_1c7 = event.detail.response.playerResponse; // for auto subtitle unsafeWindow.caption_array = []; // clean up (important, otherwise would have more and more item and cause error) // if use click to another page, init again to get correct subtitle if(first_load === false){ remove_subtitle_download_button(); init(); } }); // trigger when loading new page // (old version would trigger "spfdone" event. new Material design version not sure yet.) window.addEventListener("spfdone", function(e) { if(current_page_is_video_page()){ remove_subtitle_download_button(); var checkExist = setInterval(function() { if ($('#watch7-headline').length) { init(); clearInterval(checkExist); } }, 330); } }); // return true / false // Detect [new version UI(material design)] OR [old version UI] // I tested this, accurated. function new_material_design_version() { var old_title_element = document.getElementById('watch7-headline'); if (old_title_element) { return false; } else { return true; } } // return true / false function current_page_is_video_page(){ return get_video_id() !== null; } // return string like "RW1ChiWyiZQ", from "https://www.youtube.com/watch?v=RW1ChiWyiZQ" // or null function get_video_id(){ return getURLParameter('v'); } //https://stackoverflow.com/questions/11582512/how-to-get-url-parameters-with-javascript/11582513#11582513 function getURLParameter(name) { return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search) || [null, ''])[1].replace(/\+/g, '%20')) || null; } function remove_subtitle_download_button(){ $('#youtube-subtitle-downloader-by-1c7').remove(); } function init(){ inject_our_script(); first_load = false; } function inject_our_script(){ var div = document.createElement('div'), select = document.createElement('select'), option = document.createElement('option'), controls = document.getElementById('watch7-headline'); // Youtube video title DIV div.setAttribute('style', `display: table; margin-top:4px; border: 1px solid rgb(0, 183, 90); cursor: pointer; color: rgb(255, 255, 255); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; background-color: #00B75A; `); div.id = 'youtube-subtitle-downloader-by-1c7'; div.title = 'Youtube Subtitle Download v16'; // display when cursor hover select.id = 'captions_selector'; select.disabled = true; select.setAttribute( 'style', `display:block; border: 1px solid rgb(0, 183, 90); cursor: pointer; color: rgb(255, 255, 255); background-color: #00B75A; padding: 4px; `); option.textContent = 'Loading...'; option.selected = true; select.appendChild(option); // 下拉菜单里,选择一项后触发下载 select.addEventListener('change', function() { download_subtitle(this); }, false); div.appendChild(select); // put function load_language_list(select) { // auto var auto_subtitle_exist = false; // closed var closed_subtitle_exist = false; var captions = null; // get auto subtitle var auto_subtitle_url = get_auto_subtitle_xml_url(); if (auto_subtitle_url != false) { auto_subtitle_exist = true; } // get closed subtitle var list_url = 'https://video.google.com/timedtext?hl=en&v=' + get_video_id() + '&type=list'; // Example: https://video.google.com/timedtext?hl=en&v=if36bqHypqk&type=list GM_xmlhttpRequest({ method: 'GET', url: list_url, onload: function( xhr ) { captions = new DOMParser().parseFromString(xhr.responseText, "text/xml").getElementsByTagName('track'); if (captions.length != 0) { closed_subtitle_exist = true; } // if no subtitle at all, just say no and stop if (auto_subtitle_exist == false && closed_subtitle_exist == false) { select.options[0].textContent = NO_SUBTITLE; disable_download_button(); return false; } // if at least one type of subtitle exist select.options[0].textContent = HAVE_SUBTITLE; select.disabled = false; var caption = null; // for inside loop var option = null; // for