小赖子的英国生活和资讯

教程: 怎么样写 Chrome 书签程序?

JustYY.com 小赖子的英国生活和资讯
阅读 桌面完整版

您将学到什么?

Chrome 浏览器支持添加书签, 通过这个教程您将:

需求

Chrome 浏览器支持添加书签, 通过这个教程您将:

难度

中等偏易

教程

您可以通过以下步骤打开 书签显示:

书签可以是网址, 也可以是Javascript 小程序. 添加一个书签, 您需要:

add-new-bookmark

然后在弹出的添加书签窗口, 输入书签名称和内容, 如果是Javascript小程序则代码需要以 javascript: 开始.

比如, 以下会添加一个名叫 test 的书签, 并且, 如果你点击它, 它会导到我的 SteemIt 页面

sample-bookmark-chrome-javascript

获取能量和等级的书签程序

了这个例子, 我写了两个API

以下API会获取指定用户的SteemIt等级:

https://helloacm.com/api/steemit/account/reputation/?id=justyy

以下API会获取指定用户的SteemIt能量(Voting Power):

https://helloacm.com/api/steemit/account/vp/?id=justyy

接下来就是设计了, 当我们第一次运行这个书签, 程序会让我们输入ID, 然后书签就会记住了. 这可以通过 Chrome 的 localStorage 对象. 当有了这个ID 我们就可以通过API依次获取我们需要的数据.

第一部分的代码为: 

1
2
3
4
5

var steem_id = localStorage.getItem("steem_id");
if (steem_id == null) {
    steem_id = prompt("Please enter your SteemId"); 
    localStorage.setItem("steem_id", steem_id);
}
var steem_id = localStorage.getItem("steem_id");
if (steem_id == null) {
    steem_id = prompt("Please enter your SteemId"); 
    localStorage.setItem("steem_id", steem_id);
}

然后, 我们可以通过 fetch 和 then (Javascript Promises) 把事件串联起来. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

if (steem_id != null) {
    fetch('https://helloacm.com/api/steemit/account/reputation/?id=' + steem_id, {mode: 'cors'})
    .then(validateResponse)
    .then(readResponseAsJSON)
    .then(function(rep) {
        fetch('https://helloacm.com/api/steemit/account/vp/?id=' + steem_id, {mode: 'cors'})
        .then(validateResponse)
        .then(readResponseAsJSON)
        .then(function(vp) {
            var msg = "ID: " + steem_id + "\n" + 
                      "Reputation: " + rep + "\n" +
                      "Voting Power: " + vp;
            alert(msg);
        })
    })
}
if (steem_id != null) {
    fetch('https://helloacm.com/api/steemit/account/reputation/?id=' + steem_id, {mode: 'cors'})
    .then(validateResponse)
    .then(readResponseAsJSON)
    .then(function(rep) {
        fetch('https://helloacm.com/api/steemit/account/vp/?id=' + steem_id, {mode: 'cors'})
        .then(validateResponse)
        .then(readResponseAsJSON)
        .then(function(vp) {
            var msg = "ID: " + steem_id + "\n" + 
                      "Reputation: " + rep + "\n" +
                      "Voting Power: " + vp;
            alert(msg);
        })
    })
}

validateResponse 函数用于检查API是否返回正确. 

1
2
3
4
5
6

function validateResponse(response) {
  if (!response.ok) {
    throw Error(response.statusText);
  }
  return response;
}
function validateResponse(response) {
  if (!response.ok) {
    throw Error(response.statusText);
  }
  return response;
}

readResponseAsJSON把数据转换成JSON格式. 

1
2
3

function readResponseAsJSON(response) {
  return response.json();
}
function readResponseAsJSON(response) {
  return response.json();
}

然后, 您只需要把整段JAVASCRIPT代码(记得在最开始添加javascript:)拷贝到书签内容即可.

edit-bookmark-js-chrome

来, 测试一下(第一次会要求输入ID):

utopian-asks-for-steem-id

然后, 只需要点击一次就可以获得能量和等级.

utopian-says-reputation-voting-power-steemit

整段代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

javascript:
var steem_id = localStorage.getItem("steem_id");
if (steem_id == null) {
    steem_id = prompt("Please enter your SteemId"); 
    localStorage.setItem("steem_id", steem_id);
}
 
function readResponseAsJSON(response) {
  return response.json();
}
 
function validateResponse(response) {
  if (!response.ok) {
    throw Error(response.statusText);
  }
  return response;
}
 
if (steem_id != null) {
    fetch('https://helloacm.com/api/steemit/account/reputation/?id=' + steem_id, {mode: 'cors'})
    .then(validateResponse)
    .then(readResponseAsJSON)
    .then(function(rep) {
        fetch('https://helloacm.com/api/steemit/account/vp/?id=' + steem_id, {mode: 'cors'})
        .then(validateResponse)
        .then(readResponseAsJSON)
        .then(function(vp) {
            var msg = "ID: " + steem_id + "\n" + 
                      "Reputation: " + rep + "\n" +
                      "Voting Power: " + vp;
            alert(msg);
        })
    })
}
javascript:
var steem_id = localStorage.getItem("steem_id");
if (steem_id == null) {
    steem_id = prompt("Please enter your SteemId"); 
    localStorage.setItem("steem_id", steem_id);
}

