首页 /
正文
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/*"]
}
}
Ценники на вывоз мусора сейчас космос, любые лайфхаки по экономии в тему.
1xbet onlayn kazino platforması ilə vaxtınızı daha səmərəli və maraqlı keçirin. Saytın canlı kazino bölməsi istifadəçilərə fərqli bir dünya təklif edir. Burada canlı dilerli kazino oyunlarının hər bir növünü sınaqdan keçirə bilərsiniz. Krupyelərin peşəkarlığı oyunun dinamikasını və marağını artırır. Müntəzəm olaraq yenilənən oyun siyahısı cansıxıcılığa yol vermir. Hesabınızı artırmaq üçün onlarla fərqli və etibarlı üsul mövcuddur. Qazanılan pullar cəmi bir neçə dəqiqə ərzində şəxsi hesabınıza köçürülür. Aktiv fəaliyyətinizə görə fərdi bonuslar və hədiyyələr qazana bilərsiniz. Dəstək xidməti həm çat, həm də e-poçt vasitəsilə kömək göstərir. 1xbet ailəsinə qoşulun və böyük uduşlar üçün ilk addımı atın. onlayn kazino
我一直梦想, 看到你们相册那样的地方。真棒。
我喜欢, 这里分享真实经验。你的项目 就是 属于这里的。请继续。
我热爱这样的想法, 去那么多国家。真的很鼓舞。
能感受到热爱。继续保持 感受。
我关注这样的资源, 写得很实在。你的网站 就是 属于这里的。加油。
1
1
1