我们在上网时, 常常需要把刚兴趣的文章记录下来, 方便以后继续细看. 如果记录为 Markdown 格式的话, 还可以方便的把文章链接加入到自己创作的文章内.
今天编写的小工具, 就是一个 Chrome Extension, 当用户在当前页面上按快捷键 Command+Shift+Y 的时候, 可以把当前页面的标题和 URL 组合保存到剪贴板, 如下形式:
[Title](URL)
在阅读此文之前, 如果你没有看过# 编写第一个 Chrome Extension - 掘金, 建议首先阅读此文.
添加键盘快捷键的方法
Chrome 提供了 Command API, 可以通过它来添加触发 Chrome Extension 中操作的快捷键. 可以在 manifect.JSON 内声明如下:
- {
- "commands": {
- "Run": {
- "suggested_key": {
- "default": "Ctrl+Shift+Y",
- "mac": "Command+Shift+Y"
- },
- "description": "Toggle feature foo"
- },
- }
这意味着在用户按下指定按钮 (Ctrl+Shift+Y), 会触发一个叫做 Run 的操作.
在后台页面中, 您可以通过 onCommand.addListener 将处理程序绑定到清单中定义的命令. 例如:
- Chrome.commands.onCommand.addListener(function(command) {
- console.log('Command:', command);//Run
- });
拷贝到剪贴板的方法
可以在你的 background.html 内添加一个 textarea, 用于拷贝到剪贴板的中转:
<textarea id="clipboard"></textarea>
需要执行操作的时候, 会把内容写入此 textarea, 然后执行命令完成剪贴动作:
document.execCommand("copy", false, null);
整合后的 JS 代码如下:
- function copyTitleURL() {
- Chrome.tabs.getSelected(null, function(tab) {
- copyToClipboard( "["+tab.title + "](" + tab.url +")");
- });
- }
- function copyToClipboard(str) {
- var obj=document.getElementById("clipboard");
- if( obj ) {
- obj.value = str;
- obj.select();
- document.execCommand("copy", false, null);
- }
- }
- Chrome.commands.onCommand.addListener(function(command) {
- if("Run" === command){
- copyTitleURL()
- }
- });
总结
本文学习了 Chrome Extension 的键盘快捷键的声明和响应的方法, 更多的 Chrome Extension API 请看官方文档 Chrome.commands - Google Chrome https://developer.chrome.com/apps/commands
来源: https://juejin.im/post/5c064783e51d451da5677e53