magic 发布的文章

心邮小程序是一款界面精美,操作简单,在这里,你可以记录自己每天的心情,也可以分享你的情感,和广大的用户一起交流生活,倾诉自己的烦恼,获得别人的理解和帮助。

微信扫描使用


上线时间:2017-1-9(小程序公开上线的第一天)

上线3个月后用户情况

  1. 日活跃数:500
  2. 14天后新增留存数平均大约6%
  3. 总访问用户大约3W+

微信后台新增留存数


累计访问用户

审核未通过原因

贡献给所有人,所以代码开源


1.15号就暂停更新了,目前也说不上体验非常好,不过开源了,有其他人的参与,一定会更好,在简书我也会把整个代码解析注释描述,如有疑问可以留言。

微信目前需要社区社交相关资质,这个项目已经放弃更新。

1.由于心邮项目里面没有嵌入任何盈利为目的的功能,也没去盈利。只当做公益放哪里。
2.好消息是我们已经把这套代码开源,包含数据库,如果有资质需要你自己也可以搭建一套类型的,非常感谢你的阅读。

图床(Image Hosting)是用于存储和分享图片的服务。使用图床可以帮助你在网站、博客、论坛等地方方便地插入图片,而不需要将图片直接上传到目标服务器。以下是使用图床的基本步骤:

1. 选择图床服务

首先,你需要选择一个图床服务。常见的图床服务包括:

  • 七牛云: 提供图片存储和CDN加速服务,适合需要大流量和高可用性的用户。
  • 腾讯云COS: 腾讯云的对象存储服务,支持图片存储和分发。
  • GitHub: 如果你有GitHub账号,可以将图片上传到GitHub仓库,并通过Raw链接分享。

2. 注册账号

大多数图床服务需要你注册一个账号。注册过程通常很简单,只需提供邮箱或手机号即可。

3. 上传图片

登录到图床服务后,你可以通过以下方式上传图片:

  • 网页上传: 在图床服务的网页上找到上传按钮,选择你要上传的图片文件。
  • API上传: 如果你是开发者,可以使用图床提供的API接口,通过代码上传图片。
  • 客户端上传: 有些图床服务提供桌面或移动客户端,你可以通过客户端上传图片。

4. 获取图片链接

图片上传成功后,图床服务会生成一个图片链接。你可以复制这个链接,用于在其他地方插入图片。

5. 插入图片

在需要插入图片的地方(如博客、论坛、Markdown文档等),使用以下格式插入图片:

markdown

复制

![图片描述](图片链接)

例如:

markdown

复制

