概述
前不久写ppt,发现要上传一些实际项目运行的视频。 刚好以前一个项目(多人在线2d游戏,可视频通话、互相聊天等)中积累了些前端媒体相关的知识。 于是我打算写一个简单的插件直接进行视频录制。
准备
我打算问下gpt
以下是一个简单的示例,演示如何编写一个 Chrome 浏览器扩展,该扩展会在每次打开新标签页时显示一个弹窗:
manifest.json
{
"manifest_version": 3,
"name": "New Tab Popup",
"version": "1.0",
"description": "Display a popup whenever a new tab is opened.",
"permissions": ["tabs"],
"background": {
"service_worker": "background.js"
},
"content_scripts": [ { "matches": ["<all_urls>"], "js": ["content.js"] }
"action": {
"default_popup": "popup.html",
"default_icon": {
"16": "icon.png",
"48": "icon.png",
"128": "icon.png"
}
},
"icons": {
"16": "icon.png",
"48": "icon.png",
"128": "icon.png"
}
}
background.js
chrome.tabs.onCreated.addListener(function(tab) {
chrome.windows.getAll({populate: true}, function(windows) {
if (windows.length === 1 && windows[0].tabs.length === 1) {
chrome.windows.create({url: 'popup.html', type: 'popup', width: 400, height: 300});
}
});
});
popup.html
<!DOCTYPE html>
<html>
<head>
<title>New Tab Popup</title>
</head>
<body>
<h1>Welcome to the New Tab Popup!</h1>
</body>
</html>
- 创建一个名为
icon.png
的图标文件,用作扩展的图标。 - 将上述文件保存在同一个文件夹中,并确保文件结构如下:
diff
- manifest.json
- background.js
- popup.html
- content.js
- icon.png
我大致解释下各文件的作用:
manifest.json :和我们前端开发的package.json文件类似但也作为主入口,它指定插件版本,拓展程序的名字、当前版本、描述、需要的权限、使用的后台脚本、拓展程序的行为、图标。 background.js :扩展程序的后台脚本,你可以认为它就是拓展程序的服务端,可以与前端通信,同时可以直接使用浏览器的api。
popup.html : 插件的前端页面,基本作为弹窗展示,当你点击插件的图标时,弹出的页面由此文件定义,在此文件中执行的js代码,可以和后台脚本通信。
此外有时候,插件需要访问当前页面的内容,所以还有一个内容脚本。它会注入到每一个打开的页面中执行。
content.js: 运行在每个匹配扩展定义的 URL 规则的页面上,因此它可以与页面内容直接交互,并执行各种定制化的操作,从而为用户提供更丰富的浏览体验。
编写
有了上述示例,基本就可以在此基础上修改出自己的插件了。
我的插件主要是录制视频(包含音频),我直接复用了以前的代码,放在了content.js中。 需要注意的2点
- manifest.json中的权限配置。
- 弹窗和内容及后台三者间的通信。
调试
-
在浏览器上打开 chrome://extensions/ 页面,切换开发者模式。
-
点击 "加载已解压的扩展程序"按钮,选择之前的代码根目录。
- 拓展程序列表会多出一个卡片,点击检测视图后面的蓝色字 Service Worker,可以看到backgroud.js的打印信息。
- 为方便开发,把插件固定在了页签上。
- 每次修改完代码后,点击卡片中的刷新,在右上方启动插件
插件打包
- 直接点击打包扩展程序,选择代码根目录
- 直接打包,初次打包私钥不用管
- 打包成功后会生成对应的私钥,要妥善保管,如果以后想升级插件版本的话还用的到。
上线谷歌应用商店
- 登录 Chrome 开发者平台(chrome.google.com/webstore/de... 如果第一次注册,还要付下5刀的注册费用,使用外贸信用卡付款
-
点击 "添加新项目",然后填写扩展程序的相关信息,包括名称、描述、类别、图标等。
-
在 "版本" 页面上传你打包好的扩展程序文件,并填写版本号和更新日志。
结尾
通过这个项目,我们深入了解了Chrome浏览器扩展的开发流程,加深了对前端媒体相关知识的理解,并成功地解决了项目需求。