Chrome扩展实现自动页面Video下载 demo

原创

4cos90

发布于 2022-02-08 16:37:44

1.4K00

代码可运行

文章被收录于专栏：随想随想

运行总次数：0

代码可运行

最近在看一些浏览器相关的知识，然后就看到了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();
}