今天早晨，正在我因为是星期五发懒，不知道想做什么事的时候，收到了村长
一个挺好玩的程序。于是我打算做一个试试。
要想制作这么一个能够在所有和STEEMIT有关的结点拍手的扩展程序，必须要让这个程序知道自己在1）STEEM的节点上；2）正在浏览的文章是一个有注册LikeCoin的用户。
第一项非常简单，因为在Chrome扩展程序的manifest.json里面可以规定程序在哪些网站上运行。
第二项稍微复杂一点。需要用一种方法搜取文章的作者，查询作者是不是已经注册了Matters。
文章的作者可以从网址中截取。举一个例子：
仔细观察的话，不难发现，每个网址后半段都是@huaren.news/48spug。如果程序在/之间切开整条网址的话，倒数第二段便是@huaren.news。如果我们观察非发表的文章的网址，比如说SteemCN社区（https://steemit.com/trending/hive-180932），这个网址中，没有@用户。我们可以利用这一特点从网址中筛选当前的网页是否是一片STEEM上的文章，并且得到作者的用户ID。
我们还要找出所有已经申请Matters的用户。
上面一张截图中是我问村长SteemCN是怎么记录Matters用户的对话。看来只要我把
第四步是寻找当前文章用户的LikerId。我在写程序的时候，忽略了这一点。正巧我借用来测试的
我在STEEM编程练习记录 一介绍过如果搜索STEEM用户信息。在第二步通过网址截取用户ID之后，可以先用用户ID搜索用户信息，从中获得用户Location里面LikerId:xxx的数值。
第五步也是在push commit之后发现的。就是更换网址之后，Chrome扩展程序里面的网址和用户LikerId并没有更改。我需要在更换网址的时候，触发扩展程序里面的存储的数值的更新。
本来想利用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"
]
}
上段代码就是本程序的manifest.json。其中content_scripts里面规定了，在哪些网站上，这个扩展程序可以运行（matches）和运行哪些JavaScript的library（steem.js和liker.js）。
由于Chrome扩展程序不能调用CDN上面的程序库，我想STEEM API下载下来，放到了程序本地的目录下（steem.js）。
必须要主意程序库的排列顺序。liker.js里面要调取steem.js里面的变量steem，所以steem.js必须在liker.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生气把我给block掉了。对于我来说，用steem默认得结点没有任何问题。但是对于墙内的朋友，估计还得使用https://anyx.io这样的结点支持。使用的方法是uncommon第六行（去掉//）
getFollowing方程在原来的文章里面讲过，是用来搜索所有@cn-likers关注的名单。getLikerId的用处是搜索当前文章的作者是否在自己的Location里面填写了自己的LikerId。isLiker是用来过滤非发表的文章的网页。上面介绍多，所有文章的网址里面都用@用户，只要我们将网址切开，倒数第二段里面是以@开头的网址，就都是文章。createLikerButton则是将所有前面的方程都连接起来。先收录所有@cn-likers关注的用户的名单；再搜索当前网页是否是一篇文章，如果是的话，则截取文章的作者；搜索作者的用户资料并检查是否记录了LikerId。如果拥有LikerId的话，则在网页上加上一个啪啪啪按键。上面提到的@huaren.news就没有注册Matters，所以文章上就没有出现LikeCoin的按键。
啪啪啪之后，在Liker Land*上可以看到Busy，Steemit的啪啪啪。
我曾经听过一句形容完成程序开发的话：“没有完成开发的程序，只有不想再继续做下去的程序。”那么，这个我们还能再在这个程序上添加些什么呢？
@cn-likers关注名单的次数。前面提到了https://anyx.io暂时性限制了我访问他们API的权限。我们在第一次搜索@cn-likers关注名单之后，将名单存储下来，在规定的时间内不再访问Steem API结点。我已经把扩展程序存在Github和码云上面。
登陆不了Github的可以去码云下载。
代码资料库里面有介绍如何将扩展程序安装到自己的浏览器上（如图）。
@ericet的getFollowers代码