稳住,今天是周六,补一篇文章。

很多时候确实,我们缺少的就是行动起来的勇气,就像我之前写的一篇文章:

干就完了!

今天就给大家分享一个从没接触,到可以跟大家在这吹逼的案例。

1 概述

我开发了一个让我轻松非常多的一个chrome插件。

我一直有类似的想法,但是苦于从未接触过 chrome 插件,内心充满抵触,直到我近期硬着头皮开始,没想到还是挺轻松的完成了。

这个插件就是:

玩Android网站chrome插件

这个插件有什么作用呢?

  1. 一键收藏站外文章;

  2. 一键分享文章;

以前我们分享文章需要这样:

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^)┛明天见!