转载请注明出处: http://qiudeqing.com/javascript/2017/03/27/chrome-extension.html

chrome插件是什么

chrome插件本质是提供特殊功能的web页面,可以使用浏览器提供给web页面的所有功能,也能使用浏览器专属的API。前端工程师只需要了解chrome插件的组成、不同模块之间的通信方式、常见API的使用就可以轻松实现各种工具。

本次分享主要介绍chrome插件的组成、不同模块之间的通信,再完成一个小插件。

helloworld: 淘宝账号退出

  1. 创建项目目录logout
  2. 新建manifest.json

     {
     "manifest_version": 2,
    
     "name": "淘宝退出",
     "description": "添加淘宝退出按钮到浏览器窗口,方便测试",
     "version": "1.0",
    
     "browser_action": {
         "default_icon": {
         "19": "images/icon19.png",
         "38": "images/icon38.png"
         }
     },
    
     "background": {
         "scripts": ["js/logout.js"],
         "persistent": false
     },
    
     "permissions": ["<all_urls>"]
     }
    
  3. 创建js/logout.js

     chrome.browserAction.onClicked.addListener(function () {
     var xhr = new XMLHttpRequest();
     xhr.open('get', 'http://login.taobao.com/member/logout.jhtml');
     xhr.send(null);
     });
    
  4. 创建项目所需的png文件

  5. 浏览器访问:chrome://extensions/ -》 勾选开发者模式 -》加载已解压的扩展程序 -》选择logout文件夹
  6. 浏览器地址栏右侧出现icon,点击之后淘宝账号退出。
  7. 选择打包扩展程序,选择logout目录。完成打包获得crx文件

插件文件组成

chrome插件UI类型

chrome插件可以通过以下UI与用户进行交互:

插件架构

根据功能和上下文将页面分为一下几类

UI页面之间的通信

content scrip和UI页面间的通信

参考Message Passing: content script和UI页面通过消息发送进行通信。chrome支持以下几种通信方式:

数据存储

插件可以使用chrome.storage或者web storage API将数据保存到本地, 也可以发送到服务器保存.

参考资料