编写浏览器扩展
上一期文章说到,我做出了浏览器的视频扩展插件
今天就给大家分享这个浏览器扩展的所有代码
点击扩展按钮打开html:(Config.html)
<!DOCTYOE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css\Feature.css">
</head>
<body>
<div width="60" class="main"><h2>Flutas VideoDownLoad</h2>
<span>Flutas VideoDownLoad 扩展插件</span>
<br><br>
<span>版本 2.3</span>
<br>
<span>Powered by Xbodw.</span>
<br><br>
<p class="info"><a href="Options.html">关于 Flutas VideoDownLoad 2.3</a></p>
</div>
</body>
</html>
扩展选项界面与关于界面(ooptions.html)
<!DOCTYOE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css\Feature.css">
</head>
<body>
<div width="60" class="main"><h2>Flutas VideoDownLoad</h2>
<span>Flutas VideoDownLoad 扩展插件 - 关于</span>
<br><br>
<span>版本 2.3</span>
<br>
<span>Powered by Xbodw.</span>
<br><br>
<span>Flutas VideoDownLoad是一款可以帮助用户无水印下载抖音视频的插件</span>
<br><br>
<span>由于技术原因,我们暂时无法锁定搜寻到的链接一定是您正在播放中的视频</span>
<br>
<span>(抖音拥有多个视频src链接无法确定)</span>
<br>
<span>此Bug仅在抖音首页会出现,用户主页和搜索页面下载视频正常不会出现上图情况</span>
<br><br>
<button id="save" onclick="window.location.href='https://xbodw.github.io/feedback'">寻求帮助</button>
</div>
</body>
</html>
content.js触发脚本
function AddDownLoadButton() {
if (window.location.host == "www.douyin.com") {
var button = `<div class="DownLoader">
<div class="CT3y5rWY jtnwH7Q7 UgpbNsc3" data-e2e-state="video-player-is-collected" data-e2e="video-player-collect">
<div class="ywWMyrCr">
<div class="H2e1f_wM">
<svg width="40" height="30" fill="none" xmlns="http://www.w3.org/2000/svg" class="F6D9A5IA" viewBox="0 -0.5 18.83 12.91"><path fill-rule="evenodd" clip-rule="evenodd" d="M2.579 1a1 1 0 011-1h12a1 1 0 011 1v9.036a.5.5 0 01-.415.493 2 2 0 01.861.24l1.863 1.013c.182.1.111.376-.096.376H.365c-.207 0-.278-.277-.096-.376l1.863-1.013a2 2 0 01.861-.24.5.5 0 01-.414-.493V1zm6.3 2.6a.6.6 0 011.2 0V6H11.9a.3.3 0 01.222.502L9.8 9.055a.3.3 0 01-.444 0L7.035 6.502A.3.3 0 017.257 6H8.88V3.6z" fill="#2F3035" fill-opacity="0.9"></path></svg>
</div>
</div>
<div class="qc4FQDvn eEBI4Egz">下载</div>
</div>
</div>`;
var add = document.querySelector('div[class="ZfrXkYoG"]');
add.innerHTML = button;
document.querySelector('div[class="DownLoader"]').addEventListener(
'click',
function() {
if (window.location.host == "www.douyin.com") {} else {
alert("网站可能不是抖音!");
return;
}
try {
var link = document.querySelector(
'source[src*="&aid="]').getAttribute('src');
var part = document.querySelector(
'source[src*="&aid="]').parentElement
.getAttribute('mediatype');
if (part == "video") {
//var link=document.querySelector('source[src*="id="][src*="v3-web"]').getAttribute('src');
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
var hour = date.getHours();
var minute = date.getMinutes();
var second = date.getSeconds();
var filename = "视频_" + year + month + day + hour +
minute + second + ".mp4";
console.log("视频正在合成，完成后将自动保存.");
fetch(link).then(res => res.blob()).then(blob => {
const a = document.createElement('a');
document.body.appendChild(a);
a.style.display = 'none';
const url = window.URL.createObjectURL(
blob);
a.href = url;
a.download = filename;
a.click();
document.body.removeChild(a)
window.URL.revokeObjectURL(url);
});
} else {
alert("获取视频下载链接失败，可能是接口在维护或脚本版本过低!");
}
} catch {
alert("获取视频下载链接失败，可能是接口在维护或脚本版本过低!");
}
});
}
}
var delay = function() {
if (document.querySelector('div[class="ZfrXkYoG"]') != null) {
if (document.querySelector('div[class="DownLoader"]') == null) {
AddDownLoadButton();
}
}
setTimeout(function() {
delay()
}, 100)
}
window.onhashchange = delay();
Feature.css层叠样式表:
body {
background: white;
}
.info {
padding: .5rem 1rem;
background-color: rgba(24,144,255,0.1);
border: 1px solid #1890ff;
border-radius: .4rem;
}
.main {
width: 300px;
margin: 0 auto;
}
html {
font-family: "Segoe UI", Arial, "Microsoft Yahei", sans-serif;
font-size: 75%;
}
button{
background-color:#A020F0;
color:white;
height: 25px;
border:0;
font-size: 16px;
box-sizing: content-box;
border-radius: 5px;
}
button:hover{
background-color: #a54b4a;
}
附上CRX程序包配置文件manifest.json
{
"manifest_version": 2,
"name": "Flutas VideoDownLoad",
"description": "使用这款插件,可以无水印下载抖音视频!网页端福音!",
"version": "2.3",
"icons": {
"256": "icon/icon.ico"
},
"permissions": [
"storage",
"tabs"
],
"options_page": "",
"page_action": {
"default_icon": "icon/icon.ico",
"default_title": "Flutas VideoDownLoad",
"default_popup": "Config.html"
},
"options_ui": {
"page": "Options.html",
"open_in_tab": true
},
"content_scripts": [{
"matches": ["*://www.douyin.com/*"],
"js": ["js/content.js"],
"run_at": "document_end"
}]
}
效果展示图:
在扩展开启时,打开抖音可以看到新增的下载按钮:
