Chrome插件

本文链接：https://blog.csdn.net/lixiaosenlin/article/details/119110919

本文介绍如何利用chrome插件技术结合RecorderRTC.js库，实现Chrome浏览器右键菜单的屏幕录制并保存下载功能。主要内容包括：主要技术点（chrome插件开发和chrome API）、插件缺点（无法录制声音，部分播放器不支持编码格式）、文件实现（screencapture.html、manifest.json、RecordRTC.js和capture.js），以及插件的安装步骤。

摘要由CSDN通过智能技术生成

主要技术点

chrome 插件（扩展）开发。关于chrome插件开发可参考另一篇文章：chrome扩展-打造个性化的web页面

chrome API相关功能，主要用到添加右键菜单功能

RecordRTC.js

插件缺点

无法录制声音

由于编码格式，一些播放器无法播放，可以在网页中或者腾讯视频中播放

在任意位置新建一个文件夹，文件夹名称可以任意命名，如：screencapture

进入到该文件夹中并新增3/4个文件，一个html文件，一个json配置文件，一或两个js文件

一个html文件（screencapture.html）：用于作为插件的背景页，会在chrome后台一直运行

一个json配置文件（manifest.json）：名称必须是manifest.json，用于记录插件的配置信息

一个或两个js文件：之所以说一个或两个是因为RecorderRTC.js文件可以通过cdn的形式引入，也可以下载到本地后在引入，本文中将采用第二种形式实现（即用两个js文件）。

各文件具体代码实现

screencapture.html

该文件用于作为chrome插件的背景页，会随着浏览器的打开在chrome后台一直运行，直到浏览器关闭。该页面不会被用户看到，在本文功能录屏功能中仅作为一个承接作用，所以可以不用有具体内容，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Screen Capture</title>
</head>
<body>    
    <script src="RecordRTC.js"></script>
    <script src="capture.js"></script>
</body>
</html>

manifest