YouTube QRコードの生成UserScriptが機能しない

Question

私は現在のURLのQRコードイメージをyoutubeのビデオページの '共有'メニューに自動的に追加するuserscriptを作成しようとしています。

私は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への呼び出しを2回行うか、document.querySelector('.share-option-container .ytg-box')を使用するか、jQueryを使用してその選択を行うことができます。

2番目の問題は、 'qrcode'という要素を作成していることですが、img要素を作成する必要があります。

あなたは、コードは次のようになります。改訂している：YouTubeで、共有ボックスが実際に開くまで、あなたがつかんでいる要素が存在しないので、あなたが必要とすることを

// ==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); 
}());

注意をコードの残りの部分が実行される前に実際に共有ボックスを開くことを実際に処理することができます。私はこれを私のブラウザでテストしました。そして、上記のコードは共有ボックスが開かれた後はうまくいきます。

タイマーを使用してこれを考慮することができます。コードを次のように変更してください：

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); 
    } 
}