Chrome扩展 实现自动页面Video下载 demo
原创
最近在看一些浏览器相关的知识，然后就看到了chrome扩展开发文档，觉得很有意思，就按照文档做了一个最简单的demo实现页面上video的自动下载。
参考文档有两个：
http://chrome.cenchy.com/getstarted.html --中文文档，缺点是内容比较老旧，
https://developer.chrome.com/docs/extensions/mv3/getstarted/ --官方文档，内容是最新的，但是不知道啥原因经常上不去。。
开始构建一个最简单的demo。
首先新建一个文件夹作为扩展的根目录，我以chromeEx为例：
然后新建扩展配置文件:manifest.json
{
"name": "Video Download Demo",
"description": "下载网页中的video",
"version": "1.0",
"manifest_version": 3,
"background": {
"service_worker": "background.js"
},
"permissions": [
"storage",
"notifications",
"activeTab",
"scripting"
],
"action": {
"default_icon": "icon.png",
"default_title": "Download"
},
"content_scripts": [{
"matches": ["<all_urls>"],
"js": ["content-script.js"],
"run_at": "document_start"
}]
}
简单说明下json中的配置：
前三行是扩展名字，描述，版本号，会在扩展详细信息中展示给用户，
manifest_version是扩展的配置项文件的版本。这个还是比较重要的，不同的配置项版本，配置项文件有略微的差别，在中文开发文档中给的例子还是1，但是最新的官方已经是3了。这个在配置时还是要注意下保持版本一致的。
background中引入的 是一个常驻的页面，它的生命周期是插件中所有类型页面中最长的，它随着浏览器的打开而打开，随着浏览器的关闭而关闭，所以通常把需要一直运行的、启动就运行的、全局的代码放在background里面。
background的权限非常高，几乎可以调用所有的Chrome扩展API（除了devtools），而且它可以无限制跨域，也就是可以跨域访问任何网站而无需要求对方设置cors。
permissions是指本扩展需要使用到的权限。
action中default_icon是指本扩展在浏览器中的图标，我这里用了一个和我头像一样的png，default_title是浏览器中扩展图标的title。如果不配置这个的话title会显示name。
content_scripts就是本次开发的重点了，他是Chrome插件中向页面注入脚本的一种形式（虽然名为script，其实还可以包括css的），借助content_scripts我们可以实现通过配置的方式轻松向指定页面注入JS和CSS。matches是指需要注入的网页，all_urls表示所有网页均注入，js即注入的js在根目录的路径，run_at是指注入的js执行的时机，有三个可选值： "document_start", "document_end", or "document_idle"，最后一个表示页面空闲时，默认document_idle。
当然还有popup即鼠标点击扩展时弹出的页面，因为这次没用到，所以我没把这个配置项加进去。
background.js代码：
chrome.runtime.onInstalled.addListener(() => {
chrome.notifications.create(null, {
type: 'basic',
iconUrl: 'icon.png',
title: 'demo',
message: '下载插件已启动'
});
});当插件启动时，给桌面发送一个通知，下载插件已启动。
content_scripts代码：
document.addEventListener('DOMContentLoaded', function() {
let ele = document.getElementsByTagName("video");
for (let i = 0; i < ele.length; i++) {
let uri = ele[i].src;
console.log(uri);
let downuri = uri.split('?')[0]
let strarray = downuri.split(".");
let srctype = strarray[strarray.length - 1];
downloadUrlFile(downuri, document.title + "." + srctype);
}
});
function downloadUrlFile(url, fileName) {
const url2 = url.replace(/\\/g, '/');
const xhr = new XMLHttpRequest();
xhr.open('GET', url2, true);
xhr.responseType = 'blob';
xhr.onload = () => {
if (xhr.status === 200) {
// 获取文件blob数据并保存
saveAs(xhr.response, fileName);
}
};
xhr.send();
}
function saveAs(data, name) {
const urlObject = window.URL || window.webkitURL || window;
const export_blob = new Blob([data]);
//createElementNS() 方法可创建带有指定命名空间的元素节点。
//此方法可返回一个 Element 对象。
const save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
save_link.href = urlObject.createObjectURL(export_blob);
save_link.download = name;
save_link.click();
}监听dom加载完成事件，然后从中找到video标签，获取url下载。(这个是小意思了，很简单)
加载扩展：
demo做完了就可以加载到chrome中，在chrome中找到扩展程序(chrome://extensions/),打开开发者模式，加载已解压的扩展程序，然后选择我们扩展的根目录即可。
加载成功后执行了background.js，弹出桌面通知。
在百度上随便搜索一个视频，打开包含视频的页面。
大功告成咯。
chrome扩展开发整体来说还是非常方便的，也不需要什么特殊的ide，只要根据文档放入一个配置文件，其他的基本上就是h5那一套开发。从看到文档到整个开发完成也就一两个小时的时间。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。