Chrome拡張機能アーカイブ

Chrome拡張機能の勉強のため、YouTubeで公開されている歌を、右クリックメニューからYouTubeMusicで開く簡単なChrome拡張機能を作成した。 manifest.jsonに拡張機能の設定を書く { &quot;name&quot;: &quot;youtube2youtubemusic&quot;, &quot;short_name&quot;: &quot;YT2YTM&quot;, &quot;manifest_version&quot;: 3, &quot;version&quot;: &quot;0.1.1&quot;, &quot;permissions&quot;: [&quot;activeTab&quot;,&quot;scripting&quot;,&quot;contextMenus&quot;], &quot;content_scripts&quot;: [{ &quot;matches&quot;: [&quot;*://www.youtube.com/*&quot;, &quot;*://music.youtube.com/*&quot;], &quot;js&quot;: [&quot;content.js&quot;], &quot;all_frames&quot; : true, &quot;run_at&quot;:&quot;document_start&quot; }], &quot;background&quot;: { &quot;service_worker&quot;: &quot;background.js&quot; } } 右クリックメニューを使うためにbackground.jsを作成 chrome.runtime.onInstalled.addListener(function() { chrome.contextMenus.create({ title : &quot;YouTubeMusicで開く&quot;, type : &quot;normal&quot;, id : &quot;yt2ytm&quot;, documentUrlPatterns : [&quot;*://www.youtube.com/*&quot;] }); chrome.contextMenus.create({ title : &quot;YouTubeで開く&quot;, type : &quot;normal&quot;, id : &quot;ytm2yt&quot;, documentUrlPatterns : [&quot;*://music.youtube.com/*&quot;] }); }); chrome.contextMenus.onClicked.addListener(function(info, tab){ if(info.menuItemId == &quot;yt2ytm&quot;){ chrome.tabs.sendMessage(tab.id, &quot;yt2ytm&quot;, function(response) { }); }else if(info.menuItemId == &quot;ytm2yt&quot;){ chrome.tabs.sendMessage(tab.id, &quot;ytm2yt&quot;, function(response) { }); } }); 拡張機能の処理をcontent.jsに記述 chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) { var query = getParam('v'); if (request == &quot;yt2ytm&quot;){ var url = &quot;https://music.youtube.com/watch?v=&quot; + query; window.location.href = url; sendResponse(&quot;OK&quot;); }else if(request == &quot;ytm2yt&quot;){ var url = &quot;https://www.youtube.com/watch?v=&quot; + query; window.location.href = url; sendResponse(&quot;OK&quot;); }else{ sendResponse(&quot;NG&quot;); } }); function getParam(name, url) { if (!url) url = location.href; name = name.replace(/[\[\]]/g, &quot;\\$&&quot;); var regex = new RegExp(&quot;[?&]&quot; + name + &quot;(=([^&#]*)|&|#|$)&quot;), results = regex.exec(url); if (!results) return &quot;&quot;; if (!results[2]) return &quot;&quot;; return decodeURIComponent(results[2].replace(/\+/g, &quot; &quot;)); } 拡張機能の読み込み Chrome拡張機能から「パッケージ化されていない拡張機能を読み込む」を選択する。 作成したファイルをまとめたディレクトリを選択して読み込む。 問題点 YouTube・YouTubeMusicに対応する曲が存在しない場合もページ遷移してしまうプレイリストには対応していない

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