2017-05-03

Google Chrome Extension: IC 之音 AOD 聆聽幫手 (IC975)

Google Chrome Extension:  IC 之音 AOD 聆聽幫手 (IC975)
第一次寫 Chrome Extension
因為想把 IC 之音 AOD 音檔抓下來, 發現可以從原始碼直接看到下載連結
但是如果一個節目一個節目去看原始碼實在太花時間, 所以研究了一下寫出這個 Extension
已經太久沒寫 Code, 所以應該可以寫得更簡潔的地方並沒有處理, 能用就好

以下是原始碼:

manifest.json
{
  "manifest_version": 2,
  "name": "IC 之音 AOD 聆聽幫手 (IC975)",
  "description": "快速取得 AOD 列表中的聆聽超連結直接開啟, 在播放頁面中可以直接下載音檔",
  "version": "1.6",
  "icons": {
    "16": "icon16.png",
    "48": "icon48.png",
    "128": "icon128.png"
  },
  "permissions": [
    "tabs", "http://www.ic975.com/"
  ],
  "browser_action": {
    "default_icon": "icon16.png",
    "default_popup": "popup.html"
  }
}
popup.html
<!DOCTYPE html>
<html style=''>
<head>
<script src='popup.js'></script>
</head>
<body style="width:750px;">
<div id='message' style="display: none;"></div>
<div id='LoadingMessage' style="display: inline;"><font size=4>讀取中...<br><br>若無出現節目列表, 請先連結 <a href='http://www.ic975.com/AOD/' target=_blank>IC之音隨選即播</a> 頁面<br>或在聆聽頁面使用本功能<br><br>若確認已經在上述頁面中仍無法取得節目清單或下載<br>請按 F5 將頁面重新整理後再試試看</font></div>
<div id='AudioDownload' style="display: none;"></div>
<button id="OpenAll" style="display: none;">全部開啟 (手動切換至播放視窗再按一次本程式按鈕進行下載)</button><br>
<table border=0>
<tr>
<td width=50 align=center><button id="Button_AOD_00" style="display: none;">聆聽</button><span id="Span_AOD_00" style="display: none;"><font color=red>須登入</font></span></td>
<td><div id='AODName_00' style="display: none;"></div></td>
</tr>
<tr>
<td width=50 align=center><button id="Button_AOD_01" style="display: none;">聆聽</button><span id="Span_AOD_01" style="display: none;"><font color=red>須登入</font></span></td>
<td><div id='AODName_01' style="display: none;"></div></td>
</tr>
<tr>
<td width=50 align=center><button id="Button_AOD_02" style="display: none;">聆聽</button><span id="Span_AOD_02" style="display: none;"><font color=red>須登入</font></span></td>
<td><div id='AODName_02' style="display: none;"></div></td>
</tr>
<tr>
<td width=50 align=center><button id="Button_AOD_03" style="display: none;">聆聽</button><span id="Span_AOD_03" style="display: none;"><font color=red>須登入</font></span></td>
<td><div id='AODName_03' style="display: none;"></div></td>
</tr>
<tr>
<td width=50 align=center><button id="Button_AOD_04" style="display: none;">聆聽</button><span id="Span_AOD_04" style="display: none;"><font color=red>須登入</font></span></td>
<td><div id='AODName_04' style="display: none;"></div></td>
</tr>
<tr>
<td width=50 align=center><button id="Button_AOD_05" style="display: none;">聆聽</button><span id="Span_AOD_05" style="display: none;"><font color=red>須登入</font></span></td>
<td><div id='AODName_05' style="display: none;"></div></td>
</tr>
<tr>
<td width=50 align=center><button id="Button_AOD_06" style="display: none;">聆聽</button><span id="Span_AOD_06" style="display: none;"><font color=red>須登入</font></span></td>
<td><div id='AODName_06' style="display: none;"></div></td>
</tr>
<tr>
<td width=50 align=center><button id="Button_AOD_07" style="display: none;">聆聽</button><span id="Span_AOD_07" style="display: none;"><font color=red>須登入</font></span></td>
<td><div id='AODName_07' style="display: none;"></div></td>
</tr>
<tr>
<td width=50 align=center><button id="Button_AOD_08" style="display: none;">聆聽</button><span id="Span_AOD_08" style="display: none;"><font color=red>須登入</font></span></td>
<td><div id='AODName_08' style="display: none;"></div></td>
</tr>
<tr>
<td width=50 align=center><button id="Button_AOD_09" style="display: none;">聆聽</button><span id="Span_AOD_09" style="display: none;"><font color=red>須登入</font></span></td>
<td><div id='AODName_09' style="display: none;"></div></td>
</tr>
<tr>
<td width=50 align=center><button id="Button_AOD_10" style="display: none;">聆聽</button><span id="Span_AOD_10" style="display: none;"><font color=red>須登入</font></span></td>
<td><div id='AODName_10' style="display: none;"></div></td>
</tr>
<tr>
<td width=50 align=center><button id="Button_AOD_11" style="display: none;">聆聽</button><span id="Span_AOD_11" style="display: none;"><font color=red>須登入</font></span></td>
<td><div id='AODName_11' style="display: none;"></div></td>
</tr>
<tr>
<td width=50 align=center><button id="Button_AOD_12" style="display: none;">聆聽</button><span id="Span_AOD_12" style="display: none;"><font color=red>須登入</font></span></td>
<td><div id='AODName_12' style="display: none;"></div></td>
</tr>
<tr>
<td width=50 align=center><button id="Button_AOD_13" style="display: none;">聆聽</button><span id="Span_AOD_13" style="display: none;"><font color=red>須登入</font></span></td>
<td><div id='AODName_13' style="display: none;"></div></td>
</tr>
<tr>
<td width=50 align=center><button id="Button_AOD_14" style="display: none;">聆聽</button><span id="Span_AOD_14" style="display: none;"><font color=red>須登入</font></span></td>
<td><div id='AODName_14' style="display: none;"></div></td>
</tr>
<tr>
<td width=50 align=center><button id="Button_AOD_15" style="display: none;">聆聽</button><span id="Span_AOD_15" style="display: none;"><font color=red>須登入</font></span></td>
<td><div id='AODName_15' style="display: none;"></div></td>
</tr>
<tr>
<td width=50 align=center><button id="Button_AOD_16" style="display: none;">聆聽</button><span id="Span_AOD_16" style="display: none;"><font color=red>須登入</font></span></td>
<td><div id='AODName_16' style="display: none;"></div></td>
</tr>
<tr>
<td width=50 align=center><button id="Button_AOD_17" style="display: none;">聆聽</button><span id="Span_AOD_17" style="display: none;"><font color=red>須登入</font></span></td>
<td><div id='AODName_17' style="display: none;"></div></td>
</tr>
<tr>
<td width=50 align=center><button id="Button_AOD_18" style="display: none;">聆聽</button><span id="Span_AOD_18" style="display: none;"><font color=red>須登入</font></span></td>
<td><div id='AODName_18' style="display: none;"></div></td>
</tr>
<tr>
<td width=50 align=center><button id="Button_AOD_19" style="display: none;">聆聽</button><span id="Span_AOD_19" style="display: none;"><font color=red>須登入</font></span></td>
<td><div id='AODName_19' style="display: none;"></div></td>
</tr>
</table>
<script type="text/javascript" src="popup.js"></script>
</body>
</html>
popup.js
chrome.runtime.onMessage.addListener(function(request, sender) {
if (request.action == "getSource") {
message.innerText = request.source;
LoadingMessage.style.display = "none";
}
var AODListResult = message.innerText
AODListResultArray = AODListResult.split("@@@@@")
if (AODListResultArray[0] != "AudioDownload") {
var AODNameArray = AODListResultArray[0].split("#####")
var AODURLArray = AODListResultArray[1].split("#####")
 for (i=0;i<AODNameArray.length;i++) {
switch (i)
{
case 0:
AODName_00.innerText = AODNameArray[0]
if (AODURLArray[00] != '') {
Button_AOD_00.style.display = "inline";
} else {
Span_AOD_00.style.display = "inline";
}
AODName_00.style.display = "inline";
break;
case 1:
AODName_01.innerText = AODNameArray[1]
if (AODURLArray[01] != '') {
Button_AOD_01.style.display = "inline";
} else {
Span_AOD_01.style.display = "inline";
}
AODName_01.style.display = "inline";
break;
case 2:
AODName_02.innerText = AODNameArray[2]
if (AODURLArray[02] != '') {
Button_AOD_02.style.display = "inline";
} else {
Span_AOD_02.style.display = "inline";
}
AODName_02.style.display = "inline";
break;
case 3:
AODName_03.innerText = AODNameArray[3]
if (AODURLArray[03] != '') {
Button_AOD_03.style.display = "inline";
} else {
Span_AOD_03.style.display = "inline";
}
AODName_03.style.display = "inline";
break;
case 4:
AODName_04.innerText = AODNameArray[4]
if (AODURLArray[04] != '') {
Button_AOD_04.style.display = "inline";
} else {
Span_AOD_04.style.display = "inline";
}
AODName_04.style.display = "inline";
break;
case 5:
AODName_05.innerText = AODNameArray[5]
if (AODURLArray[05] != '') {
Button_AOD_05.style.display = "inline";
} else {
Span_AOD_05.style.display = "inline";
}
AODName_05.style.display = "inline";
break;
case 6:
AODName_06.innerText = AODNameArray[6]
if (AODURLArray[06] != '') {
Button_AOD_06.style.display = "inline";
} else {
Span_AOD_06.style.display = "inline";
}
AODName_06.style.display = "inline";
break;
case 7:
AODName_07.innerText = AODNameArray[7]
if (AODURLArray[07] != '') {
Button_AOD_07.style.display = "inline";
} else {
Span_AOD_07.style.display = "inline";
}
AODName_07.style.display = "inline";
break;
case 8:
AODName_08.innerText = AODNameArray[8]
if (AODURLArray[08] != '') {
Button_AOD_08.style.display = "inline";
} else {
Span_AOD_08.style.display = "inline";
}
AODName_08.style.display = "inline";
break;
case 9:
AODName_09.innerText = AODNameArray[9]
if (AODURLArray[09] != '') {
Button_AOD_09.style.display = "inline";
} else {
Span_AOD_09.style.display = "inline";
}
AODName_09.style.display = "inline";
break;
case 10:
AODName_10.innerText = AODNameArray[10]
if (AODURLArray[10] != '') {
Button_AOD_10.style.display = "inline";
} else {
Span_AOD_10.style.display = "inline";
}
AODName_10.style.display = "inline";
break;
case 11:
AODName_11.innerText = AODNameArray[11]
if (AODURLArray[11] != '') {
Button_AOD_11.style.display = "inline";
} else {
Span_AOD_11.style.display = "inline";
}
AODName_11.style.display = "inline";
break;
case 12:
AODName_12.innerText = AODNameArray[12]
if (AODURLArray[12] != '') {
Button_AOD_12.style.display = "inline";
} else {
Span_AOD_12.style.display = "inline";
}
AODName_12.style.display = "inline";
break;
case 13:
AODName_13.innerText = AODNameArray[13]
if (AODURLArray[13] != '') {
Button_AOD_13.style.display = "inline";
} else {
Span_AOD_13.style.display = "inline";
}
AODName_13.style.display = "inline";
break;
case 14:
AODName_14.innerText = AODNameArray[14]
if (AODURLArray[14] != '') {
Button_AOD_14.style.display = "inline";
} else {
Span_AOD_14.style.display = "inline";
}
AODName_14.style.display = "inline";
break;
case 15:
AODName_15.innerText = AODNameArray[15]
if (AODURLArray[15] != '') {
Button_AOD_15.style.display = "inline";
} else {
Span_AOD_15.style.display = "inline";
}
AODName_15.style.display = "inline";
break;
case 16:
AODName_16.innerText = AODNameArray[16]
if (AODURLArray[16] != '') {
Button_AOD_16.style.display = "inline";
} else {
Span_AOD_16.style.display = "inline";
}
AODName_16.style.display = "inline";
break;
case 17:
AODName_17.innerText = AODNameArray[17]
if (AODURLArray[17] != '') {
Button_AOD_17.style.display = "inline";
} else {
Span_AOD_17.style.display = "inline";
}
AODName_17.style.display = "inline";
break;
case 18:
AODName_18.innerText = AODNameArray[18]
if (AODURLArray[18] != '') {
Button_AOD_18.style.display = "inline";
} else {
Span_AOD_18.style.display = "inline";
}
AODName_18.style.display = "inline";
break;
case 19:
AODName_19.innerText = AODNameArray[19]
if (AODURLArray[19] != '') {
Button_AOD_19.style.display = "inline";
} else {
Span_AOD_19.style.display = "inline";
}
AODName_19.style.display = "inline";
break;
}  }
OpenAll.style.display = "inline";
} else {
AudioDownload.style.display = "inline";
AudioDownloadInfo = AODListResultArray[1].split('#####')
AudioDownload.innerHTML = "<a href='" + AudioDownloadInfo[1] + "' download='" + AudioDownloadInfo[0] + "'>Donwload</a>"
AudioDownload.innerHTML = "<br><textarea cols=100 rows=4>" + AudioDownloadInfo[0] + ".mp3</textarea><br>全選文字框內的文字作為檔名, 點擊下方 Donwload 即可貼上檔名<br><br><a href='" + AudioDownloadInfo[1] + "' download='" + AudioDownloadInfo[0] + "'><font size=6>Donwload</font></a>"
}
});

