基本概念
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
向服务器发送请求