chrome视频下载插件(扩展)

最近为了方便在PC端下载头条的视频,开发一个简单的chrome插件,做得有点粗糙–!。

简单介绍一下插件开发的流程

项目结构
1.manifest.json文件
改文件用来配置所有和插件相关的属性,必须放在根目录。其中,
manifest_version:清单文件的版本
name:插件的名称
version:插件版本
以上三个属性是必不可少的。
2.content-scripts脚本
需要直接注入页面的js,也可以包含css。
content-scripts和原始页面共享DOM,但是不共享JS,如要访问页面JS,只能通过injected-script来实现。
3.popup
点击插件按钮,弹出的popup框,用来和用户交互,通过default_popup字段来指定popup页面。该页面包含html+css,可以引入popue.js,但是不能直接写js代码。
4.injected-script
content-script无法访问页面中的JS,它可以操作DOM,但是DOM却不能调用它,因此当用户需要和和DOM交互的时候,需要通过indected脚本进"中转"。
5.popue.js和content-scripts的交互
popue.js发送消息

chrome.tabs.sendMessage

content-script.js监听消息:

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse){
sendResponse('收到');
});

原理
言归正传,怎么下载视频呢,其实原理很简单,头条的视频播放基本都是支持Html5,播放视频用的

适配问题
目前仅能适配今日头条的视频下载,看了一下知乎视频,知乎的视频模块是异步加载的包含#document元素,因此通过document.getElementsByTagName不能直接获取,需要换点别的手段..

源码