稳住，今天是周六，补一篇文章。
很多时候确实，我们缺少的就是行动起来的勇气，就像我之前写的一篇文章：
干就完了！
今天就给大家分享一个从没接触，到可以跟大家在这吹逼的案例。
1 概述
我开发了一个让我轻松非常多的一个chrome插件。
我一直有类似的想法，但是苦于从未接触过 chrome 插件，内心充满抵触，直到我近期硬着头皮开始，没想到还是挺轻松的完成了。
这个插件就是：
玩Android网站chrome插件
这个插件有什么作用呢？
-
一键收藏站外文章；
- 一键分享文章；
以前我们分享文章需要这样：
1. 打开分享界面
2. 然后 copy 文章的标题，链接，点击分享。
分享一篇还好，像我每天需要更新大量文章，简直了...
现在不同了，有了这个插件，我们只需在日常看文章过程中，发现不错的文章，顺手点击一下即可。
这样我就完成了文章的分享和收藏了：
以前我经常开启多个 tab 页，但是暂时又没时间消化，每次电脑内存不足的时候都在纠结要不要关掉。
现在终于不用纠结了，点击一下插件里面的“一键收藏”，玩 Android 的收藏 tab 会帮我把这些文章都记录下来。
然后配合App，上下班地铁上看即可。
当然我不仅仅是来吹逼的，接下来就是一波：
开源 -> 介绍 -> 如何实现三步走！
2 开源地址
还记得，前两周我还给大家分享了一波 chrome 插件：
走心推荐几个必备的插件
没想到这么快，我都可以介绍自己写的插件了。
插件我已经放到 github 上了。
https://github.com/hongyangAndroid/wanandroid
3 插件安装
插件安装其实很简单，但是我还是决定写一个非常详细的介绍。
1. 下载插件
你可以从 github 上下载，先把 github 上项目下载下来：
git clone https://github.com/hongyangAndroid/wanandroid.git
2. 打开 chrome 的设置界面
3. 点击扩展程序
4. 点击加载已解压的扩展程序
首先点击右上角的开发者模式，打开。
否则看不到下面这几个按钮哈。
注意：打开之后，刷新一下当前界面。
然后点击，加载已解压的扩展程序：
选择文件夹，到如图所示位置：
点击确定，就可以在 chrome 上看到插件图标啦。
然后遇到你想收藏的或者想分享的，点点插件在 chrome 上的图标就可以啦。
注意很多时候我们可以直接装 crx 的插件包，但是我这个没有上线 chrome 商店，会被警告不安全，然后直接禁用了...我看上线步骤太麻烦了，不准备尝试了，所以如果还是建议加载插件文件夹。
4 插件实现
源码就这么点文件，核心就是这个manifest.json
里面的大多数配置都是简单的配置，唯独要关注的就是这个 popup.html
你可以理解为，点击插件图标的时候，就是弹出了这个 html 页面
然后我们就写在这个页面写 js，css 就好了。
我已经觉得大家都会了...
不过为了保证完整性，我们继续。
这个页面也很简单：
<head>
<script src="jquery-1.8.3.js"></script>
<script src="popup.js"></script>
</head>
<body>
<div class="normal_text">
<label>标题：</label><input name="title" type="text"/>
</div>
<div class="normal_text">
<label>链接：</label><input name="link" type="text"/>
</div>
<div class="normal_btn">
<button id="publish">一键分享</button>
<button id="collect">一键收藏</button>
</div>
<div id="alertMsg"></div>
</body>
</html>
页面里面我们引入了一个 popup.js，其实内部就是拿到这两个按钮，设置一下点击事件，然后通过 ajax 给我们的 wanandroid 服务器发个请求就完了。
document.addEventListener('DOMContentLoaded', function() {
var queryInfo = {
active: true,
currentWindow: true
};
chrome.tabs.query(queryInfo, function(tabs) {
var tab = tabs[0];
var url = tab.url;
var title = tab.title;
$('input[name="title"').val(title);
$('input[name="link"').val(url);
$("#collect").click(function(){
$.ajax({
url: "https://www.wanandroid.com/lg/collect/add/json",
type:"post",
data:{
title: $('input[name="title"').val(),
link: $('input[name="link"').val()
},
success: function (results) {
},
error:function(){
}
});
});
});
没错，就是这么简单。
几十行代码，就能完成一个对我效率大幅度提升的插件，堪称神器！
源码地址：
https://github.com/hongyangAndroid/wanandroid
好了，知道大多数人不会用这个插件，不过我还是要说几句：
希望通过本文，你了解到了 chrome 插件开发原来这么简单，以后看到一个好用的插件，你就可以脑补其内部实现了，脑补阶段也是成长的过程中，俗话说内行看门道。
如果有一天想做一个，干就完了！
大家周末愉快，加班的小伙伴抱一个~
推荐阅读：
Android Studio 还能这么玩？我也是服
终于找到一篇极佳的 NDK 入门文章
都9102年了，Android 冷启动优化除了老三样还有哪些新招？
扫一扫 关注我的公众号
如果你想要跟大家分享你的文章，欢迎投稿~
┏(＾0＾)┛明天见！
