【chrome 插件一】开发一个简单chrome浏览器插件

hnliang 4年前
   <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>