需求：

看到好的文章時，想收藏，但是chrome的收藏夾不支持搜索（雖然有其他插件可以用），收藏的多了以后不好找，而且萬一某一天瀏覽器或系統(tǒng)重裝，而沒有登錄同步數(shù)據(jù)或者沒有導(dǎo)出由的話這些收藏就會丟失。所以就打算將一些好文章收藏到我的個人博客：https://yao2san.com，即方便搜索，也不會丟失。

問題：

那既然要收藏一篇文章，肯定要獲取它的鏈接，可以直接復(fù)制瀏覽器的鏈接，在粘貼到我的博客，但是這樣效率太慢。所以就想用右鍵菜單的形式，一鍵收藏。

那現(xiàn)在主要需要解決以下問題：

1.怎么制作（或者說添加）chrome的右鍵菜單；

2.怎么把鏈接發(fā)送到我的博客。

分析：

要在chrome上添加右鍵菜單，有兩種方法：

1.屏蔽掉原有的菜單，用js生成一個新的右鍵菜單。但是這樣做就不能使用原有的功能了，不好。

2.制作———-插件，添加一個菜單。

我選的是第二種方式。

思路：

由于之前從未接觸過chrome插件開發(fā)，所以花了一個下午去百度理解插件的制作方法。這里簡單說一下思路和過程，至于關(guān)于插件的詳細(xì)內(nèi)容就不說了，因為自己也不怎么會，只是零時拿來用這一次。

首先chrome插件至少包含一下兩個文件：

1.manifest.json

2.xxx.js

manifest.json就是一個配置文件，配置了插件的名稱，插件所需引用的js腳本文件等等。

xxx.js就是需要的腳本，點擊菜單時需要什么功能就在這個文件里寫。

過程：

1.創(chuàng)建插件文件

隨便找個地方新建個文件夾，創(chuàng)建以下文件:

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必填，否則處于安全策略將無法請求外部地址。

因為需要使用到j(luò)query，所以還引入了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});

至此，這個簡單的插件就制作完了，以下是效果：

點擊“收藏到我的博客”后，會自動將當(dāng)前頁面的url發(fā)送到我的博客進(jìn)行解析。

完成，perfect！

總結(jié)

以上是生活随笔為你收集整理的chrome添加右键菜单收藏CSDN文章到我的博客的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。