function OpenAllURL() {
  chrome.tabs.executeScript(null, {
    file: "OpenAll.js"
  }, function() {
    if (chrome.runtime.lastError) {
      message.innerText = 'There was an error injecting script : \n' + chrome.runtime.lastError.message;
    }
  });
}
function ShowAOD_00() {
var AODListResult = message.innerText
AODListResultArray = AODListResult.split("@@@@@")
var AODURLArray = AODListResultArray[1].split("#####")
window.open(AODURLArray[0])
}
function ShowAOD_01() {
var AODListResult = message.innerText
AODListResultArray = AODListResult.split("@@@@@")
var AODURLArray = AODListResultArray[1].split("#####")
window.open(AODURLArray[1])
}
function ShowAOD_02() {
var AODListResult = message.innerText
AODListResultArray = AODListResult.split("@@@@@")
var AODURLArray = AODListResultArray[1].split("#####")
window.open(AODURLArray[2])
}
function ShowAOD_03() {
var AODListResult = message.innerText
AODListResultArray = AODListResult.split("@@@@@")
var AODURLArray = AODListResultArray[1].split("#####")
window.open(AODURLArray[3])
}
function ShowAOD_04() {
var AODListResult = message.innerText
AODListResultArray = AODListResult.split("@@@@@")
var AODURLArray = AODListResultArray[1].split("#####")
window.open(AODURLArray[4])
}
function ShowAOD_05() {
var AODListResult = message.innerText
AODListResultArray = AODListResult.split("@@@@@")
var AODURLArray = AODListResultArray[1].split("#####")
window.open(AODURLArray[5])
}
function ShowAOD_06() {
var AODListResult = message.innerText
AODListResultArray = AODListResult.split("@@@@@")
var AODURLArray = AODListResultArray[1].split("#####")
window.open(AODURLArray[6])
}
function ShowAOD_07() {
var AODListResult = message.innerText
AODListResultArray = AODListResult.split("@@@@@")
var AODURLArray = AODListResultArray[1].split("#####")
window.open(AODURLArray[7])
}
function ShowAOD_08() {
var AODListResult = message.innerText
AODListResultArray = AODListResult.split("@@@@@")
var AODURLArray = AODListResultArray[1].split("#####")
window.open(AODURLArray[8])
}
function ShowAOD_09() {
var AODListResult = message.innerText
AODListResultArray = AODListResult.split("@@@@@")
var AODURLArray = AODListResultArray[1].split("#####")
window.open(AODURLArray[9])
}
function ShowAOD_10() {
var AODListResult = message.innerText
AODListResultArray = AODListResult.split("@@@@@")
var AODURLArray = AODListResultArray[1].split("#####")
window.open(AODURLArray[10])
}
function ShowAOD_11() {
var AODListResult = message.innerText
AODListResultArray = AODListResult.split("@@@@@")
var AODURLArray = AODListResultArray[1].split("#####")
window.open(AODURLArray[11])
}
function ShowAOD_12() {
var AODListResult = message.innerText
AODListResultArray = AODListResult.split("@@@@@")
var AODURLArray = AODListResultArray[1].split("#####")
window.open(AODURLArray[12])
}
function ShowAOD_13() {
var AODListResult = message.innerText
AODListResultArray = AODListResult.split("@@@@@")
var AODURLArray = AODListResultArray[1].split("#####")
window.open(AODURLArray[13])
}
function ShowAOD_14() {
var AODListResult = message.innerText
AODListResultArray = AODListResult.split("@@@@@")
var AODURLArray = AODListResultArray[1].split("#####")
window.open(AODURLArray[14])
}
function ShowAOD_15() {
var AODListResult = message.innerText
AODListResultArray = AODListResult.split("@@@@@")
var AODURLArray = AODListResultArray[1].split("#####")
window.open(AODURLArray[15])
}
function ShowAOD_16() {
var AODListResult = message.innerText
AODListResultArray = AODListResult.split("@@@@@")
var AODURLArray = AODListResultArray[1].split("#####")
window.open(AODURLArray[16])
}
function ShowAOD_17() {
var AODListResult = message.innerText
AODListResultArray = AODListResult.split("@@@@@")
var AODURLArray = AODListResultArray[1].split("#####")
window.open(AODURLArray[17])
}
function ShowAOD_18() {
var AODListResult = message.innerText
AODListResultArray = AODListResult.split("@@@@@")
var AODURLArray = AODListResultArray[1].split("#####")
window.open(AODURLArray[18])
}
function ShowAOD_19() {
var AODListResult = message.innerText
AODListResultArray = AODListResult.split("@@@@@")
var AODURLArray = AODListResultArray[1].split("#####")
window.open(AODURLArray[19])
}

