小技巧 | 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
  将使此菜单项作为父菜单项的子菜单项

//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);
        });
}
...

经过上面的操作，我们就实现了右键菜单点击动作到获取数据，然后拷贝到系统剪切板，最后浏览器提示的完整流程，有这种需求的小伙伴可以试试！