chrome扩展插件三：chrome插件体系结构概述

一个插件由一个文件夹及文件夹内的若干文件构成。 插件必须要有一个manifest.json文件。

1 插件体系结构

插件一般包含如下5个组件：

• Manifest
• Background Script
• UI Elements
• Content Script
• Options Page

manifest文件必须要有，其它组件可选。

1.1 manifest 文件

插件的定义文件，命名固定为manifest.json。包含了插件的信息及配置信息，数据格式为json。下面是一个manifest.json定义，其中包含了插件名称，版本等信息。

{
  // Required
  "manifest_version": 2,
  "name": "My Extension",
  "version": "versionString",

  // Recommended
  "default_locale": "en",
  "description": "A plain text description",
  "icons": {...},

  // Pick one (or none)
  "browser_action": {...},
  "page_action": {...},

  // Optional
  "action": ...,
  "author": ...,
  "automation": ...,
  "background": {
    // Recommended
    "persistent": false,
    // Optional
    "service_worker_script":
  },
  "chrome_settings_overrides": {...},
  "chrome_ui_overrides": {
    "bookmarks_ui": {
      "remove_bookmark_shortcut": true,
      "remove_button": true
    }
  },
  "chrome_url_overrides": {...},
  "commands": {...},
  "content_capabilities": ...,
  "content_scripts": [{...}],
  "content_security_policy": "policyString",
  "converted_from_user_script": ...,
  "current_locale": ...,
  "declarative_net_request": ...,
  "devtools_page": "devtools.html",
  "event_rules": [{...}],
  "externally_connectable": {
    "matches": ["*://*.example.com/*"]
  },
  "file_browser_handlers": [...],
  "file_system_provider_capabilities": {
    "configurable": true,
    "multiple_mounts": true,
    "source": "network"
  },
  "homepage_url": "http://path/to/homepage",
  "import": [{"id": "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"}],
  "incognito": "spanning, split, or not_allowed",
  "input_components": ...,
  "key": "publicKey",
  "minimum_chrome_version": "versionString",
  "nacl_modules": [...],
  "oauth2": ...,
  "offline_enabled": true,
  "omnibox": {
    "keyword": "aString"
  },
  "optional_permissions": ["tabs"],
  "options_page": "options.html",
  "options_ui": {
    "chrome_style": true,
    "page": "options.html"
  },
  "permissions": ["tabs"],
  "platforms": ...,
  "requirements": {...},
  "sandbox": [...],
  "short_name": "Short Name",
  "signature": ...,
  "spellcheck": ...,
  "storage": {
    "managed_schema": "schema.json"
  },
  "system_indicator": ...,
  "tts_engine": {...},
  "update_url": "http://path/to/updateInfo.xml",
  "version_name": "aString",
  "web_accessible_resources": [...]
}

1.2 background script

用来处理事件。包含了浏览器的事件监听器。当浏览器事件产生时，相关处理逻辑被执行。

例如在background脚本处理插件安装完毕的事件。当插件安装完毕后该事件处理方法会被触发，并弹出一个对话框。

manifest.json

 {
    "name": "extension tutorials",
    "version": "1.0",
    "description": "learn chrome extension",
    "page_action":{
      "default_title":"learn chrome browser_action",
      "default_popup":"popup.html"
    },
    "background":{
      "scripts": ["background.js"]
    },
    "manifest_version": 2
  }

background.js

chrome.runtime.onInstalled.addListener(function() {
	alert("installed");
})

1.3 UI 元素

用来定义了用户界面。例如定义弹出窗口，快捷键等。UI元素可以提升浏览体验。一般都有 browser action 或 page action。但也可以包含其它UI元素。如context menus，omnibox或快捷键。

browser action：可以将图标放置浏览器工具条上。此外还可以设计提示，图标和弹出框。对浏览器所有内所有标签页生效。

page action：可以将图标放置浏览器工具条上。此外还可以增加提示，图标和弹出框。但不是对所有标签页生效。并不对所有标签页可用，仅对满足条件的标签页处于激活状态可用。当处于非激活状态，图标为灰色。

UI界面，例如弹出框，可以包含带有Js脚本的html页面。此外也可以调用tabs.create或window.open来显示html文件。使用了page action和popup弹出框的插件可以使用 declarative content api在background script中来设置规则，确定什么时候弹出框可用。当条件满足的时候，弹出框对用户可用。

1.4 Content script

插件通过Content script来对页面操作，可以修改所访问的页面dom对象，样式等。比如用来修改页面的背景色。

1.5 Options Page

插件的配置选项页面。通过该页面可以对插件功能进行配置。点击插件详情信息 - 扩展程序选项，即可看到这项配置。

2 使用chrome api

除了正常浏览器中使用的页面DOM API，插件还可以使用chrome提供的扩展API。这些api 分异步与同步两种。

2.1 页面间通信

html页面可以通过chrome.extension的方法，如getViews()与getBackgroundPage()找到其它页面对象。此外还可以通过storage API以共享数据的方式通信。

2.2 数据存储与隐身模式

数据存储用到storage API，或者发送请求将数据存放到服务器上。插件无法运行在隐身模式下。所以存储数据前要先检查是否处于隐身模式。可以通过tabs的incognito属性或 windows.Window对象来检测。

function saveTabData(tab) {
  if (tab.incognito) {
    return;
  } else {
    chrome.storage.local.set({data: tab.url});
  }
}

3 原文地址

https://developer.chrome.com/extensions/overview