好吧,这是有关如何在 42 分钟之内超高速上手 crx 插件开发的一个不怎么靠谱的手册;-)
概述
- 私人体验,分享感触, 完全 Zoom.Quiet 个人编撰...
工程
- 仓库: https://github.com/lb-crx/chaos2crx
- 发布: http://chaos2crx.RTFD.org
- 图书 : OBP流程 / OBP参与
TODO
- 根据读者的怒吼进行温和的修订
- 根据个人项目的深入增补
先得声明,要想真正在 42 分钟 内进入 crx 玩起来,不是没有前提的,,,
至少:
然后,还是想继续这遭没谱乱入的话 ;-)
Warning
一切开始前,先必须 相信 !
嗯嗯嗯?! crx 是什么? 为毛俺要学习开发这货?
如此剧烈的变化,就在36个月完成了反复逆转！这就是!
Chrome , 来自 Google 公司的神奇浏览器
Chromium所以,相信 Chromium 将在 浏览器战争 中保持不败! 只要掌握了 crx 的开发,就能进入浏览器扩展的主流市场!
...
仅仅是因为以前的 DHTML 体验,就认定 JS 是前端的命! 基本很难相信了 - 不相信,那么任何乱入行为,都会被自个儿否决 - 那真心没招了,,, 说明, JavaScript 不是你的那份儿菜,甭忙了,继续 C++/JAVA/.NET 吧,,,
只要明确一些 JavaScript 的`基本形式` 80% 的实际编程就可以混进去了 !-) :
严正推荐: JavaScript - MDN - 组织良好的所有相关资料!
中文的推荐: - JavaScript 教程 - JavaScript 参考教程
// 单行注释
/*
多行
注释
*/
var a="hollo"
var b= 1
b++ // 自增运算,此时 b 为2
b-- // 自减运算,此时 b 为1
var c = b+a //字串连接,连接数字会自动转换类型
if (1 != c){} // 不等于
console.log("Yes")
// 不论前台还是后台开发,都不建议使用 alert() 进行调试输出了,,
}else{
console.log("No")
}
for (i = 1; i < 10; i++){
console.log("hollo:"+i)
}
// 分类判定
switch (parseInt(score / 10)) {
case 0:
case 1:
case 2:
case 3:
case 4:
case 5:
result = '不及格';
break;
case 6:
case 7:
result = '通过';
break;
case 8:
result = '良好';
break;
case 9:
result = '优秀';
break;
default:
if (score == 100)
result = '非常优秀';
else
result = '囧';
}
function d(e,f){
return e*f
}
基本数据
- 数字,字串,布尔 基本和其它脚本语言类同
- NaN, null ~ 空值
全局方法
- eval() ~ 将给入的字串,尝试执行
- isFinite(),`isNaN()` 是否有限和空
- parseInt(),`parseFloat()`,`toString()` 进行类型转换
- escape(), unescape() 对 url 进行编码和相反,,
基本对象
- Number 数字
- String 字串
- Array 数组
- Math 数学
- Date 日期
各自包含一堆内置的各种常用处理操作.
然后,一般教程,会进行复杂的文档对象(Dom) 的说明,,, - 这是特指 html 文档对象的操作
先通过最简单的插件,整起来,直觉的体验 crx 扩展开发的宏观流程先!
著名的 hello world 是一定要整的,,,
那么在 猎豹浏览器 进行 crx 开发,有个比官网更加简单的例子,
来自: 魔方飛Young 的 第一次做插件就献给了猎豹浏览器，一个简单的插件！（绝对原创） - 扩展插件区 - 猎豹浏览器官方论坛
先开个目录,就叫: halloworldliebao
然后用任意文本编辑器,创立文件: manifest.json 内容如下
{
"name": "Hallo World猎豹浏览器",
"version": "1.0",
"description": "魔方飛Young的第一个猎豹浏览器插件，还不错吧！",
"browser_action": {
"default_icon": "icon.gif",
"popup": "popup.html"
}
}
好了准备工作完成! 正式开展编程!
插图.0-2 打开”开发人员模式”
插图.0-3 点击图标时报错
<p>Hello,World!</p>
<p><a href="http://www.liebao.cn/" target="_blank">猎豹官网</a>
<p><a href="http://bbs.liebao.cn" target="_blank">猎豹论坛</a>
<p><img src="liebao.jpg" /></p>
插图.0-4 点击图标时报错
BINGO!
要干点儿实事儿了!
仅仅以使用 crx 形式,包含 金山网址云安全开放API 为实例,完成一个能自动探查当前网址是否有钓鱼隐患的扩展!
好吧,想 C/C++/PHP/node.js/Python ... 切换到 crx ?!
所以,充满信心的:
Warning
好的,俺想象的场景是: - 每当打开一个页面时 - 俺的 crx 就将当前页面的 URL 发送给 金山网址云 - 然后,根据返回的结论,决定,是否对页面进行刷红,并警告!
问题是看 金山云安全开放平台 的文档也是种挑战吼! 必须先研究一下!
金山网址云 是个标准的接口服务
/phish/?q=[***]&appkey=[***]×tamp=[***]&sign=[***]
| | | | +- 数字签字
| | | | 生成忒复杂,详见见下文
| | | +- 距离1970.1.1零点的秒数
| | | 要求精确到小数点后3位
| | +- 从金山云申請到的
| +- 对目标URL进行 urlsafe base64 编码得到的字串
+- 使用?引导出参数列表
应用键(APPKEY): k-60666
安全码(SECRET): 99fc9fdbc6761f7d898ad25762407373
/phish/?appkey=[APPKEY]&q=[***]×tamp=[***][SECRET]
| | | +- 安全码
| | +- 距离1970.1.1零点的秒数,精确到小数后3位
| +- 对目标URL进行 urlsafe base64 编码得到的字串
+- 应用键值
然后,将此字串进行 MD5 计算! 得到的字串就是 数字签名
最后将整个 URL 拼到 http://open.pc120.com 后,直接访问,就可以获得 JSON 格式的回答
如果回答形如:
{"success": 1, "phish ": 3}
说明们成功了! 是否钓鱼网站参考:
| phish状态代号 | 含义 |
|---|---|
| -1 | 未知 |
| 0 | 非钓鱼 |
| 1 | 钓鱼 |
| 2 | 网站高风险,有钓鱼嫌疑 |
齐活儿! 这么大篇的技术文档,看穿了其实就以上这么点儿东西;-o
但是,怎么折腾成一个可用的 crx 呢?!
Warning
google 真心好朋友,通过搜索可以获得很多已经用上 crx 的先驱们的各种代码片段
只要使用 改.js->测试 流程,结合以往的开发经验,驗证猜想,突进就好!
凡事儿,预则立,不预则废物!
所以,出师要有名,得先有个名字! 嗯,结合想作的,以及依托的 金山云安全开放平台
就叫 elf - elf lockup phishing - 钓鱼欺诈锁死精灵
同前,创建新目录 elf 先来配置 :
{"name": "elf for Chrome"
,"version": "1.0"
,"description": "金山网络云安全钓鱼网址监察精灵!Alert for urls which is one kinds of Pishing."
,"background_page": "background.html"
,"page_action" :{
"default_icon" : "icon-19.png"
,"default_title" : "Here's a Pishing URL!"
}
,"permissions" : [
"tabs"
, "notifications"
, "http://*/*"
]
,"icons" : {
"19" : "icon-19.png"
,"48" : "icon-48.png"
,"64" : "icon-64.png"
,"128" : "icon-128.png"
}
}
这里有几个不同的声明了: - background_page ~ 因为 elf 是全自动运行的插件,没有用户交互,不用弹出提示,所以,指定一个作为服务器在默默运行的页面就好 - permissions ~ 这是因为 crx 能力太大了,几乎可以控制一切,所以,从内核就进行了全面的控制,一个扩展,想作什么,应该向内核进行备报,超过声明范畴的行为,将一概被无视! - icons ~ 因为随着扩展出现的位置不同,应该提供不同规格的图标,以便内核使用,以免强行缩放效果不美
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="md5.js"></script>
<script type="text/javascript" src="kcpish.js"></script>
<script>
// Listen for any changes to the URL of any tab.
chrome.tabs.onUpdated.addListener(checkForValidUrl);
/* Changelog::
- 111020 优化代码,清除不必要的尝试;输出有意义的日志到 console.log()
- 110516 完成可用原型
- 110512 创建
*/
</script>
</head>
</html>
哈! 这是技巧,也是习惯!
插图.1-1 使用开发工具进行编程
插图.1-2 喜欢的编辑环境
那么 checkForValidUrl 具体什么样?
/*
base http://code.ijinshan.com/api/devmore4.html
check URL base Kingsoft Cloud API for URI antiPishing
*/
var APPKEY = "k-60666"
var SECRET = "99fc9fdbc6761f7d898ad25762407373"
var ASKHOST = "http://open.pc120.com"
var ASKTYPE = "/phish/?"
// Called when the url of a tab changes.
function checkForValidUrl(tabId, changeInfo, tab) {
// If the letter 'g' is found in the tab's URL...
//console.log(tab.url)
if ("loading"==tab.status) {
var crtURI = window.btoa (tab.url)
//console.log(crtURI)
var timestamp = Date.parse(new Date())/1000+".512"
//console.log(timestamp)
var signbase = ASKTYPE+"appkey="+APPKEY+"&q="+crtURI+"×tamp="+ timestamp
var sign = hex_md5(signbase+SECRET)
//console.log(sign)
var askuri = ASKHOST+signbase+"&sign="+sign
//console.log(askuri)
checKcPishing(askuri,tabId)
}
}
function checKcPishing(URI,tabId) {
//console.log(URI)
var req = new XMLHttpRequest()
req.open("GET"
,URI
,true)
req.onreadystatechange = function() {
if (req.readyState == 4) {
// JSON.parse does not evaluate the attacker's scripts.
var resp = JSON.parse(req.responseText)
//console.log(req.responseText)
if(1==resp.phish){
chrome.pageAction.show(tabId)
showAlertMsg()
}
}
}
req.send(null)
}
/*
* A JavaScript implementation of the Pishing check base
* http://code.ijinshan.com/api/devmore4.html
* Version 1.1 Copyright (C) ijinshan.com 2010-2011
* Distributed under the Apache License v2
* See http://elffic.bitbucket.org/ for more info.
*/
/* Usgae chrome.tabs.executeScript recovered crt page:
*/
function showAlertMsg() {
msg ="<h1>Alert!报警!</h1>\
<h2>由<a href=http://code.ijinshan.com/api/devmore4.html>金山云安全网址查询</a>得知</h2>\
<h2>当前地址包含严重的钓鱼隐患!</h2>\
<h3>已由elf 插件自动屏蔽内容 请尝试其它同类网站...</h3>\
<h4>详细参考: <a href=https://bitbucket.org/elffic/elf/wiki/Home>https://bitbucket.org/elffic/elf/wiki/Home</a></h4>\
"
chrome.tabs.executeScript(null,
{code:"document.body.style.backgroundColor='red'"})
chrome.tabs.executeScript(null,
{code:"document.body.innerHTML='"+msg+"'"})
}
不得不推荐国人经验: chrome developer tool 调试技巧 - TaobaoUED
插图.1-3 使用开发工具窗口里的控制台来实时观察扩展的运行情景
checkForValidUrl()
JS 真心 碉堡 了! 所有最常见的操作都内置了!
字串的 base64 编码?! window.btoa
对外请求,果然是`XMLHttpRequest`
实际数据的接收使用 req.onreadystatechange 进行监控
数据体直接解析: JSON.parse(req.responseText)
当前时间戮只能先模拟小数点后的: Date.parse(new Date())/1000+”.512”
字串的 md5 编码: hex_md5()
- 不过,这个,真心要使用外部模块
- 是那个 <script type=”text/javascript” src=”md5.js”>
- 看其中的注释,感动哪,好人多哪!
/*
* A JavaScript implementation of the RSA Data Security, Inc. MD5 Message
* Digest Algorithm, as defined in RFC 1321.
* Version 2.2 Copyright (C) Paul Johnston 1999 - 2009
* Other contributors: Greg Holt, Andrew Kepert, Ydnar, Lostinet
* Distributed under the BSD License
* See http://pajhome.org.uk/crypt/md5 for more info.
*/
~ 这一堆,二十分鈡,整出来不难吧?
想来: - 其实,关键功能性行为代码,就8行
- 其中7 行全部可以在google 中直接搜索到
- 仅仅有一行,是需要学习新的工具,安装新的组件,学习新的文档,抄进来新的函式
其余,都是力气活儿
- 只要别抄錯
- 都是赋值,赋值,赋值,赋值,,,,
只要注意每一步,都使用 console.log 吼回来,测试确认无误,就可以继续前进了,,,
加载本地开发中的扩展目录
`->修订JS
^ `-> 重新加载
| `-> 测试扩展
| 观察控制台输出,确认效果是否吻合设想
| |
+-----------/
这就是脚本语言的直觉式开发调试体验!
好了,已经完成了预期的 :
但是 :
...
所以,继续折腾以及反思...
参考文档:
好吧,都是E文哪,普通人,很难看的下去的,,,肿么办!?
Warning
宏观步骤
开始计时:
什么是 web store ? 就是 Google 管理的类似 Apple 公司的 app store! - 那,什么是 app store ? - 你!问题怎么这么多!?
总而言之, Google 的 web store 就是义务为所有 crx 提供的一个作品发布中心/商城/管理平台 ... - 为一名开发者,可以方便的将 crx 作品发布出来 - 可以让全球互联网用户都可以高速的下载到我们的 crx 作品
而提供的一个服务中心!
插图.2-1 登录后从web store的配置菜单中进入
插图.2-2 通过 修改 链接进入后
就可以看到,要求对每个 crx 有一系列的必要信息需要提供!
不过,俺不是专业的设计师,所以,使用 Inkscape 快速根据规格快速画了一组:
以及截了个屏
齐活儿!
最后,就是将所有,开发目录的东西,打成一个 zip 压缩文件,上传, `web store`_ 会作一系列测试,签名,打包什么的工作,
所有处理无误通过后,就会同步到全球上万台服务器中,完成上架,俺的自制 crx 就算面市鸟!
BINGO!
最终,完成所有功能的配置和代码:
其实这个 elf 只能算是 crx 的练习作品, 猎豹浏览器 本身就已经内置了相同机制的功能!
当然,扩展是兼容 Chrome 的,是可以安装到 Chrome 的,以便没有内核级的 钓鱼检测功能的 Chrome 可以通过 crx 透明的享受到 金山云的服务!
其实, crx 的开发乐趣也正在于此:
- 我们可以自在的通过 JavaScript 令心爱的浏览器,作我们经常需要作的事儿!
- 不用求/等 Google 将新功能增补到新版本的浏览器来
这就是知识的力量!
好吧,虽然,整个手册看起来的确可以在 42 分钟之内,完成并发布出一个有真实功能的扩展来 - 但是,其实,真心要在之前,浏览足够多的开发文档,E文的,对 crx 的开发,有了正确的想象 - 才能够比较舒服自然的在 JavaScript 的帮助下,快速正确的将想作的事儿表述给 猎豹浏览器 内核明白,并逐一自动达成!
所以,中文版本的完备的开发文档,应该説是所有想自个儿开发 crx 的朋友们最需要的了,,,
接下来,就看俺怎么快速输出各种开发文档了,中文的! 敬请期待!
~ 2012.06.07 24:42 Zoom.Quiet
- Python 中文社区创始人 / 管理员之一，热心于各种开源技术社区的公众事业，大家熟知的社区”大妈”；OBP及蟒营工程设计者
的图书工程¶本书使用不同的体例来区分不同的情景.
本书包含很多外部网站的URL地址,但是图书必竟不是网页,读者无法点击进入相关网站;所以,笔者尝试使用URL精简工具来帮助读者可以快速输入自动跳转到原有网站来访问;
- 比如说: 本书的维基入口 http://wiki.woodpecker.org.cn/moin/ObpLovelyPython
- 精巧地址: http://bit.ly/2QA425
- 输入的字符量少了三倍! 这是借助 http://bit.ly 提供的网址精简服务达到的效果;
- 提醒:毕竟这是借用外国的免费服务进行的精简,如果读者输入后不能自动跳转的话,可能是网络问题也可能是服务问题,那就只能麻烦读者重新使用原有的URL进入了;
使用有语法颜色的代码引用
def foo():
print "Love Python, Love FreeDome"
print "E文标点,.0123456789,中文标点,. "
可以 用 .. code-block:: 追加各种语法高亮声明:
.. code-block:: python
:linenos:
def foo():
print "Love Python, Love FreeDome"
print "E文标点,.0123456789,中文标点,. "
效果:
1 2 3 | def foo():
print "Love Python, Love FreeDome"
print "E文标点,.0123456789,中文标点,. "
|
外部包含:
.. literalinclude:: example.py
:language: python
效果:
@route('%s/'%ini.urlprefix)
def index():
__urlog("INFO","idx++")
return template('index.tpl',urlprefix=ini.urlprefix)
引用,题词:
No matter where you go, there you are.
—Buckaroo Banzai
技巧警示:
Note
(~_~)
Warning
(#_#)
See also
(^.^)
附加说明:
进一步的
包含题外的信息,笔者心路,等等和正文有关,但是不直接的信息
知识引用:
各个章节的首页一般是 index.rst
头一行,习惯性加个聲明:
.. _chapter2index:
那么,在其它任意文本中,随时可以使用:
:ref:`基本电子学 <chapter2index>`
来生成一个指向第二章 首页的链接!
.. _fig_2_4:
.. figure:: _static/figs/tmux-curl-test.png
插图 2-4 命令行测试情景
然后,就可以在任意地方使用 插图 2-4 命令行测试情景 来指代, 实际输出的就是 “插图 2-4 命令行测试情景”
插图 2-4 命令行测试情景
有时要进行数学/化学的表示,在 html 中就需要上/下标( <sub> , <sup>) 的表达, rST 中当然也有:
H\ :sub:`2`\ O
E = mc\ :sup:`2`
效果:
H2O
E = mc2
Note
注意:
这里的 只是为了制造语法空间,输出时,是没有空格的了,,,
中文的非等宽性导致 rST 这种字符艺术式的图表很难作！
===== =====
A not A
===== =====
False True
True False
===== =====
所以,使用列表也可以方便的生成表格:
.. list-table:: 实例
:widths: 15 10 30
:header-rows: 1
* - Treat
- Quantity
- Description
* - Albatross
- 2.99
- On a stick!
* - Crunchy Frog
- 1.49
- If we took the bones out, it wouldn't be
crunchy, now would it?
* - Gannet Ripple
- 1.99
- On a stick!
效果
| Treat | Quantity | Description |
|---|---|---|
| Albatross | 2.99 | On a stick! |
| Crunchy Frog | 1.49 | If we took the bones out, it wouldn’t be crunchy, now would it? |
| Gannet Ripple | 1.99 | On a stick! |
使用 reSTsections
共分4级
=======================
大标题
=======================
-----------------------
小标题
-----------------------
^^^^^^^^^^^^^^^^^^^^^^^
二级标题
^^^^^^^^^^^^^^^^^^^^^^^
"""""""""""""""""""""""
三级标题
"""""""""""""""""""""""
再小，就使用列表!:
- 列表项目1
- 列表项目2
- ...
效果:
