chrome扩展程序开发

一、概述

1、查看及运行扩展程序

点击右上角，更多工具--->扩展程序

在这里可以看到已经添加的扩展程序；
选择右上角的‘开发者模式’，会出现下面的扩展程序的按钮；
点击‘加载已解压的扩展程序……’，可以直接加载并调试扩展程序（也可以直接把文件夹直接拖过来）；
点击‘打包扩展程序……’，可以把程序打包为一个.crx文件，便于发布使用。

2、扩展的组成

manifest.json（是扩展的调度中心，声明各种资源）
js文件（写各种操作）
图标（可选，最好是19px*19px）
popup页面、options页面（可选，点图标的弹出页面、在扩展页选项的弹出窗口）
css文件（可选）

二、调试

1、查看扩展程序信息

点击右上角，更多工具--->扩展程序，查看已添加的扩展程序，如下图：

2、查看popup页面

右键单击扩展程序的图标，选择‘审查弹出内容’，就会出现一个Developer Tools窗口，可以查看popup的代码，也可以查看其它文件如js和css的代码。

三、架构

1、不可视的background页面

写扩展的主要业务逻辑
两种：一种是 persistent background pages（持续运行），另一种是 event pages（事件驱动）

在manifest.json文中注册Persistent background page如下：

{

    "background": {}

    "scripts": [myBackgroundPage.js],
    
    "persistent": true

    }

}

在manifest.json文中注册Event page如下：

{

    "background": {

    "scripts": [myEventPage.js],

    "persistent": false

    }

}

2、可视页面

browser actions：可作用于任何页面，图标在地址栏外

"browser_action": {
    "default_icon": "icon.jpg",
    "default_title": "Baicaowei AutoReserve",
    "default_popup": "popup.html"
  },

default_icon：图标（最好19px*19px）

default_title：标题

default_popup：弹出框

page actions：作用于某一页面，图标在地址栏内
```
"page_action": {
    "default_icon": "icon.jpg",
    "default_title": "Baicaowei AutoReserve",
    "default_popup": "popup.html"
  },
```
控制Page Action的图标显示使用chrome.pageAction.show(integer tabId)方法

控制Page Action的图标隐藏使用chrome.pageAction.hide(integer tabId)方法

点击Page Action的图标绑定事件使用chrome.pageAction.onClicked.addListener(function (tab) {…})方法
其它：context menu，右键菜单； options 页面；override页面（替换浏览器中打开的默认页面）；通过chrome.tabs.create()或window.open()打开的页面
- override页面（没用过）
```
"chrome_url_overrides" : {
    "pageToOverride": "myPage.html"
},
```
  pageToOverride的值可以是bookmarks、history、newtab，然后就可以编辑用以替换的myPage.html页面了

3、扩展与web页面/服务器之间的交互

与页面交互：content scripts

"content_scripts": [
    {
      //content script注入的页面（必选）
      "matches":[   
        "http://www.xxx.com/xxx.htm*"
      ],
      "js":[
        "js/jquery.js",
        "js/honor.js"
      ],

     "css": ["mystyles.css"],

     "run_at":"document_idle", 

     "all_frames": true //js是否在所有匹配的页面的框架中运行  
   } 
],

与服务器交互：跨域的 XMLHttpRequest

4、使用Chrome浏览器专有的API（chrome.*API）

5、扩展中的各页面之间的数据通信（多页面时用）

扩展中的所有页面都运行于同一个进程中的同一个线程，所以各个页面可以通过一定的方法直接调用。
如通过chrome.extension.getViews()获得所有可视页面的window对象的数组，通过chrome.extension.getBackgroundPage()获得不可视的background页面的window对象。通过页面的window对象就可以对页面的DOM进行任何操作。