function readResponseAsJSON(response) {
  return response.json();
}

function validateResponse(response) {
  if (!response.ok) {
    throw Error(response.statusText);
  }
  return response;
}

if (steem_id != null) {
    fetch('https://helloacm.com/api/steemit/account/reputation/?id=' + steem_id, {mode: 'cors'})
    .then(validateResponse)
    .then(readResponseAsJSON)
    .then(function(rep) {
        fetch('https://helloacm.com/api/steemit/account/vp/?id=' + steem_id, {mode: 'cors'})
        .then(validateResponse)
        .then(readResponseAsJSON)
        .then(function(vp) {
            var msg = "ID: " + steem_id + "\n" + 
                      "Reputation: " + rep + "\n" +
                      "Voting Power: " + vp;
            alert(msg);
        })
    })
}

英文: How to Write Chrome Bookmark Scripts? – Step by Step Tutorial with a SteemIt Example

强烈推荐

微信公众号: 小赖子的英国生活和资讯 JustYYUK

阅读 桌面完整版

相关文章：

  1. 测测你的幸运 – Linux Fortune-Teller 阅读 桌面完整版 LINUX 下有很好很好玩的命令,之前已经介绍过: figlet, rig, curl. 现在推荐另一个 命令 fortune 是用来随机显示一段(句)话的.fortune 在英文里就是幸运的意思. 这个命令可以不需要 参数 如果没有...
  2. HPZ800服务器主板太老不支持超过2TB的大硬盘 阅读 桌面完整版 我家里一直用的是HPZ800服务器, 很吵, 很老, 虽然这台服务器已经有十年之久(我在EBAY上买来用了五年多了), 但是即使放到今天, 这服务器速度依旧很快, 很稳定. 由于服务器用的是ECC较验内存, 所以基本上不重启关机. HPZ800主机有两个硬核CPU – 因特志强 X5650...
  3. 给孩子零花钱培养孩子正确的金钱观价值观 阅读 桌面完整版 两个娃已经不知不觉7岁8岁了. 媳妇和我商量一下决定给孩子每人每周5英镑的零花钱(Pocket Money). 这样他们慢慢的就有自己的小积蓄备将来不时之需: 比如朋友聚会生日啥的需要准备礼物. 同时, 我们决定不再给孩子买零食(薯片啥的). 孩子一天好几餐, 晚上睡觉前还得吃零食, 我们就多买了很多水果面包, 健康的食物多吃一些总不是啥坏事. 孩子可以用这些零钱买自己想要的东西, 我们也不再过问....
  4. 新的旅途 – 离别总是伤感的, 离开了一起创业的公司 阅读 桌面完整版 2周前, 正式离开了一起创业的公司, 这公司是我博士毕业后的第一份正式工作, 待了8年多了, 离别总是伤感的. 我是9月初提的离职, 三个月 Notice Period, 最后的几周交接完工作确实没有什么压力了. 11月30号, 在公司最后一天, 公司有个习惯,...
  5. 你给SteemIt中文微信群拖后腿了么? 阅读 桌面完整版 这年头不缺算法, 就缺数据. 这两天花了很多时间在整API上, 整完之后自己用了一下还觉得真是挺方便的. 今天就突然想看一看自己是否给大家拖后腿了, 于是调用每日中文区微信群排行榜单的API, 刷刷拿着 NodeJs 练手: 1 2 3 4...
  6. [坑爹的代码] – 变量未使用 阅读 桌面完整版 工作中代码审核是非常重要的, 我觉得有时候分享这些坑是件很有意义的事情. 有一次, 有一个PR(代码提交)被2个工程师成功审核了, 但是之后发现那个PR带了一些不该带的改动,结果就是那两个评审被惩罚带些吃的(甜甜圈)给大家分享. 每次你都很小心, 生怕把功能给改错了(即使有少量的单元测试,但是你还是不放心), 后来你发现,这代码绝B是个坑,浪费了你大好的时间,结果这变量声明了根本就没有用到.. 很奇怪的是, 像 Resharper这样的代码质量工具竟然没有把无用的代码给标灰… 英文: –...
  7. RMB人民币数字转大写汉字 – Javascript工具 阅读 桌面完整版 Javascript工具RMB人民币数字转大写汉字 源码: https://justyy.com/js/atoc.js 最多只能计算15位, 小数点支持2位(毛和分). 最后一位分为0时, 需要加上’整’. 而且还需要在万亿,亿,万,元位等关键位0的位置写上’零’. 例如: 325.04 写成人民币 ‘叁佰贰拾伍元零肆分’ 人民币金额用到的中文大写汉字如下:...
  8. Minuet in C – 小步舞曲C 阅读 桌面完整版 Posted Youtube – 油管地址 孩子弹琴的时候最帅了. 我现在成了我儿子的粉丝了. Eric (Aged 6) is playing “Minuet in...
Exit mobile version