chrome 浏览器扩展（1）

基本概念

HTML、css、js、图片、其它 => 压缩文件

本质：web页面、全部浏览器提供的api

扩展与web页面交互

扩展与服务器交互

content script

cross-origin

xmlhttprequests

扩展访问浏览器提供的内部功能：标签、书签

扩展界面

browser action

page action

content script（注入到页面内执行的脚本）

经过其它方式提供界面：

加入到上下文菜单

提供一个选项页面

用一个content script 改变页面的显示

webApp界面

文件

manifest

html

js

其它、图片

以上文件都放在同一目录下

发布打包为 .crx

使用Chrome Developer Dashboard,上传应用（扩展）-> 会自动生成 .crx文件

引用文件

<img src="images/myimage.png">
复制代码

chrome-extension://<extensionID>/<pathToFile>
复制代码

chrome://extensions
复制代码

{
    "name": "My Extension",
    "version": "2.1",
    "description": "Gets information from Google.",
    "icons": { "128": "icon_128.png" },
    "background_page": "bg.html",
    "permissions": ["http://*.google.com/", "https://*.google.com/"],
    "browser_action": {
        "default_title": "",
        "default_icon": "icon_19.png",
        "default_popup": "popup.html"
    }
}
复制代码

基本架构

background page

页面

browser action

popup

Content script

Content script脚本是指可以在浏览器已经加载的页面内部运行的javascript脚本

能够将content script看做是网页的一部分，而不是它所在的应用（扩展）的一部分。

Content script能够得到浏览器所访问的web页面的详细信息，并能够对页面作出修改。

一个content script能够读取并修改当前页面的DOM树。

它并不能修改它所在应用（扩展）的背景页面的DOM树

Content script与它所在的应用（扩展）并非彻底没有联系。一个content script脚本能够与所在的应用（扩展）交换消息

例如，当一个content script从页面中发现一个RSS种子时，它能够发送一条消息。或者由背景页面发送一条消息，要求content script修改一个网页的内容。

页面间通讯

一个应用（扩展）中的HTML页面间常常须要互相通讯

一个应用（扩展）的全部页面是在同一个进程的同一个线程中运行的

所以它们之间能够直接互相调用各自的函数。

能够使用chrome.extension中的方法来获取应用（扩展）中的页面，例如getViews()和getBackgroundPage()。一旦一个页面获得了对应用（扩展）中其它页面的引用，它就能够调用被引用页面中的函数，并操做被引用页面的DOM树。

保存数据、隐身模式

web Storage API localStorage

向服务器发送请求