![示例图片](https://i.imgur.com/example.jpg)

6. 管理图片

大多数图床服务允许你管理上传的图片,包括查看、删除、编辑图片信息等。你可以根据需要对图片进行管理。

存在问题

  • 国内的免费图床有大小,格式限制
  • 一些国内的图床提供几个月,就访问不到了
  • github 图床目前国内已经访问不到了

这里使用Bmob后端云来搭建图床,首先假定你已经有了一个账号,平台每月会给到20G CDN流量。

我们通过JS SDK来搭建简单图床

1.安装SDK

~:gh repo clone bmob/hydrogen-js-sdk

~:cd hydrogen-js-sdk

~:npm install

安装

2.运行

➜  hydrogen-js-sdk git:(master) ✗ npm run dev

运行

3.替换自己的秘钥

打开项目代码,找到main.js

秘钥

4.最终效果

效果

这时候UI自己设计一下,就完成了一个简易图床

5.核心代码

html

<input type="file" id="profilePhotoFileUpload"  multiple="multiple" >

JavaScript

// 获取文件上传控件元素
const fileUploadControl = document.getElementById('profilePhotoFileUpload');

// 当文件选择发生变化时触发该事件处理函数
fileUploadControl.onchange = () => {
  // 获取选择的文件列表
  const pic = fileUploadControl.files;
  
  // 遍历选择的文件并创建Bmob.File对象
  for(let item of pic){
     // 初始化Bmob.File,命名文件并关联文件对象
     file = Bmob.File(item.name, item);
  }
  
  // 保存文件到云端存储服务
  file.save().then(res => {
    // 保存成功后,获取保存结果
    const file = res[0];
    
    // 打印保存文件的数量和文件信息
    console.log(res.length);
    console.log(res,file,file.url);

    // file.url 插入到id为img的层下面最后一个元素图片展示
    document.getElementById('img').appendChild(document.createElement('img')).src = file.url;

    // 把文件url 文本插入到上一个图片后面
    document.getElementById('img').appendChild(document.createTextNode(file.url));


  });
}

教程代码 github 地址:https://github.com/bmob/hydrogen-js-sdk/ 有什么问题可以简书平台留言

什么是小程序云开发Serverless ?
之前跟大家介绍过Serverless由Baas+Faas 组成,听着很高深,其实很好理解。可以理解为为你提供了开发过程中后端服务+自定义后端服务。你不需要去管什么后端语言,什么后端数据库,什么后端攻击,什么后端架构,什么后端维护等,只要做好客户端UI,连接上后端就好了。

Bmob 作为国内第一家Serverless服务商,提供移动后端云服务。在这块已经服务了大量APP很多年。

这里解释下之前叫Baas 为啥现在叫Serverless,这是因为大家对Serverless的形式有不一样的认可,一部分人认为Serverless \= Faas+各种服务。 一部分人认为Serverless+Baas。

大家的共同认知都是无服务器计算。未来不再需要去购买任何服务器去提供API,也不需要操作关心任何并发维护等问题。

由于不需要写后端,不需要购买服务器,这块在APP领域,可操作性极高。我们从13年成立,就有大量APP开发者使用我们服务,到今天,已经接近30w开发者,涉及各行各业。 客户服务展现形式也是非常丰富,单片机、智能家居、智能手表、无人售货机柜、商场资讯地图引导柜机,机器人,共享单车、游戏,APP,小程序等等客户。

除了Bmob Serverless外,国内2大云厂商也建立自己Serverless体系

阿里云的Serverless就是 Faas+各种服务(数据库、网关、负载均衡等等)从Faas 里面调用各种服务,通过网关暴露给客户端访问。

腾讯云的Serverless偏向于Baas+Faas 可以看下腾讯云Serverless的相关文章

[http://www.cnblogs.com/qcloud1001/p/9486751.html](http://www.cnblogs.com/qcloud1001/p/9486751.html)

所以这也出现了2个例子:

阿里Serverless开发一个微信红包小程序应用教程

["口令红包"-利用函数计算构建微信小程序的server端 - CSDN博客](https://blog.csdn.net/zhoushuntian/article/details/79289215)腾讯出的小程序云开发一个小程序教程

[Parry:微信小程序开发平台新功能「云开发」快速上手体验](https://zhuanlan.zhihu.com/p/42327375)

在熟悉Faas情况下,阿里的比传统小程序PHP API开发,在运维上与硬件成本上,有着明显优势。

由于大家理念不同,腾讯小程序云,他是直接建立了一套Baas与小程序结合,跟Bmob后端云一样,即使你完全不懂Faas,也能开发大部分常用的小程序。 明显这种方式更简单实用。

为什么是常用的应用可以用Baas做,而不是所有,因为有些特别应用,需要一些特别操作。

例子一:

小程序.png

[http://www.91ud.com/app/15895.html](http://www.91ud.com/app/15895.html)

这个基于Serverless开发的一个例子,是基于Bmob后端云小程序,开发的一个小程序,叫趣猫。他的业务是一个淘宝客的业务,搜索跟推荐分成是他主要的功能, 其中搜索,如果不配合Faas,是没法实现, 因为他的搜索,其实是搜索淘宝客API的数据,整个淘宝推广的商品都可以搜索出来,有token授权,需要Faas访问淘宝API,返回数据给小程序客户端。

例子2:

纸塘

第二个基于Serverless开发的一个例子,小程序纸塘壁纸最近增加了一个功能,壁纸更新提醒通知,当后台有壁纸更新了, 会自动发送一条模板消息给我。这个也是基于Faas,单纯的Baas是没法实现这个功能。 当然,Bmob之前的Baas服务是包含了Faas服务,只是这2年Faas比较炒作的比较火。大家都把他(Faas)单独领了出来,作为Serverless架构的核心。我们则认为Baas与Faas同样重要。

之前我有文章写过,阿里的Faas 推广力度,与体验领先于腾讯的Faas , 由于阿里与腾讯的理解不一样,这次在Serverless领域,个人认为腾讯云一定会超过阿里的Serverless。

阿里云的Serverless就是 Faas+各种服务,不是玩微服务这个领域的人,很多人都不知道阿里的Serverless怎么结合到自己业务上。腾讯云理解为Baas+Faas,Baas有客户端的存在,更容易落地。大家理解的Serverless不一致,做的事情也不一致。

像阿里Faas+各种服务(今天去看阿里官方还不断在给Faas增加可调用的服务,到目前阿里Faas几乎可以操作阿里云的大部分产品,数据库,redis,云存储等等服务),并不断在宣传Faas是如何去调用这些服务。

腾讯云的行动告诉你什么叫Serverless(Baas+Faas),这次推出小程序云,以产品的形式告诉大家他眼中的Serverless服务。

image.png

按照2018年7月份微信小程序官方公布的数据,目前注册开发者以及到达了150W+,这150w的开发者,大部分是一些小的cp厂商,这些小的CP厂商,大有可能接下来新开发的小程序都基于Serverless开发,而整个Serverless 市场,会比目前大很多倍。

Serverless虽然好用,按照阿里的策略,很多人是看不懂无服务函数是干嘛的,为什么我要用它,而不是用云主机。因为设置太复杂了,概念很多,甚至好多人到今天还没搞懂计费原理。

腾讯云的策略,由于有了小程序Baas与客户端打通,大部分情况不用自己去Faas里面写接口,使用非常简单,在Serverless这块领域,很快腾讯云就会超过阿里云,由于很多初级开发者都不会用,很难推广开来,这次小程序云对国内整个行业来说,都是一个很好的教育。算得上是国内推广Serverless行业的又一次里程碑,未来Serverless会像目前云主机一样普及。

到底怎么使用?
有些前端对Serverless与小程序云的关系可能不太能理解,我下面用小程序云来代替Serverless这个词。

前期准备:

  1. 申请公测资格 网址:
  2. 下载bate版开发工具

    控制台操作:

  3. 打开小程序云控制台,在bate版小程序开发工具上传的左侧有个按钮。
  4. 点开后,看到一个类似这样的界面

image.png

  1. 点击数据库,创建一个自己前端想显示的数据结构。例如这里建个team表

image.png

代码操作:
我们把这条数据在小程序内显示? 这里我跟Bmob后端云做个对比

  1. 初始化
    微信
wx.cloud.init({
  env: 'test-x1dzi'
})

Bmob后端云

app.js 引入

var Bmob = require('../dist/Bmob-1.0.1.min.js');
wx.Bmob.initialize("你的Application ID", "你的REST API Key", "你的MasterKey");

2.第二步,查team表,打印出返回的数据

微信

db.collection('team').get().then(res => {
  // res.data 是一个包含集合中有权限访问的所有记录的数据,不超过 20 条
  console.log(res.data)
})

Bmob后端云

//构建team表对象
const query = Bmob.Query("team");
//查询数据
query.find().then(res => {
    //res 集合中所有数据,默认100条
    console.log(res)
});

数据显示出来了,在页面展示就不是问题,可以看到,除了需要引入SDK , 2个在使用上几乎一致。小程序云开发与使用Bmob开发几乎雷同。

文档地址:

[https://bmob.github.io/hydrogen-js-sdk//?id\=安装使用-1](https://bmob.github.io/hydrogen-js-sdk//?id\=安装使用-1)

关于定价:
腾讯云,最低版本

API 3w 天

数据库 1G

存储 5G

目前还不知道腾讯云的最低基础版上线是否收费,如果免费,那就很赞了。按照经验,这个额度大部分小应用都够了。

Bmob小程序云 最低版本(免费)

API 100w 月

数据库 表行 10w

存储 免费20G

流量 每月送20G

这个套餐免费,基本够用,收费套餐,大部分小程序都很难用得完。

目前小程序云还缺乏解决2个问题:

1.关于更好的功能实用性:
目前小程序云暂时比不上,Bmob后端云,像导入导出,生成小程序二维码、解密手机号,运动步数,支付,退款,短信,这些基础Baas服务端封装,小程序云暂时都还没有。然后就是数据安全与稳定性了,目前暂时没看到有任何关于云备份、安全的介绍,应用受到CC、DDOS 等攻击,这个费用是谁来承担,腾讯云之前的业务是客户自己解决,Bmob等 Baas 都是无需用户去承担这个费用的。

2.服务售后
我们都知道Baas 跟业务有深度关系,不像传统的云主机,我只保证云主机不死机就好了。基本卖出去就等着收月租。Baas领域开发者会遇到各种问题,你可以说你平台是标准的,文档都有,那么多技术人员在用,可开发者技术能力,理解能力参差不齐,就很难解决一些问题。 所以在传统的Baas 服务,都很重视问题反馈,像Bmob 就有几十个QQ解答群,加上工单。其他所有的Baas几乎没有哪家没工单服务的,有些工单还收几百块/月,大量工单,技术人员有限,这是没办法的,很多人问的问题,明显是技术基础不过关,对自己业务逻辑理解不够,就使劲提工单,而有些业务与Baas结合问题工单比较难形容,不知道Baas是否可以实现,所以有时候就用上了即时通讯,QQ,微信等来协助开发者解决问题。 所以这也是腾讯小程序云待解决的问题。

总结:
目前小程序云刚出来,还需要完善,对国内Serverless 市场来说,是一次里程碑式的意义。有望让中小企业普及Serverless 技术。

为什么需要

简单地说,浏览器插件,可以大大的扩展你的浏览器的功能。包括但不仅限于这些功能:捕捉特定网页的内容,捕捉HTTP报文,捕捉用户浏览动作,改变浏览器地址栏/起始页/书签/Tab等界面元素的行为,与别的站点通信,修改网页内容……给你增加许多想象空间,试想想看,你可以用它来识别一些网站上的广告代码,并直接把这些代码删掉,这样你就不会受到广告的困扰了,没错,如你所愿,这样的插件别人已经开发好了,你可以直接用。不过,也要说浏览器插件的弊端,那就是:会带来一些安全隐患,也可能让你的浏览器变得缓慢甚至不稳定。

为什么是Chrome

因为Chrome的插件开发起来最简单,总体上看没什么新的技术,开发语言就是javascript,web前端工程师能很快上手;而Firefox的插件开发则复杂许多,涉及到环境的搭建和一些WEB以外的技术;IE的插件开发就更复杂了,需要熟悉C++和COM技术,当然还要装微软的Visual
Studio。

这里有篇老外写的文章,对比Chrome、Opera和Firefox的插件开发的:<http://blog.nparashuram.com/2011/10/writing-
browser-extensions-comparing.html>。

应该说Chrome和Opera的插件的开发都不难,但Firefox的则比较棘手,也许你要问,那为什么Firefox的插件是最丰富的?我想这有些历史原因,Chrome出来毕竟比较晚,另外几种浏览器提供的插件的功能也是不尽相同的,OK,我们还是言归正传吧。

需要准备什么

几乎是零需求。Chrome浏览器和一个文本编辑器即可,文本编辑器最好是带语法高亮的那种。谷歌对我们做技术的人来说真是太大度了。

如何开始

强烈建议看看官方的说明:https://developer.chrome.com/extensions/getstarted.html

文章不长,照着文章去做,完成后,你就成功开发了第一个Chrome插件,这个插件会弹出一个小窗口,上面显示些阿猫阿狗的小图片。如图:

这个插件一共有4个文件:

  • manifest.json - 所有插件都要有这个文件,这是插件的配置文件,可看作插件的“入口”。
  • icon.png - 小图标,推荐使用1919的半透明png图片,更好的做法是同时提供一张3838的半透明的png图片作为大图标,在我后面提供的例子中,我就是那么干的。
  • popup.html - 就是你所看到的那个阿猫阿狗的弹出页面。
  • popup.js - 阿猫阿狗页面所引用的javascript文件。

这里千万千万注意了,我当初没仔细看popup.html里有一小段注释,这一小段注释说:出于安全考虑,javascript必须与html分开存放
。而我想嘛,一个小测试程序,没必要分开吧,直接写一起不就行了吗?结果javascript死活执行不了,我翻来覆去找不到原因,还以为弹出的小窗口不支持javascript,在网上搜索了半天又没有结果,最后才发现是这个原因,浪费了许多时间,这个事情也一定程度上说明了:细节决定成败。

manifest.json中的内容也非常显而易见,我选择其中几个属性讲一下:

复制代码



{ "manifest_version": 2, "name": "One-click Kittens", "description": "This extension demonstrates a browser action with kittens.", "version": "1.0", "permissions": [ "https://secure.flickr.com/" ], "browser_action": { "default_icon": "icon.png", "default_popup": "popup.html" }
}

复制代码

"manifest_version":现在应该总是2。

"permissions":很重要的东西,即允许插件做哪些事情,访问哪些站点,假如一个插件的"permissions"里写有“http://*.hacker.com/”,那么这个插件就被允许访hacker.com上的所有内容,包括可能会把你的一些个人信息提交给hacker.com,危险性不言而喻,查看一个插件能访问那些站点的方法是:在chrome的地址栏里输入“chrome://extensions/”(注意:这个页面我们之后要频繁用到,请收藏一下),然后点对应插件的旁边的那个“权限”,如:

"default_popup":用来指定点击小图标后弹出的小窗口中默认显示的是哪个html,这个弹出的小窗口就叫做“popup”。

"browser_action":这是一个浏览器级的动作,也就是说,不管你现在在访问哪个页面,那个小按钮总是显示出来,而我们的插件如果仅仅是针对某些页面的话,就不适合用这个"browser_action"了。下面我们来弄一个只有访问博客园(www.cnblogs.com)才会出现的小按钮。

Page Action

[chrome-plugin-page-action-demo.7z](http://files.cnblogs.com/guogangj/chrome-
plugin-page-action-demo.7z)

这个插件只有4个文件,其中两个还是图标,那就只剩下一个必须的manifest.json和一个background.js了。

mainifest.json:

复制代码



{ "manifest_version": 2, "name": "cnblogs.com viewer", "version": "0.0.1", "background": { "scripts": ["background.js"] }, "permissions": ["tabs"], "page_action": { "default_icon": { "19": "cnblogs_19.png", "38": "cnblogs_38.png" }, "default_title": "cnblogs.com article information" }
}

复制代码

注意:这里是“page_action”而不是“browser_action”属性了。

“permissions”属性里的“tabs”是必须的,否则下面的js不能获取到tab里的url,而这个url是我们判断是否要把小图标show出来的依据。background是什么概念?这是一个很重要的东西,可以把它认为是chrome插件的主程序,理解这个很关键,一旦插件被启用(有些插件对所有页面都启用,有些则只对某些页面启用),chrome就给插件开辟了一个独立的javascript运行环境(又称作运行上下文),用来跑你指定的background
script,在这个例子中,也就是background.js。

background.js

复制代码



function getDomainFromUrl(url){ var host = "null"; if(typeof url == "undefined" || null == url)
          url = window.location.href; var regex = /.*\:\/\/([^\/]*).*/; var match = url.match(regex); if(typeof match != "undefined" && null != match)
          host = match[1]; return host;
} function checkForValidUrl(tabId, changeInfo, tab) { if(getDomainFromUrl(tab.url).toLowerCase()=="www.cnblogs.com"){
          chrome.pageAction.show(tabId);
     }
};

chrome.tabs.onUpdated.addListener(checkForValidUrl); 

复制代码

代码中,我们使用了一个正则表达式去匹配url,获取出其中的domain部分,如果domain部分是“www.cnblogs.com”的话,就把小图标show出来,效果如下:

当然了,你现在点那个小图标的话,是没有任何反应的,我没有像官方提供的那个例子那样提供了popup。OK,现在是时候描述下chrome插件的结构了。

Chrome插件结构

需要声明的是,这个结构图是我自己画的,代表我对Chrome插件的理解,可能并不全面,甚至还不是十分准确,但找来找去找不到现成的,只好自己动手,如有谬误,请不吝指出。

如图,manifest.json作为插件的配置文件,同时可以看作程序的“入口”,因为它指定了显示什么图标,background
script有哪些文件,content script又有哪些文件,pop up的页面是什么,等等。

什么是popup,什么是background script,相信大家都清楚了,那什么是content script呢?content
script就是我们要注入到页面中的脚本,插件允许我们往网页中注入脚本,这是一个多么让人有想象力的功能,其功能之强大无需多解释,总的来说,就是让我们全面干预页面的内容!也许你马上会想到,这可能带来很大的安全隐患,没错,有些恶意插件会窃取你的页面信息,而有些有漏洞的插件则可能让你遭受跨站脚本注入(XSS)的攻击;另一个可能你会想到的问题是:往页面中注入自己的脚本,难道不会跟页面原本的脚本发生冲突吗?能想到这点说明你真的很厉害,如果我们的注入脚本和页面原本的脚本处于同一个运行环境中,确实会发生冲突,所以,Chrome是另外开辟了一个独立的运行空间,供我们的Content
Script使用的,Content
Script能访问DOM的内容,但却不能访问页面原本的脚本(我是说直接访问不行),反之,页面原本的脚本也不能直接访问Content
Script。在图中,浅红色的背景块代表Content
Script的运行环境,而浅蓝色的背景块代表页面运行环境,另外插件的运行环境我用浅绿色表示,注意,这是三个不同的运行环境,调试的时候你会充分体会到它们的不同。

那么,Content Script会在什么时候运行呢?默认情况下,是在网页加载完了和页面脚本执行完了,页面转入空闲的情况下(Document
Idle),但这个是可以改变的,详情可参考https://developer.chrome.com/extensions/content_scripts.html,查看其中的“run_at”。

由于处于不同的运行环境中,Content Script和Background
Script不能直接互相访问,那它们之间如何通信?通过Message!这个之后的代码中会有。

学习资料

理解了Chrome插件结构之后,我相信你完全有能力开发一款自己的插件了,当然了,你得自己去google一些资料,这里我就分享下我的方法。

首先,官方的资料一定得看看,https://developer.chrome.com/extensions/index.html,这个上面的资料得大致浏览一下(不需要全部仔细看),这样你能够明白一些术语,知道如何去寻找你的解决方案。

再则,官方提供的例子,可以看看,https://developer.chrome.com/extensions/samples.html,我发现上面的例子有些已经不能用于新版的Chrome了,但没关系,你只要找你想要的就行了,也不用一个个尝试,就根据你的需要,挑选几个你感兴趣的看看即可。

遇到问题,怎么办?当然是用google去查找问题,但这里我最最最强烈推荐,这简直是解决问题的神器!不多解释了,用过便知。

学习过程基本上就是:看个大概,写点代码,调试调试。就可以了。哦,大前提当然是你得有javascript的基础。(你:呵呵,你在逗我吧!)

我的例子

[chrome-plugin-cnblogs-article-
information.zip](http://files.cnblogs.com/guogangj/chrome-plugin-cnblogs-
article-information.zip)

[chrome-plugin-cnblogs-article-info-
server.zip](http://files.cnblogs.com/guogangj/chrome-plugin-cnblogs-article-
info-server.zip) (服务器端,PHP代码)

好,轮到我的例子登场了。它的功能是这样的:当你浏览博客园的时候,它会启动并尝试获取你浏览的文章的信息(标题、作者和日期),再通过往另一个服务器发送请求的方式,记录和获取你第一次访问这篇文章的时间,把这个时间连带文章的信息,显示在popup上。听起来挺无聊的功能,但关键是为了演示嘛,如图:

这个插件一共有9个文件,新出现的文件有两个(其它相信大家都很熟悉了),一个是“content_script.js”,这就是前面提到的Content
Script,获取和修改页面的内容就靠它了;另一个是“jquery-2.0.0.min.js”,大名鼎鼎的jQuery,我很喜欢用的js库,其理念是“write
less,do
more”,能帮我减少很多代码,这是目前最新的2.0.0版,这个版本跟以前的1.x.x的最大差别就是不再支持IE6、7和8,我个人是十分赞同这种做法的,微软的旧版浏览器都成了Web技术发展的绊脚石了,而且这次我们用的是Chrome浏览器,果断选择最新版了。

另外还有一个服务器端,为了让问题简化,这次我用了php代码,一个php文件就是整个处理了,没有太多繁杂的配置,简洁,这是php最大的优势。系统结构如图:

抓取网页的内容得依靠content_script.js,然后通过sendMessage/onMessage和background.js交换数据,background.js将url信息通过ajax(XMLHttpRequest)发送给localhost,获取此页面的第一次访问的时间,最后,用户点小图标,popup.html出现,popup.html会读取(代码在popup.js中)background.js中的articleData的数据,把它显示出来。这就是整个过程。

我抓取网页数据的方式并不能确保所有的博客园的文章都能被正常获取,这跟用户使用的博客模板有关系,但我尝试下来大多数文章还是可以抓取的,我不去适应所有的模板了,毕竟这只是个演示的demo。

另外还需说明的一点是我使用了jQuery做XMLHttpRequest,post的内容不是传统的html表单形式,而是json数据,所以在服务器端这边,就不能直接用$_REQUEST获取,而是通过读取“php://input”的内容获取。顺便谈谈个人对web
api的一个看法:“统一”大于“灵活”,这是我的观点,我确定我的接口的格式是json,使用utf-8编码,于是就一直用下去,调用者不用考虑用XML还是html表单还是别的,开发者也不必多考虑,让这成为一种统一的约定,在团队协助和以后的开发中会很省事。

调试

程序开发,必定要涉及到调试,记得我刚开始做WEB开发前,问一些做了好久WEB开发的朋友,你们是怎样做javascript调试的,我发觉大多数人竟然回答:用alert一点点试吧——不是不行,是太原始,太低效了,对吧?其实Chrome直接支持javascript的调试,拥有了Chrome,就相当于拥有了一个强大的javascript调试器了。

Chrome打开开发者工具的方法是++_(Windows版),大致如下:_

我们这次需要关心的有“Elements”、“Sources”和“Console”这三个标签。Elements是用来做DOM分析的,功能有点类似Firebug,帮助我们分析页面的内容;而Sources,是我们用来调试javascript的;Console则是我们的Log的输出窗口,也是一个调试利器。

调试Content Script

如我提供的这个例子,可在Sources的“Copntent
Scripts”下看到“content_script.js”然后设断点,执行到断点处时,Chrome会挺住,你可以观察到上面的值,如图:

太cool了,请问你还要一点点alert吗?

调试Background

由于background和content
script并不在同一个运行环境中,因此上面的方法是看不到Background的javascript的。要调试Background,还需要打开插件页,也就是“chrome://extensions”。点对应的插件的“generated
background page.html”,就出现了调试窗口,接下来的操作就跟前面的类似了。如图:

至于你看到ID,“aajnhhjiia……”这一长串东西,这是chrome自动安排的一个ID。

调试Popup

虽然Popup和Background是处于同一运行环境中,但在刚才的Background的调试窗口中是看不到Popup的代码的。调试Popup还需要这样:

然后……就跟前面差不多了。

一些问题

也许有时候你会发觉调试器不是很灵,至少我用下来感觉如此,比如你可能发现断点设不了,或者断点不起作用,或者看不到你自己的javascript文件。我的方法是在插件页中,把对应的插件的“已启用”这个复选框去掉,再重新勾上,然后再点一下“重新加载(Ctrl+R)”,通常能解决问题。当然了,还有些很古怪的问题,还不好重现,总体的解决思路就是重新载入一下,实在不行的话重启浏览器,或者清除浏览器缓存什么的,再试试看。

在做插件调试的时候我还遇到一个十分郁闷的问题,那就是我的Chrome使用了“Go Agent”,关于Go
Agent是用来干嘛的,这个嘛,可以去google一下,我相信绝大多数程序员都会喜欢上它……可由于使用了这个东西,很可能会导致插件的XMLHttpRequest工作不正常,而且可能你会思索半天也找不到原因,好吧,暂时把Go
Agent停用掉,甚至可能你需要重启下Chrome——我的经验。

总结

我还是想说,我觉得Google对我们程序员来说是个很大度的公司,在Chrome这个产品上面就可见一斑。利用Chrome插件技术,我们可以做许多有用的东西,通过本文,相信你已经知道如何去开发一款Chrome插件了,当然了,Chrome插件的功能是很强大的,我用到的仅是冰山一小角。要深入,当然还需要更加充分地利用google和stackoverflow.com了。

原文http://www.cnblogs.com/guogangj/p/3235703.html#t2