【chrome 插件一】开发一个简单chrome浏览器插件
hnliang
9年前
<p>chrome 之所以越来越好用，很大一部分原因归功于功能丰富的插件；对于chrome忠实用户来说，了解和开发一款适合自己的chrome插件，确实是一件很cool的事情。</p> <h2>了解chrome 插件</h2> <p>chrome 插件个人理解：<code>就是一个html + js +css + image的一个web应用</code>；不同于普通的web应用，<code>chrome插件除了兼容普通的js，json，h5等api，还可以调用一些浏览器级别的api，例如收藏夹，历史记录等。</code></p> <p>推荐两个网站了解和入门 谷歌官方API：https://developer.chrome.com/extensions/getstarted</p> <p>360的文档：http://open.chrome.360.cn/extension_dev/overview.html</p> <h2>开始写第一个插件</h2> <h3>文件结构</h3> <p>一个简单的demo，文件目录如下 <a href="https://simg.open-open.com/show/fb6467bf8edca7ec171705dc9139a967.png"><img alt="【chrome 插件一】开发一个简单chrome浏览器插件" src="https://simg.open-open.com/show/fb6467bf8edca7ec171705dc9139a967.png" width="642" height="599"></a> 和普通的web文件没有什么区别，简单介绍下</p> <ul> <li>html:存放html页面</li> <li>js :存放js</li> <li>locales ：存放了一个多语言的兼容【可无】</li> <li>image ：放了两张图片【初期图标】</li> <li>manifest ：核心入口文件</li> </ul> <h3>写一个manifest</h3> <p>api参考文档 :http://open.chrome.360.cn/extension_dev/manifest.html</p> <p>直接上代码：</p> <pre> <code class="language-javascript">{ "name": "hijack analyse plug", "version": "0.0.1", "manifest_version": 2, // 简单描述 "description": "chrome plug analyse and guard the http hijack", "icons": { "16": "image/icon16.png", "48": "image/icon48.png" }, // 选择默认语言 "default_locale": "en", // 浏览器小图表部分 "browser_action": { "default_title": "反劫持", "default_icon": "image/icon16.png", "default_popup": "html/test.html" }, // 引入一个脚本 "content_scripts": [ { "js": ["script/test.js"], // 在什么情况下使用该脚本 "matches": [ "http://*/*", "https://*/*" ], // 什么情况下运行【文档加载开始】 "run_at": "document_start" } ], // 应用协议页面 "permissions": [ "http://*/*", "https://*/*" ] } </code></pre> <p>test.js 文件</p> <pre> <code class="language-javascript">/** * @author: cuixiaohuan * Date: 16/4/13 * Time: 下午8:41 */ (function(){ /** * just test for run by self */ console.log('begin'); })(); </code></pre> <p>test.html 文件</p> <pre> <code class="language-javascript"><!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>just for test</title> </head> <body> <h3>test</h3> </body> </html> </code></pre> <h3>运行插件</h3> <p>chrome 中输入：chrome://extensions 选择加载已解压的插件-》选择文件根目录即可。 效果如下：</p> <p><a href="https://simg.open-open.com/show/12c998b866a8c2dfff83ad18605f6bf2.png"><img alt="【chrome 插件一】开发一个简单chrome浏览器插件" src="https://simg.open-open.com/show/12c998b866a8c2dfff83ad18605f6bf2.png" width="1548" height="573"></a>一个基本的插件变完成了，勾选已启用，随便打开一个网页，会看到log中输出如下</p> <p><a href="https://simg.open-open.com/show/c8922f96aa7efc3f32da6c36aabfb04d.png"><img alt="【chrome 插件一】开发一个简单chrome浏览器插件" src="https://simg.open-open.com/show/ff01618a7e8e71abb726241039242d12.png" width="1671" height="722"></a></p> <p>点击页面上面的小图标如下图：</p> <p><a href="https://simg.open-open.com/show/5af713889da99537bc59c5478906d1e1.png"><img alt="【chrome 插件一】开发一个简单chrome浏览器插件" src="https://simg.open-open.com/show/5af713889da99537bc59c5478906d1e1.png" width="363" height="345"></a></p> <h2>优化建议</h2> <p>一个小的插件已经完成，但是还有更多的api和有趣的事情可以去做。下面是360文档中给出一些优化建议，共勉。</p> <ul> <li>确认 Browser actions 只使用在大多数网站都有功能需求的场景下。确认 Browser actions 没有使用在少数网页才有功能的场景， 此场景请使用page actions。</li> <li>确认你的图标尺寸尽量占满19×19的像素空间。 Browser action 的图标应该看起来比page action的图标更大更重。</li> <li>尽量使用alpha通道并且柔滑你的图标边缘，因为很多用户使用themes，你的图标应该在在各种背景下都表现不错。不要不停的闪动你的图标，这很惹人反感。</li> </ul> <p>来自：<a href="/misc/goto?guid=4959670653167181596">靠谱崔小拽</a> </p>