YouTubeの歌をYouTubeMusicで開くChrome拡張機能を作成

Memo

Chrome拡張機能の勉強のため、YouTubeで公開されている歌を、右クリックメニューからYouTubeMusicで開く簡単なChrome拡張機能を作成した。

目次

manifest.jsonに拡張機能の設定を書く

{
    "name": "youtube2youtubemusic",
    "short_name": "YT2YTM",
    "manifest_version": 3,
    "version": "0.1.1",
    "permissions": ["activeTab","scripting","contextMenus"],
    "content_scripts": [{
        "matches": ["*://www.youtube.com/*", "*://music.youtube.com/*"],
        "js": ["content.js"],
        "all_frames" : true,
        "run_at":"document_start"
    }],
    "background": {
        "service_worker": "background.js"
    }
}

右クリックメニューを使うためにbackground.jsを作成

chrome.runtime.onInstalled.addListener(function() {
  
    chrome.contextMenus.create({
        title : "YouTubeMusicで開く",
        type : "normal",
        id : "yt2ytm",
        documentUrlPatterns : ["*://www.youtube.com/*"]
    });
    chrome.contextMenus.create({
        title : "YouTubeで開く",
        type : "normal",
        id : "ytm2yt",
        documentUrlPatterns : ["*://music.youtube.com/*"]
    });

});

chrome.contextMenus.onClicked.addListener(function(info, tab){

    if(info.menuItemId == "yt2ytm"){
        chrome.tabs.sendMessage(tab.id, "yt2ytm", function(response) {
        });
    }else if(info.menuItemId == "ytm2yt"){
        chrome.tabs.sendMessage(tab.id, "ytm2yt", function(response) { 
        });
    }

});

拡張機能の処理をcontent.jsに記述

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    var query = getParam('v');
    if (request == "yt2ytm"){
        var url = "https://music.youtube.com/watch?v=" + query;
        window.location.href = url;
        sendResponse("OK");
    }else if(request == "ytm2yt"){
        var url = "https://www.youtube.com/watch?v=" + query;
        window.location.href = url;
        sendResponse("OK");
    }else{
        sendResponse("NG");
    }
});

function getParam(name, url) {
    if (!url) url = location.href;
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
    if (!results) return "";
    if (!results[2]) return "";
    return decodeURIComponent(results[2].replace(/\+/g, " "));
}

拡張機能の読み込み

Chrome拡張機能から「パッケージ化されていない拡張機能を読み込む」を選択する。

作成したファイルをまとめたディレクトリを選択して読み込む。

問題点

  • YouTube・YouTubeMusicに対応する曲が存在しない場合もページ遷移してしまう
  • プレイリストには対応していない