Question

我想使用Greasemonkey为Openload VTT字幕添加字幕下载按钮。但是，我不知道如何访问标签。

例如，带英语字幕的French video clip。当我在Firefox中查看源代码时，发现了这一点：

<video id="olvideo" width="100%" height="100%" crossorigin="anonymous" controls>
    <track kind="captions" src="https://thumb.oloadcdn.net/subtitle/rjC09fkPLYs/vt8zTaIaVqQ.vtt" srclang="en" label="English" default />
</video>

为什么我的概念验证Greasemonkey代码不起作用？

// ==UserScript==
// @name        Openload
// @include     *openload.co*
// @run-at      document-idle
// ==/UserScript==

var video = document.querySelector("video");

if (video) {
    var track = video.querySelector("track");
    if (track) {
        alert ("<track> FOUND.");
    } else {
        alert ("<track> NOT found!");
    }

} else { 
    alert ("<video> tag not found");
}

（运行脚本时，我收到消息“ 未找到！”。）

Answer 1

link you gave 永远没有<track>节点，至少对我来说（未登录，而不是视频的创建者）。

尽管如此，这可能是一个标准的AJAX问题。也就是说，如果通过javascript（AJAX）添加节点，则Tampermonkey脚本将在加载目标节点之前完成。

为此使用标准的ajax感知技术。一种方式：

// ==UserScript==
// @name     Openload.co, Report on track nodes
// @match    *://openload.co/embed/*
// @match    *://interactive-examples.mdn.mozilla.net/pages/tabbed/track.html
// @require  https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// @require  https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant    GM_addStyle
// @grant    GM.getValue
// ==/UserScript==
//- The @grant directives are needed to restore the proper sandbox.

waitForKeyElements ("track", reportTrackNode);

//-- For Mozilla page, which uses shadow DOM:
waitForKeyElements ("shadow-output", reportTrackNodeWithinShadowDOM);

function reportTrackNode (jNode) {
    console.log ("Found <track>:", jNode[0]);
}

function reportTrackNodeWithinShadowDOM (jNode) {
    var sr      = jNode[0].shadowRoot;
    var trck    = $(sr.childNodes).find ("track");
    if (trck.length === 0)  return true;  //  Keep waiting.

    console.log ("Found <track>:", trck[0]);
}

请注意，以上代码可在Tampermonkey，Violentmonkey和早期版本的Greasemonkey中使用。应该在Greasemonkey 4+中可以工作，但是该引擎非常损坏，因此无法保证。

通过安装脚本并访问this MDN video demo page，您会发现代码确实在轨道存在时（即使在影子DOM中）也找到了轨道。

Answer 2

这是一个简单/基本的脚本。我不知道您使用的是哪个版本的GM。这是为GM4写的如果您使用的是GM 3，请更改：

GM.xmlHttpRequest -> GM_xmlhttpRequest
GM.openInTab -> GM_openInTab

它将在新选项卡中打开字幕，以便您进行保存。您可以在嵌入文件页面和普通文件页面上运行它。例如
https://openload.co/embed/rjC09fkPLYs
https://openload.co/f/rjC09fkPLYs

// ==UserScript==
// @name          Openload Subtitle Download
// @namespace     erosman
// @description   Openload Subtitle Download
// @include       https://openload.co/f/*
// @include       https://openload.co/embed/*
// @grant         GM.xmlHttpRequest
// @grant         GM_xmlhttpRequest
// @grant         GM.openInTab
// @grant         GM_openInTab
// @author        erosman
// @version       1.0
// ==/UserScript==

/* --------- Note ---------
  This script download Openload Subtitles.
  It runs on both embed and normal file pages.
  --------- History ---------


  1.0   Initial release

*/

(() => { // anonymous function wrapper, for error checking & limiting scope, async FF52+
'use strict';

if (frameElement || !location || !document.body) { return; } // end execution if in a frame/object/embedding points


// --- get the document
GM.xmlHttpRequest({
  method: 'GET',
  url: location.href,
  onload: result => processResult(result.responseText),
  onerror: error => console.log(error)
});

function processResult(str) {

  // convert to DOM
  const doc = new DOMParser().parseFromString(str, 'text/html');

  // get tracks with source, convert to array for forEach, 
  // open each subtitle (if there are more than one) in a new tab
  // you can save it from there
  [...doc.querySelectorAll('track[src]')].forEach(item => GM.openInTab(item.src));
}

// end of anonymous function
})();

获取Openload VTT字幕链接

2 个答案: