เขียนแอพดาวน์โหลดเพลง วีดีโอ บน Google Chrome กัน ๆ (กรณีศึกษา)

  1. สร้างโครงสร้างโปรเจคประมาณนี้

ไฟล์ “manifest.json” ประมาณนี้ อยากเพิ่ม permission หรือ config อะไรเพิ่มเติมก็แล้วแต่เลย

{
"name": "Sniffer 4 Media Downloader",
"version": "1.0",
"manifest_version": 2,
"author": "prongbang",
"description": "Sniffer 4 Media Downloader",
"browser_action": {
"default_icon": "src/img/sniffer4_128x128.png"
},
"icons": {
"128": "src/img/sniffer4_128x128.png",
"16": "src/img/sniffer4_32x32.png",
"48": "src/img/sniffer4_48x48.png"
},
"permissions": [
"tabs",
"webRequest",
"downloads",
"http://*/*",
"https://*/*",
"cookies",
"webRequestBlocking",
"<all_urls>"
],
"content_security_policy": "script-src 'self' https://ssl.google-analytics.com; object-src 'self'",
"content_scripts": [
{
"matches": [
"<all_urls>"
],
"js": [
"src/js/libs/jquery-1.11.3.min.js",
"src/js/utils.js",
"src/js/content.js"
],
"run_at": "document_end"
}
],
"background": {
"scripts": [
"src/js/libs/jquery-1.11.3.min.js",
"src/js/utils.js",
"src/js/media.js",
"src/js/background.js"
],
"persistent": true
},
"web_accessible_resources": [ "*" ]
}

ไฟล์ “background.js” เป็นส่วนที่ทำงานแบบ background ซึ่งจากโค้ดมันจะทำการดักจับ URL ที่เป็นวีดีโอ หรือ เพลงที่เป็น mp3/mp4 บนเว็บที่เราเปิดอยู่ และส่งข้อมูลไปให้ไฟล์ “content.js

chrome.webRequest.onResponseStarted.addListener(function (data) {
if (!data || data.tabId < 0) return false;
chrome.tabs.get(data.tabId, function (tab) {
if (chrome.runtime.lastError) {
console.log(chrome.runtime.lastError.message);
} else if (!tab) {
console.log(data);
} else {
var tabInfo = tab;
data.tab = tabInfo;
if (!tabInfo.url) return false;
var url = media.findURL(data);
if (url != "") {
console.log(url);
// send to content
chrome.tabs.sendMessage(tab.id, {action: "success", url: url});
}
}
});
}, {
urls: ["<all_urls>"]
}, ["responseHeaders"]);
// receive from content
chrome.runtime.onMessage.addListener(
function (request, sender, sendResponse) {
if (request.action == "download") {
var filename = request.name + ".mp4";
var options = {
url: request.url,
filename: filename,
saveAs: true,
method: "GET"
};
chrome.downloads.download(options, function (downloadId) {
});
}
}
);

ไฟล์ “content.js” เป็นส่วนที่จัดการหน้าเว็บที่เราเปิด อยู่ที่เราจะเขียนสคริปไปจัดการเกี่ยวกับอะไร ซึ่งในโค้ดนี้จะจัดการเกี่ยวกับปุ่มดาวน์โหลด และการส่งข้อมูลไปให้ไฟล์ “background.js

function setPopup(url) {
return ‘<div class=”sniffer4-popup” style=”background: #E91E63;border-radius: 11px;position: fixed; bottom: 0px; left: 42%;width: auto; z-index: 9999999; color: rgb(51, 51, 51); opacity: 1; text-align: center;padding-right: 5px;”> <input type=”hidden” id=”sniffer4-url” value=”’ + url + ‘”> <button class=”sniffer4-download” style=”border-radius: 11px;color: #ffffff; background: #E91E63;font-size: 13px; border: none; cursor: pointer; padding: 5px 5px 5px 20px;”> <span style=”padding-right: 10px;”>Downloads</span> </button> <span style=”color: #333333;”>|</span> <span style=”padding-left: 10px;padding-right: 10px;”> <a href=”’ + url + ‘” target=”_blank” style=”color: orange;” wotsearchprocessed=”true”>Get Link</a> </span> <span style=”color: #333333;padding-right: 1px;”>|</span> <span><a class=”sniffer4-close” href=”#” style=”padding-left: 5px;background: rgba(51, 51, 51, 0.32);border-radius: 10px;padding: 0px 5px 2px 5px;text-decoration: none;” wotsearchprocessed=”true”>x</a></span></div>’;
}
// receive from background
chrome.runtime.onMessage.addListener(
function (request, sender) {
if (request.action == "success") {
var url = request.url;
$("body").append(setPopup(url));
$(".sniffer4-download").click(function () {
$(".sniffer4-popup").hide();
var url = $("#sniffer4-url").val();
var json = {
action: "download",
url: url,
name: window.location.hostname
};
// send to background
chrome.runtime.sendMessage(json);
});
$(".sniffer4-close").click(function () {
$(".sniffer4-popup").remove();
});
}
}
);

ไฟล์ “media.js” จะเก็บพวกฟังก์ชันค้นหา URL ที่เป็น mp3/mp4

var media = {
contentType: "content-type",
video: "video",
audio: "audio",
other: "other",
xmlHttpRequest: "xmlhttprequest",
findURL: function (data) {
var url = "";
if (!!data && data.type == media.other || data.type == media.xmlHttpRequest) {
if (!!data.responseHeaders) {
if (media.checkContentType(data.responseHeaders)) {
url = data.url;
}
}
}
return url;
},
checkContentType: function (headers) {
var found = false;
for (var i = 0; i < headers.length; i++) {
if ((headers[i].name).toLowerCase() == media.contentType && ((headers[i].value).indexOf(media.video) != -1 || (headers[i].value).indexOf(media.audio) != -1)) {
found = true;
break;
}
}
return found;
}
};

ไฟล์ “utils.js” จะเก็บฟังก์ชันแทนที่คำ

var utils = {
};
String.prototype.replaceAll = function (search, replacement) {
var target = this;
return target.split(search).join(replacement);
};

ไฟล์ “jquery-1.11.3.min.js” คงไม่ต้องบอกเนอะว่าเป็นไฟล์อะไร รู้ ๆ กันอยู่

2.เมื่อเขียนโปรแกรมเสร็จแล้วต่อไปก็จะเป็นการนำ app ที่เราเขียนติดตั้งลง chrome ซึ่งสามารถติดตั้งได้ง่าย ๆ ดังนี้

2.1 เข้าไปที่ chrome://extensions/

2.2 ติ๊กเลือก Developer mode ตามรูป

2.3 คลิกที่ Load unpacked extension… จากนั้นเลือกโปรเจคที่ของเราประมาณรูปนี้ จากนั้นคลิก OK

2.4 ติดตั้งเสร็จเรียบร้อยจะได้ประมาณรูปนี้

3. ทดสอบแอพโดยเข้าไปที่เว็บที่มีวีดีโอแล้วจะเห็นว่ามีปุ่มสีชมพูขึ้นมาให้เราสามารถดาวน์โหลดได้

หน้าตาของปุ่ม
ตัวอย่าง Source Code

Enjoy!

Like what you read? Give prong bang a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.