小技巧 |
您所在的位置：网站首页 › chrome复制粘贴插件 › 小技巧 |
小技巧
 大家好，我是安果！ 之前写过一篇文章，谈到在开发 Chrome 插件时常用的一些 Tips 干货 | 盘点 Chrome 插件开发中那些关键的点！ 有时候，我们可能需要通过浏览器操作系统剪切板，以此来简化操作、提升工作效率 本篇文章通过一个实例聊聊 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 将使此菜单项作为父菜单项的子菜单项代码语言：javascript复制//background.js //新增一个右键菜单（只创建一次） chrome.runtime.onInstalled.addListener(() => { chrome.contextMenus.create({ type: 'normal', title: "测试菜单", id: 'menu_test', contexts: ['all'] }) });1-2 监听事件 接着，为上面的右键菜单添加一个点击监听事件 PS：具体的处理后面会讲到 代码语言：javascript复制//background.js //右键菜单点击事件处理 chrome.contextMenus.onClicked.addListener( (info, tab) => { if(info.menuItemId=='menu_test'){ //捕获到点击事件后的具体处理 //... } } )1-3 配置权限 最后，我们在 manifest.json 中配置需要右键菜单的权限 代码语言：javascript复制//manifest.json ... "permissions": [ "contextMenus", ... ] ...2. 事件处理及消息通信在上面的监听事件中，我们添加一个函数用于调用接口获取数据 2-1 事件处理 代码语言：javascript复制//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 中 代码语言：javascript复制//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 发过来的消息 代码语言：javascript复制//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 在浏览器中弹出一个提示信息 需要注意的是，写入剪切板偶尔会出现异常，我们需要捕获异常，否则插件会出现错误信息 代码语言：javascript复制//Content Script ... function copyHandle(text) { if (!navigator.clipboard) { fallbackCopyTextToClipboard(text); return; } navigator.clipboard.writeText(text) .then(() => { alert('数据已经上传到剪切板，请进行下一步操作！') }) .catch(err => { console.error('无法复制此文本，异常信息如下', err); }); } ...经过上面的操作，我们就实现了右键菜单点击动作到获取数据，然后拷贝到系统剪切板，最后浏览器提示的完整流程，有这种需求的小伙伴可以试试！ |
【本文地址】
今日新闻 |
推荐新闻 |