浏览器扩展是个很好用的东西，像Chrome好用的插件就特别多。可惜找了半天手机端支持的只有火狐，因为都是使用的统一的WebExtensions API，转Chrome也不太费事，尝试着做了一下。
前言与分析
现在要做一个网页视频提取下载功能的插件。因为有时候网页并不是一访问完毕就加载好视频，可能还需要用户的一些操作什么的，故而提取视频链接这个动作最好由用户来完成，也就是点击一下插件的按钮。
那么，可以想见，现在需要做的大概有以下几件事情：
- 监听插件按钮，有点击就给脚本发信号
- 脚本收到信号，提取视频链接，因为有的链接默认下载器处理不了，故而还有添加到剪贴板这一操作
监听按钮
background.js监听到按钮点击后，发送信号给当前活动页面
function sendSig(tabs) {
browser.tabs.sendMessage(tabs[0].id, {
command : "printVideoInfo",
});
}
function onClickBtn() {
browser.tabs.query({
active : true,
currentWindow : true
}).then(sendSig);
}
browser.browserAction.onClicked.addListener(onClickBtn);
提取视频
printVideo.js收到请求后，提取视频链接并下载
function printVideoInfo(){
var video = document.getElementsByTagName("video");
var urlLink;
for(var i=0; i<video.length; i++){
urlLink = video[i].getAttribute("src");
if( urlLink == null){
try{
urlLink = video[i].getElementsByTagName("source")[0].getAttribute("src");
}catch(err){}
}
if( urlLink != null){
urlLink = toAbsURL(urlLink);
console.log(urlLink);
copyToClipboard(urlLink);
downloadFile(urlLink);
break;
}
}
if( urlLink == null){
alert("There is no video catched!");
}
}
browser.runtime.onMessage.addListener((message) => {
if (message.command === "printVideoInfo") {
printVideoInfo();
};
});