function onWindowLoad() {
  chrome.tabs.executeScript(null, {
    file: "getPagesSource.js"
  }, function() {
    if (chrome.runtime.lastError) {
      message.innerText = 'There was an error injecting script : \n' + chrome.runtime.lastError.message;
    }
  });
}
window.onload = onWindowLoad;
document.getElementById('OpenAll').addEventListener('click', OpenAllURL);
document.getElementById('Button_AOD_00').addEventListener('click', ShowAOD_00);
document.getElementById('Button_AOD_01').addEventListener('click', ShowAOD_01);
document.getElementById('Button_AOD_02').addEventListener('click', ShowAOD_02);
document.getElementById('Button_AOD_03').addEventListener('click', ShowAOD_03);
document.getElementById('Button_AOD_04').addEventListener('click', ShowAOD_04);
document.getElementById('Button_AOD_05').addEventListener('click', ShowAOD_05);
document.getElementById('Button_AOD_06').addEventListener('click', ShowAOD_06);
document.getElementById('Button_AOD_07').addEventListener('click', ShowAOD_07);
document.getElementById('Button_AOD_08').addEventListener('click', ShowAOD_08);
document.getElementById('Button_AOD_09').addEventListener('click', ShowAOD_09);
document.getElementById('Button_AOD_10').addEventListener('click', ShowAOD_10);
document.getElementById('Button_AOD_11').addEventListener('click', ShowAOD_11);
document.getElementById('Button_AOD_12').addEventListener('click', ShowAOD_12);
document.getElementById('Button_AOD_13').addEventListener('click', ShowAOD_13);
document.getElementById('Button_AOD_14').addEventListener('click', ShowAOD_14);
document.getElementById('Button_AOD_15').addEventListener('click', ShowAOD_15);
document.getElementById('Button_AOD_16').addEventListener('click', ShowAOD_16);
document.getElementById('Button_AOD_17').addEventListener('click', ShowAOD_17);
document.getElementById('Button_AOD_18').addEventListener('click', ShowAOD_18);
document.getElementById('Button_AOD_19').addEventListener('click', ShowAOD_19);
OpenAll.js
function DOMtoString(document_root) {
var buttons = document.getElementsByTagName('button');
for (var i = 0; i < buttons.length; i++) {
var EventContent = buttons[i].getAttribute('onclick')
if (EventContent.startsWith("OpenICMediaPlayer")) {
EventContent = EventContent.split("'")
window.open("http://www.ic975.com/AOD/Play.php?id=" + EventContent[1])
}
}
return true;
}
chrome.runtime.sendMessage({
    action: "getSource",
    source: DOMtoString(document)
});
getPagesSource.js
function DOMtoString(document_root) {
var Result = ''
var html = '',
node = document_root.firstChild;
while (node) {
switch (node.nodeType) {
case Node.ELEMENT_NODE:
html += node.outerHTML;
break;
case Node.TEXT_NODE:
html += node.nodeValue;
break;
case Node.CDATA_SECTION_NODE:
html += '<![CDATA[' + node.nodeValue + ']]>';
break;
case Node.COMMENT_NODE:
html += '<!--' + node.nodeValue + '-->';
break;
case Node.DOCUMENT_TYPE_NODE:
// (X)HTML documents are identified by public identifiers
html += "<!DOCTYPE " + node.name + (node.publicId ? ' PUBLIC "' + node.publicId + '"' : '') + (!node.publicId && node.systemId ? ' SYSTEM' : '') + (node.systemId ? ' "' + node.systemId + '"' : '') + '>\n';
break;
}
node = node.nextSibling;
}
ProgramNameList = ''
ProgramURL = ''
TempOne = html.split('class="program_title">')
for (var i = 1; i < TempOne.length; i++) {
TempTwo = TempOne[i].split('</a><div id="AOD_')
AODURL = ''
var CheckMediaExist = TempTwo[1]
var CheckMediaExistTemp = TempTwo[1].replace('OpenICMediaPlayer','')
if (CheckMediaExist.length != CheckMediaExistTemp.length) {
var TempThree = TempTwo[1].split('onclick="OpenICMediaPlayer(\'')
if (TempThree.length == 2) {
TempFour = TempThree[1].split('\'')
AODURL = "http://www.ic975.com/AOD/Play.php?id=" + TempFour[0]
}
}
if (ProgramURL == '') {
ProgramURL = AODURL
} else {
ProgramURL = ProgramURL + '#####' + AODURL
}
if (ProgramNameList == '') {
ProgramNameList = TempTwo[0]
} else {
ProgramNameList = ProgramNameList + '#####' + TempTwo[0]
}
}
var Result = ProgramNameList + "@@@@@" + ProgramURL
if (Result == "@@@@@") {
TempOne = html.split('preload="metadata" src="')
Temptwo = TempOne[1].split('"></audio>')
AudioURL = Temptwo[0].replace('&amp;','&')
TempOne = html.split('target="_blank" title="')
Temptwo = TempOne[1].split('" style="color:#000000;')
AudioName = Temptwo[0].replace("  "," — ")
for (i=0;i<20;i++) {
AudioName = AudioName.replace("  "," ")
AudioName = AudioName.replace("/","-")
}
var Result = "AudioDownload@@@@@" + AudioName + '#####' + AudioURL
}
return Result;
}
chrome.runtime.sendMessage({
    action: "getSource",
    source: DOMtoString(document)
});

沒有留言: