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进行任何操作。