Youtube QR 码生成用户脚本不起作用

Question

我正在尝试创建一个用户脚本，它会自动将当前网址的二维码图像添加到 youtube 视频页面上的“共享”菜单中。

我对 JavaScript、UserScript、HTML 等几乎一无所知。 但是，这是我目前所拥有的：

// ==UserScript==
// @name           Youtube QR ShareLink 
// @description    Displays QR of youtube URL 
// @version        0.1
// @match          http://www.youtube.com/watch*
// @match          https://www.youtube.com/?*
// @match          http://www.youtube.com/?*
// @match          https://www.youtube.com/watch*
// @include        http://www.youtube.com/?*
// @include        http://www.youtube.com/watch*
// @include        https://www.youtube.com/?*
// @include        https://www.youtube.com/watch*
// ==/UserScript==

(function () {
    var shareDiv = document.getElementById('share-option-container ytg-box');
    var qrIMG = 'http://chart.googleapis.com/chart?chl=' + window.location.href + '&chld=M%7C0&cht=qr&chs=125x125';
    var img = document.createElement('qrcode');
    img.src=qrIMG;
    img.width=125;
    img.height=125;
    shareDiv.appendChild(img);
}());

不出所料，它不起作用。 谁能告诉我我做错了什么？

谢谢！

Answer 1

您正在使用 document.getElementById 的值不是框的 id - 它是该元素的类列表。要使用这样的选择器，您可以通过几次调用 document.getElementsByClassName 来实现，或者您可以使用 document.querySelector('.share-option-container .ytg-box')，或者您可以使用 jQuery 来执行该选择。

您的第二个问题是您正在创建一个名为“qrcode”的元素，但您应该创建一个img 元素。

你修改后的代码应该是这样的：

// ==UserScript==
// @name           Youtube QR ShareLink 
// @description    Displays QR of youtube URL 
// @version        0.1
// @match          http://www.youtube.com/watch*
// @match          https://www.youtube.com/?*
// @match          http://www.youtube.com/?*
// @match          https://www.youtube.com/watch*
// @include        http://www.youtube.com/?*
// @include        http://www.youtube.com/watch*
// @include        https://www.youtube.com/?*
// @include        https://www.youtube.com/watch*
// ==/UserScript==

(function () {
    var shareDiv = document.querySelector('.share-option-container .ytg-box');
    var qrIMG = 'http://chart.googleapis.com/chart?chl=' + window.location.href + '&chld=M%7C0&cht=qr&chs=125x125';
    var img = document.createElement('img');
    img.src=qrIMG;
    img.width=125;
    img.height=125;
    shareDiv.appendChild(img);
}());

请注意，在 YouTube 上，您要抓取的元素在实际打开共享框之前并不存在，因此您需要先实际处理打开共享框，然后才能运行其余代码。我已经在我的浏览器中对此进行了测试，一旦打开共享框，上面的代码就可以正常工作，但之前不行。

您可以使用计时器来解决这个问题。将代码更改为：

var shareBoxCheckInterval   = setInterval (AddQR_Code, 200);

function AddQR_Code () {
    var shareDiv    = document.querySelector ('.share-option-container .ytg-box');
    if (shareDiv) {
        var qrIMG   = 'http://chart.googleapis.com/chart?chl=' 
                    + window.location.href + '&chld=M%7C0&cht=qr&chs=125x125';
        var img     = document.createElement ('img');
        img.src     = qrIMG;
        img.width   = 125;
        img.height  = 125;
        shareDiv.appendChild (img);

        /*-- If you want to continually check for new share boxes, on the
            same page, comment out this next line.
        */
        clearInterval (shareBoxCheckInterval);
    }
}