Chrome扩展-从入门到实践系列之一

导语：

本系列计划记录一个Web开发新手利用小组及网络资料，结合实际项目学习chrome扩展开发的历程，因为初次接触，且多处为个人理解，如有不妥请指正。(初识chrome扩展：《如何编写一个Chrome扩展》读后感)

Chrome扩展个人理解

对用户，简单来说Chrome扩展就是一些能够修改或增强Chrome浏览器功能的小程序，从开发者的角度就是一个精简的网站，内容展现仍是以Html,Css为主，Js提供对页面DOM的动态操作；所特别的是:1,由于chrome基于谷歌的V8引擎，所以Js的功能被增强;2,chrome浏览器本身提供特别API（如同.net的Framework）,根据chrome官方约定，可对扩展功能进行定义。

Chrome扩展官方文档

从这里可以看到Google提供的Chrome文档,包含一些基础指引、简介、示例和各种API,遗憾的是需要翻墙才可查看。

• chrome extensions

结合《如何编写一个Chrome扩展》中实例及词记项目需求的总览

资料链接

• 《如何编写一个Chrome扩展》
• 词记项目需求

Chrome扩展基础文件结构

本文中涉及示例代码，均取自《如何编写一个Chrome扩展》中Clock的Demo。

• 配置文件：manifest.json
  manifest.json是整个程序的入口，相当于系统配置文件，Chrome浏览器加载扩展程序的时候，会先寻找该文件。
  其中定义了版本号,扩展名称，图标及Js等众多配置项，具体使用时，可复制如下参考模版进行修改：

• 页面显示：popup.html
  Clock主页面，主内容为id为clock的DIV及相关布局。整个HTML采用标准HTML结构即可，title标签无需使用。

• js文件夹：存放用户自定义js文件
  Clock中时间的动态获取及赋值的js主文件。

• images文件夹：存放图片
  Clock多种大小图片，以便适配不同浏览器使用。

操作用户正在浏览的页面

目前的Clock的Demo中只有扩展页面显示，用户浏览页面操作未涉及，但词记项目基本的划词功能会使用到。

跨域请求

词记项目中需要与规划好的API进行交互，或直接将数据写入服务器，均需要跨域请求，跨域js函数为异步函数，此处知识点不太明确，后期查询资料后续补上。

后台监听

这个根据词记项目需求定。

数据存储

HTML5中5MB的写入限制，词记的规划主数据应该存储在远端服务器，一些基本信息可加密存储在本地。

开启选项

相当于网站后台，如用户需要对插件功能进行设定或定制，需要新增页面进行操作，并在主配置文件manifest.json中进行定义。

右键菜单

词记项目中用户需要用右键的功能菜单对选中的单词进行进一步操作，所以这个功能也必不可少。

桌面提醒

词记项目中可通过此功能定期提醒用户进行复习等操作。

> 后续系列会深入阅读参考文档《Chrome扩展及应用开发》,对上述问题进一步深入学习。

   

想获得去掉 5 元限制的证券账户吗？

证券交易股票基金的佣金，不足 5 元会按照 5 元收取。比如交易 1000 元的股票，按照普遍的证券佣金手续费率万 2.5，其交易佣金为 0.25 元，小于 5 元，实际会收取佣金 5 元，买卖两次需要支付 10 元佣金成本，1% 的利润就这样没了。

如果您想去掉最低交易佣金 5 元限制，使用微信扫描左边小程序二维码，访问微信小程序「优财助手」，点击底部菜单「福利」，阅读文章「通过优财开证券账户无最低交易佣金 5 元限制」，按照文章步骤操作即可获得免 5 元证券账户，股票基金交易手续费率万 2.5。

请注意，一定要按照文章描述严格操作，如错误开户是无法获得免 5 元证券账户的。