# 编写第二个Chrome Extension+Copy URL+Title

rollback 发布于2019-08-23 13:52 / 2425人阅读

摘要：添加键盘快捷键的方法提供了，可以通过它来添加触发中操作的快捷键。可以在内声明如下这意味着在用户按下指定按钮，会触发一个叫做的操作。在后台页面中，您可以通过将处理程序绑定到清单中定义的命令。

我们在上网时，常常需要把刚兴趣的文章记录下来，方便以后继续细看。如果记录为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，然后执行命令完成剪贴动作：

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

GPU云服务器云服务器 chrome-extension 第二个网站第二个域名备案第二个网站端口

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99714.html

# 编写第一个Chrome Extension

摘要：可以加载到内，通过操纵浏览器，从而完成一些定制的工作。一个最低需求的文件是必要的可选的图标等。如果这样验证都是如期望的话，就表明你的第一个扩展已经开发成功。正式发布可以在内发布扩展，只要点击进入后，按照操作指示即可。 Chrome Extension可以加载到Chrome内，通过操纵Chrome浏览器，从而完成一些定制的工作。假设你想要一个功能，它可以在你点击上下文菜单项目时剪贴当前...

joyqi 2019-08-23 13:50 评论0 收藏0
Chrome 扩展开发——编写一个自己的浏览器插件

摘要：配置文件每一个扩展都有一个格式的文件，叫。此消息发送后会触发扩展内每个页面的事件。和持续长时间的保持会话需要在和扩展建立一个长时间存在的通道。内容脚本发送消息到扩展程序建立通道，并给通道命名利用通道发送一条消息。这次的练习是做一个Chrome的扩展，分享一下入门开发过程。因为在消息传递那块纠结了特别久，所以我会重点总结消息传递那块。这次做这个插件的功能很简单，就是点击按钮后可以对当...

SunZhaopeng 2019-08-20 11:09 评论0 收藏0
【Chrome扩展开发】定制HTTP请求响应头域

摘要：关于我的博客掘金专栏路易斯专栏原文链接扩展开发定制请求响应头域本文共字，阅读需分钟。那么，我会放弃吗反向代理显然不会，既然问题出在上，我去掉就行了。然而无论多少次的学习和模仿，最终的目的还是为了使用，故开发一款定制请求的势在必行。本文首发于《程序员》杂志2017年第9、10、11期，下面的版本又经过进一步的修订。关于 Github：IHeader 我的博客：louis blog ...

MadPecker 2019-08-21 17:38 评论0 收藏0
编写爬虫的一些感想（就是高兴）

摘要：如果有人有兴趣的话，可以编写则个下面，我会说明在编写爬虫过程中的所思所想。文章读取完毕最后，还要再编写一个语句，判断是运行还是导入。文章结束前的一些话嗯，本文到这里就结束了。今天，根据网页的结构，尝试了下如何抓取煎蛋首页上的文章。目标很简单：根据首页上面的文章链接，载入文章，而后将文章的标题和正文（不带图片）抓取下来。抓取首页上面文章的链接，标题，作者和所属标签。按标题将文章...

inapt 2019-07-24 18:26 评论0 收藏0
实现一个简单的chrome插件

摘要：小结本文只是简单分享了如何开发一个简单的谷歌浏览器插件，以及一些注意事项，并且提到了如何授权和使用谷歌插件，重点介绍了插件开发必备的入口文件和插件中几个重要环境以及环境之间的通信。我们在上网的时候，都会用到浏览器，但是浏览器并非拥有我们想要的所有功能，我们可以根据自己的需要，实现自己的插件来满足需求。比如网页中经常会有大量的广告，如果你希望拥有一个纯净的网页，可以实现一个插件来删除网...

rubyshen 2019-08-23 13:58 评论0 收藏0