今天早晨，正在我因为是星期五发懒，不知道想做什么事的时候，收到了村长@ericet圈给我的一条回复。在[[Life]likeCoin 为什么不制作一个chrome 扩展程序？]( https://steem.buzz/hive-180932/@june0620/life-likecoin-chrome)里，@jun0621提出了一个非常有趣的想法。就是制作一个like Coin的Chrome扩展程序。用一个Chrome Extension，在所有的STEEM的结点上添加“啪啪啪”的小手。
一个挺好玩的程序。于是我打算做一个试试。
## 设计思路
要想制作这么一个能够在所有和STEEMIT有关的结点拍手的扩展程序，必须要让这个程序知道自己在1）STEEM的节点上；2）正在浏览的文章是一个有注册LikeCoin的用户。

1. 第一项非常简单，因为在Chrome扩展程序的manifest.json里面可以规定程序在哪些网站上运行。
1. 第二项稍微复杂一点。需要用一种方法搜取文章的作者，查询作者是不是已经注册了**Matters**。<br />文章的作者可以从网址中截取。举一个例子：@huaren.news的文章[武汉肺炎多国蔓延，该指责还是该合作？世界欠中国/武汉一份感谢！](https://steem.buzz/hive-180932/@huaren.news/48spug)在不同的节点上的网址是：
   1. https://staging.busy.org/@huaren.news/48spug
   1. https://steem.buzz/hive-180932/@huaren.news/48spug
   1. https://steempeak.com/@huaren.news/48spug
   1. https://steemit.com/hive-180932/@huaren.news/48spug

   <br />仔细观察的话，不难发现，每个网址后半段都是`@huaren.news/48spug`。如果程序在`/`之间切开整条网址的话，倒数第二段便是`@huaren.news`。如果我们观察非发表的文章的网址，比如说SteemCN社区（[https://steemit.com/trending/hive-180932](https://steemit.com/trending/hive-180932)），这个网址中，没有@用户。我们可以利用这一特点从网址中筛选当前的网页是否是一片**STEEM**上的文章，并且得到作者的用户ID。
1. 我们还要找出所有已经申请**Matters**的用户。<br />
![](https://cdn.steemitimages.com/DQmTnNxxuY59ZExwNH6XYW3B6wrijhSCsTitSamYiJTXy5A/image.png)
<br />    上面一张截图中是我问村长**SteemCN**是怎么记录**Matters**用户的对话。看来只要我把@cn-likers关注的名单调出来就知道所有**Matters**用户了。我在[STEEM编程练习记录 二](https://steem.buzz/hive-180932/@lnakuma/6kfw6y-steem)介绍过如何利用***SteemJs***的API搜索follower和following名单。在回复中村长@erice还贴了他原来写过的follower的程序。由于他的代码比我的更加完整。我借用了他的代码，并改成搜索following的名单。
1. 第四步是寻找当前文章用户的***LikerId***。我在写程序的时候，忽略了这一点。正巧我借用来测试的@windowglass的[【职场碎碎念】辞职](https://steem.buzz/hive-180932/@windowglass/jjsdk)，@windowglass和***LikerId***和***SteemId***是相同的。所以我在push我的commit到github上，再测试cn-fund的时候才发现找不到正确的***LikerId***。<br />
![](https://cdn.steemitimages.com/DQmdyFPyuxHqkxWKqxopasmzNq4G6uLHNoV6naKVx157nkB/image.png)
<br />我在[STEEM编程练习记录 一](https://steem.buzz/hive-180932/@lnakuma/steem)介绍过如果搜索**STEEM**用户信息。在第二步通过网址截取用户ID之后，可以先用用户ID搜索用户信息，从中获得用户*Location*里面*LikerId:xxx*的数值。
5. 第五步也是在push commit之后发现的。就是更换网址之后，Chrome扩展程序里面的网址和用户***LikerId***并没有更改。我需要在更换网址的时候，触发扩展程序里面的存储的数值的更新。<br />本来想利用Chrome Extension里面的***content.js***和***background.js***利用Chrome自己的API做触发。但是由于想在半天内写出一个Beta版本供大家啪啪啪，所以我选择了一条更简单粗暴的方法：就是设置一个无限循环的程序环，每个200毫秒自动检查一下当前的网址是否和上一次检查时是不同的网址，如果有变化，则从新更新一遍数据。


## 编写程序
manifest.json是Chrome扩展程序的清单文件。里面记载着扩展程序的版本，导入的其它JavaScript库，注入的配置文件等等。
```
{
  "manifest_version": 2,
  "name": "Liker Clap Extension",
  "description": "This extension will add a Matters Likr Clap Button",
  "version": "0.1",
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "content_scripts": [
    {
      "matches": [
        "*://*.busy.org/*",
        "*://*.steem.buzz/*",
        "*://*.steemit.com/*",
        "*://*.steempeak.com/*"
      ],
      "js": [
        "steem.js",
        "liker.js"
      ]
    }
  ],
  "permissions": [
    "tabs"
  ]
}
```
<br />上段代码就是本程序的manifest.json。其中**content_scripts**里面规定了，在哪些网站上，这个扩展程序可以运行（**matches**）和运行哪些**JavaScript**的library（***steem.js***和***liker.js***）。
由于Chrome扩展程序不能调用CDN上面的程序库，我想[STEEM API]( https://cdn.jsdelivr.net/npm/steem/dist/steem.min.js)下载下来，放到了程序本地的目录下（***steem.js***）。
必须要主意程序库的排列顺序。***liker.js***里面要调取***steem.js***里面的变量***steem***，所以***steem.js***必须在***liker.js***的前面。

```js
var url = window.location.href;
const button = document.createElement("div");
const css = document.createElement("style");
var href = url.split("/");
var steemId = href[href.length-2];
//steem.api.setOptions({ url: "https://anyx.io" });

const getFollowing = (start = 0, limit = 1000, following = []) => {
  return new Promise((resolve, reject) => {
    steem.api.getFollowing("cn-likers", start, 'blog', limit, async function (err, result) {
      if (result.length > 1) {
        let newResult = [];
        result.forEach(following => {
            if (following.follower != start) {
                newResult.push(following.following);
            }
        });
        following = [...following, ...newResult];
        let followingList = [];
        for (let i in newResult) {
            followingList.push(newResult[i].following);
        }
        getFollowing(result[result.length - 1].following, limit, following)
        .then(resolve)
        .catch(reject);
      } else {
        resolve(following);
      }
    });
  });
}

const getLikerId = (profile) => {
  const location = profile.location;
  console.log(location)
  if(typeof location !=="undefined" && location !== "") {
    const loc = location.split(":");
    if( loc[0] === "likerid" ) { return loc[1]; }
    else { return false; }
  }
  else { return false; }
}

const isLiker = (steemId, following) => {
  let flag = false;
  if(steemId.startsWith("@")) {
    const id = steemId.substr(1);
    for(let i = 0; i < following.length; i++) {
      if(id === following[i]) {
        flag = true;
        break;
      }
    }
    if(flag) { return id; }
    else { return false; }
  }
  else{ return false; }
}

async function createLikerButton(url, steemId) {
  let following = await getFollowing();
  //url = encodeURIComponent(url);
  steemId = isLiker(steemId, following);
  console.log(url);
  console.log(steemId);
  if(steemId) {
    steem.api.getAccounts([steemId], function(err, result) {
      if(err === null) {
        const data = result[0];
        const profile = JSON.parse(data.json_metadata);
        const likerId = getLikerId(profile.profile);
        if(likerId) {
          const src = `https://button.like.co/in/embed/${likerId}/button?referrer=${url}`;
          //console.log(src);
          const iframe = document.createElement("iframe");
          iframe.setAttribute("src", src);
          iframe.setAttribute("frameborder", 0);
          iframe.setAttribute("scrolling", 0);
          iframe.setAttribute("target", "_top");
          button.appendChild(iframe);
        }
      }
      else{
        console.log(err);
      }
    });
  }
  else{
    console.log("Not a registered Liker");
  }
}

css.innerHTML = `
.likecoin-button {
  bottom: 20px;
  position: fixed;
  right: 20px;
  height: 240px;
  width: 500px;
  overflow: hidden;
  z-index: 2000
}
.likecoin-button > div {
  padding-top: 49.48454%;
}
.likecoin-button > iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -ms-zoom: 0.75;
        -moz-transform: scale(0.75);
        -moz-transform-origin: 0 0;
        -o-transform: scale(0.75);
        -o-transform-origin: 0 0;
        -webkit-transform: scale(0.75);
        -webkit-transform-origin: 0 0;
}
`;
document.body.appendChild(css);
button.className = "likecoin-embed likecoin-button";
document.body.appendChild(button);


createLikerButton(url, steemId);
window.setInterval(function() {
  let tempurl = window.location.href;
  if(tempurl !== url) {
    button.textContent = "";
    url = tempurl;
    href = url.split("/");
    steemId = href[href.length-2];
    createLikerButton(url, steemId);
  }
}, 1000);
```
`liker.js`是本程序的主心骨。程序一开始先记录当前的网址，生成啪啪啪按键的iFrame。搜取用户的***SteemId***。

我在测试中，可能是调用API太频繁了，惹得[https://anyx.io](https://anyx.io)生气把我给block掉了。对于我来说，用steem默认得结点没有任何问题。但是对于墙内的朋友，估计还得使用[https://anyx.io](https://anyx.io)这样的结点支持。使用的方法是uncommon第六行（去掉`//`）

1. `getFollowing`方程在原来的文章里面讲过，是用来搜索所有@cn-likers关注的名单。
1. `getLikerId`的用处是搜索当前文章的作者是否在自己的*Location*里面填写了自己的***LikerId***。
1. `isLiker`是用来过滤非发表的文章的网页。上面介绍多，所有文章的网址里面都用`@用户`，只要我们将网址切开，倒数第二段里面是以`@`开头的网址，就都是文章。
1. `createLikerButton`则是将所有前面的方程都连接起来。先收录所有@cn-likers关注的用户的名单；再搜索当前网页是否是一篇文章，如果是的话，则截取文章的作者；搜索作者的用户资料并检查是否记录了***LikerId***。如果拥有***LikerId***的话，则在网页上加上一个啪啪啪按键。上面提到的@huaren.news就没有注册***Matters***，所以文章上就没有出现LikeCoin的按键。

## 扩展程序使用效果

![](https://cdn.steemitimages.com/DQmfPDzztGaSFqP97x5WAGkiwDuFNtLDshpyDqrxQNKGRYj/image.png)
*在[https://steemit.com](https://steemit.com)上*

![](https://cdn.steemitimages.com/DQmUkupJzhQBYLeQjZm6wmCy511xDsPu1ubrGAfYf23m27c/image.png)
*在[https://steempeak.com/](https://steempeak.com/)上*

![](https://cdn.steemitimages.com/DQmTKdrHyPgHqJddSHJYusKg95tLkKPdRkGf4uF2sCV1Sok/image.png)
*在[https://staging.busy.org](https://staging.busy.org/)上*

![Screenshot_20200228_135153_com.oice.jpg](https://cdn.steemitimages.com/DQmcfamjUSTtsr4DNQvz1pCABtGNJFGzDBWh3vQFrgx8Yba/Screenshot_20200228_135153_com.oice.jpg)
*啪啪啪之后，在***Liker Land***上可以看到Busy，Steemit的啪啪啪。

----

## 以后还可以做什么

我曾经听过一句形容完成程序开发的话：“没有完成开发的程序，只有不想再继续做下去的程序。”那么，这个我们还能再在这个程序上添加些什么呢？

1. 可以建设访问@cn-likers关注名单的次数。前面提到了[https://anyx.io](https://anyx.io)暂时性限制了我访问他们API的权限。我们在第一次搜索@cn-likers关注名单之后，将名单存储下来，在规定的时间内不再访问***Steem API***结点。
1. 提供***Steem API***的结点服务器很多，可以适当轮换当前使用的结点，这样可以减少过多使用同一个结点的频率。
1. 加一个on/off开关。在不想使用Chrome Extension的时候，将其关掉。

## 安装Chrome扩展程序

我已经把扩展程序存在Github和码云上面。
1. Github: https://github.com/xiangstan/likecoin-extension
1. 码云: https://gitee.com/xiangstan/likecoin-extension

登陆不了Github的可以去码云下载。

代码资料库里面有介绍如何将扩展程序安装到自己的浏览器上（如图）。

![](https://cdn.steemitimages.com/DQmSbyCZ173EuZBDUYMDFmcxEi881jSZdgKbVVTaRnrjyeW/image.png)

-----

## 感谢

1. 设计啪啪啪按键得到了https://github.com/likecoin/likecoin-button-sdk的启发。其中CSS Style也是根据likecoin-button-sdk里面JavaScript的代码改编的。
1. 村长@ericet的getFollowers代码
1. **特别感谢，压轴的重头戏。扩展程序在浏览器里面的图标是女友当年练习Illustrator的时候设计的。别人都可以不感谢，这个必须感谢……**