小技巧
本篇文章通过一个实例聊聊 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);});
}
...
经过上面的操作，我们就实现了右键菜单点击动作到获取数据，然后拷贝到系统剪切板，最后浏览器提示的完整流程，有这种需求的小伙伴可以试试！
资源分享
下方这份完整的软件测试视频学习教程已经上传CSDN官方认证的二维码，朋友们如果需要可以自行免费领取 【保证100%免费】
发布评论