从零开始写一个 Chrome 扩展
一个 Chrome 扩展其实就是一个配置文件 manifest.json 和一系列 HTML、CSS、JS、图片文件的集合，所以只要有前端基础，写一个简单的 Chrome 扩展是分分钟的事情。
一个简单的 Chrome 扩展的目录结构是这样的：
--chrome extension |--manifest.json |--script.js |--style.css |--popup.html这里主要讲 Manifest 文件的编写和扩展的调试，至于HTML、CSS、JS 及文件组织，跟普通的 Web 开发一样。下面的涉及到的两个栗子，源码分别在 stock 和 weather 。
Manifest 文件
基本属性
manifest.json 是 Chrome 扩展的入口文件，定义了 扩展的名称（name）、版本（version）、描述（description）、图标位置（icons）和 Manifest 版本（manifest_version）等信息。
其中，name、version 和 manifest_version 是必须的，而且 manifest_version 必须为 2 。
browser_action
browser_action 指定扩展的图标放在 Chrome 工具栏中，它定义了扩展图标文件位置（default_icon）、悬浮提示（default_title）和点击扩展图标所显示的页面位置（default_popup）。
栗子
{
...
"browser_action": {
"default_icon": {
"19": "images/icon19.png",
"38": "images/icon38.png"
},
"default_title": "stock helper",
"default_popup": "popup.html"
},
...
}
比如一个查看股票信息的扩展，点开图标后是这样的效果
options_page
options_page 属性定义了扩展的设置页面，配置后在扩展图标点击右键可以看到 选项 ，点击即打开指定页面。对于没有图标（没有设置 browser_action）的扩展，可以在 chrome://extensions/ 页面找到选项按钮。
栗子
{
...
"options_page": "options.html",
...
}
permissions
permissions 属性是一个数组，它定义了扩展需要向 Chrome 申请的权限，比如通过 XMLHttpRequest 跨域请求数据、访问浏览器选项卡（tabs）、获取当前活动选项卡（activeTab）、浏览器通知（notifications）、存储（storage）等，可以根据需要添加。
栗子
{
...
"permissions": [
"http://hq.sinajs.cn/list=*"
"tabs",
"activeTab",
"notifications",
"storage"
],
...
}
background
background 可以使扩展常驻后台，比较常用的是指定子属性 scripts，表示在扩展启动时自动创建一个包含所有指定脚本的页面。
栗子
{
...
"background": {
"scripts": ["js/background.js"]
},
...
}
chrome_url_overrides
chrome_url_overrides 属性可以自定义的页面替换 Chrome 相应默认的页面，比如新标签页（newtab）、书签页面（bookmarks）和历史记录（history）。
栗子
{
...
"chrome_url_overrides": {
"newtab": "tab.html"
},
...
}
结合前面的 background 属性，可以做一个打开新标签页，就能看到天气和当前时间的扩展，如下图
调试
在编写的过程中，可以通过打开 Chrome 设置-扩展程序（chrome://extensions/） 页面，勾选 开发者模式，点击 加载正在开发的扩展程序 按钮，选择扩展所在的文件夹，就可以在浏览器工具栏中看到自己写的扩展了。
如果是带图标的扩展，右键点击图标，点击审查弹出内容，在相应位置加断点，然后在控制台（console）上，输入以下命令：
location.reload()重新加载这个页面，就可以调试了。
如果是覆盖新标签页的应用，直接右键审查元素，加断点，刷新即可。
关键字：产品经理
版权声明
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！
