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!

你可能感兴趣的:(开发笔记)