首页 /
正文
chrome实战，下载x站视频
前言：
空闲时间学了一天chrome插件开发，对插件开发认识不太深入，部分开发逻辑还没完全搞清楚。开发一个简单功能实战一下。
总体逻辑
通过注入js代码到网站来获取页面中的视频地址，发送给插件常驻进程，存储到缓存中。插件弹出时获取缓存中的地址。
结构
contentscript.js
注入到网页的代码逻辑，获取变量中的视频地址。由于这部分内容运行在沙盒中，无法拿到网页中的变量，可以通过注入页面script，通过script拿到页面中的变量。
let script = document.createElement("script");
script.src = chrome.runtime.getURL("script.js");
(document.header || document.body).appendChild(script);script.js
发送视频地址给background，background监听消息。
function sendUrl(url) {
// The ID of the extension we want to talk to.
var editorExtensionId = "hpjfieknedhlnpbkelpokfboamiadpmo";
chrome.runtime.sendMessage(
editorExtensionId,
{ type: "requestEvent", data: JSON.stringify(url) }
// 这里加上有时候刷新报错，有时候正常，没搞懂
// function (response) {
// console.log(response);
// }
);
}
let timer = setInterval(() => {
if (window.html5player.url_high || window.html5player.url_low) {
clearInterval(timer);
sendUrl([
{ name: "high", url: window.html5player.url_high },
{ name: "low", url: window.html5player.url_low },
]);
}
}, 200);background.js
常驻后台，监听到script发送过来的视频地址，将其加入缓存中
chrome.runtime.onMessageExternal.addListener(async function (
request,
sender,
sendResponse
) {
console.log(request);
if (request.type == "requestEvent") {
let urlObj = JSON.parse(request.data);
chrome.storage.sync.set({ urlObj });
}
});popup.
popup.html弹出下载框
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style>
.item {
width: 120px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 5px 0;
}
</style>
</head>
<body>
<script src="popup.js"></script>
</body>
</html>popup.js
// popup每次关闭打开重新加载
chrome.storage.sync.get("urlObj", ({ urlObj }) => {
// popup弹框内容
let innerHtml = "";
urlObj?.forEach((obj) => {
innerHtml += `<div class="item">
<span>${obj.name}</span>
<button data-url="${obj.url}" class="btn">下载</button>
</div>`;
});
document.body.innerHTML = innerHtml;
// 按钮点击下载事件
setTimeout(() => {
document.querySelectorAll(".btn").forEach((ele) => {
ele.onclick = function (e) {
chrome.downloads.download({ url: this.dataset.url }, function (res) {
console.log(res);
});
};
});
});
});manifest.json
{
"name": "学习网站视频解析",
"description": "Build an Extension!",
"version": "1.0",
"manifest_version": 3,
"background": {
"service_worker": "background.js"
},
"permissions": ["storage", "downloads"],
"action": {
"default_popup": "popup.html",
"default_icon": {
"16": "/images/get_started16.png",
"32": "/images/get_started32.png",
"48": "/images/get_started48.png",
"128": "/images/get_started128.png"
}
},
"icons": {
"16": "/images/get_started16.png",
"32": "/images/get_started32.png",
"48": "/images/get_started48.png",
"128": "/images/get_started128.png"
},
"content_scripts": [
{
"matches": ["https://*.xvideos.com/*"],
"js": ["contentscript.js"],
"run_at": "document_end"
}
],
"web_accessible_resources": [
{
"resources": ["script.js"],
"matches": ["https://*.xvideos.com/*"]
}
],
"externally_connectable": {
"matches": ["https://*.xvideos.com/*"]
}
}
1
1
1
1
1
1
1
1
1
1