chrome添加右键菜单收藏CSDN文章到我的博客

需求：

看到好的文章时，想收藏，但是chrome的收藏夹不支持搜索（虽然有其他插件可以用），收藏的多了以后不好找，而且万一某一天浏览器或系统重装，而没有登录同步数据或者没有导出由的话这些收藏就会丢失。所以就打算将一些好文章收藏到我的个人博客：https://yao2san.com，即方便搜索，也不会丢失。

问题：

那既然要收藏一篇文章，肯定要获取它的链接，可以直接复制浏览器的链接，在粘贴到我的博客，但是这样效率太慢。所以就想用右键菜单的形式，一键收藏。

那现在主要需要解决以下问题：

1.怎么制作（或者说添加）chrome的右键菜单；

2.怎么把链接发送到我的博客。

分析：

要在chrome上添加右键菜单，有两种方法：

1.屏蔽掉原有的菜单，用js生成一个新的右键菜单。但是这样做就不能使用原有的功能了，不好。

2.制作———-插件，添加一个菜单。

我选的是第二种方式。

思路：

由于之前从未接触过chrome插件开发，所以花了一个下午去百度理解插件的制作方法。这里简单说一下思路和过程，至于关于插件的详细内容就不说了，因为自己也不怎么会，只是零时拿来用这一次。

首先chrome插件至少包含一下两个文件：

1.manifest.json

2.xxx.js

manifest.json就是一个配置文件，配置了插件的名称，插件所需引用的js脚本文件等等。

xxx.js就是需要的脚本，点击菜单时需要什么功能就在这个文件里写。

过程：

1.创建插件文件

随便找个地方新建个文件夹，创建以下文件:

manifest.json

menu.js

manifest.json：

    { 
    "name": "博客右键菜单", 
    "description": "博客右键菜单", 
    "version": "0.1", 
    "permissions": ["contextMenus", "tabs"], 
    "background":{
    "scripts": ["menu.js","jquery-3.2.1.js"] 
    },
    "manifest_version": 2 ,   
     "content_security_policy": "script-src 'self' 'unsafe-eval' 请求地址 importOneFromCSDN; object-src 'self'"
    }

其中content_security_policy必填，否则处于安全策略将无法请求外部地址。

因为需要使用到jquery，所以还引入了jQuery

menu.js：

    function importMyBlog(info, tab) {
        var reqUrl = '请求地址';
        var pageUrl = tab.url;
        if(pageUrl.indexOf('https://blog.csdn.net/')!==0){
            alert('仅限收藏CSDN的文章');
            return;
        }
        var reqData = {};
        reqData.url =  pageUrl;
        $.ajax({
           url:reqUrl,
           type:'post',
           dataType:'jsonp',
           data:reqData,
           jsonpCallback:'jsonpcallback',
           success:function(data){
               var res = JSON.parse(JSON.stringify(data));
               if(res.success){
                   alert('保存成功') 
               }else{
                   alert(res.msg);  
               }
           },
           error:function(data){
               alert('error: 估计是没登录');
           }
       })
    }
    chrome.contextMenus.create({
        "title": "收藏到我的博客",
        "contexts":["page"],//page表示在整个页面右键都会有自定义的菜单
        "onclick":importMyBlog
        }); 

至此，这个简单的插件就制作完了，以下是效果：

点击“收藏到我的博客”后，会自动将当前页面的url发送到我的博客进行解析。

完成，perfect！