小技巧 | Chrome 插件如何完成剪切板的操作！
小技巧 | Chrome 插件如何完成剪切板的操作！
大家好，我是安果！
之前写过一篇文章，谈到在开发 Chrome 插件时常用的一些 Tips
有时候，我们可能需要通过浏览器操作系统剪切板，以此来简化操作、提升工作效率
本篇文章通过一个实例聊聊 Chrome 插件开发与剪切板的那些事
1. 右键菜单
假设我们的使用场景是：通过右键菜单（这里以最简单的一级菜单为例），调用一个接口，然后解析后将数据拷贝到剪切板，最后我们可以直接使用这个数据
实现右键菜单只需要下面 3 个步骤
1-1 新建右键菜单
在 background.js 中，监听 Chrome 插件的安装事件，使用下面的语法创建一个右键菜单
语法：
chrome.contextMenus.create({type:'normal',title:'',id:'menu_id',contexts:['all'],documentUrlPatterns,parentId})
其中
- type 菜单类型 值可设置为：normal（默认）、checkbox、radio、separator
- title 用于指定菜单的名称文案
- id 为菜单的元素 id，方便后面的监听事件处理
- contexts 用于设置什么时候显示菜单（可以配置划词显示或一直显示
- documentUrlPatterns 设置匹配的 URL 才展示右键菜单
- parentId 用于指定右键菜单项的父菜单项的 id 将使此菜单项作为父菜单项的子菜单项
//background.js
//新增一个右键菜单（只创建一次）
chrome.runtime.onInstalled.addListener(() => {
chrome.contextMenus.create({
type: 'normal',
title: "测试菜单",
id: 'menu_test',
contexts: ['all']
})
});1-2 监听事件
接着，为上面的右键菜单添加一个点击监听事件
PS：具体的处理后面会讲到
//background.js
//右键菜单点击事件处理
chrome.contextMenus.onClicked.addListener(
(info, tab) => {
if(info.menuItemId=='menu_test'){
//捕获到点击事件后的具体处理
//...
}
}
)1-3 配置权限
最后，我们在 manifest.json 中配置需要右键菜单的权限
//manifest.json
...
"permissions": [
"contextMenus",
...
]
...2. 事件处理及消息通信
在上面的监听事件中，我们添加一个函数用于调用接口获取数据
2-1 事件处理
//background.js
...
function handle_menu_click(){
const url = URL_
fetch(url,{method:'GET'}).then((response)=>response.json())
.then((json)=>{
//获取响应结果
let data = json.data;
console.log("data:",data);
//发送消息给Content Script
...
}).catch((error)=>{
console.log("请求异常，错误信息:",error);
})
}
...
然后，使用 Content Script 和 Background 之间的消息通信，将数据结果发送给 Content Script 进行处理
PS：Background 受限于 Windows 对象，不能操作剪切板
2-2 发送消息
从 Background 中发送消息，将解析后的数据发送给 Content Script 中
//background.js
...
//发送消息
getCurrentTab(function(currentTab){
console.log(currentTab);
console.log(currentTab.id);
//过滤标签页
if(currentTab.url!=="chrome://newtab/"){
chrome.tabs.sendMessage(currentTab.id,{clipboard:data },(response) => {
console.log(
`background收到信息:`,response
);
});
}
})
..
2-3 接受消息
在 Content Script 中添加一个消息监听用于处理 Background 发过来的消息
//Content Script
//监听事件
try {
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
sendResponse('收到消息了！');
if (request.clipboard) {
sendResponse('收到消息了！');
try {
// 剪切板操作
copyHandle(request.clipboard, sendResponse);
} catch (error) {
console.log("处理剪切板异常！")
} finally {
sendResponse('数据已经复制到剪切板！');
}
} else {
console.log("其他消息");
};
});
} catch (error) {
console.log("监听消息产生异常，error:", error)
}
}3. 剪切板
在 Content Script 中，我们可以直接对剪切板进行操作，将消息内容拷贝到系统剪切板，然后使用 alert 在浏览器中弹出一个提示信息
需要注意的是，写入剪切板偶尔会出现异常，我们需要捕获异常，否则插件会出现错误信息
//Content Script
...
function copyHandle(text) {
if (!navigator.clipboard) {
fallbackCopyTextToClipboard(text);
return;
}
navigator.clipboard.writeText(text)
.then(() => {
alert('数据已经上传到剪切板，请进行下一步操作！')
})
.catch(err => {
console.error('无法复制此文本，异常信息如下', err);
});
}
...经过上面的操作，我们就实现了右键菜单点击动作到获取数据，然后拷贝到系统剪切板，最后浏览器提示的完整流程，有这种需求的小伙伴可以试试！