起步

概述

扩展实际是压缩在一起的一组文件,包括HTML、CSS、JavaScript、图片及其它任何需要的文件;扩展本质上就是web页面,因此可以使用所有的浏览器提供的API。

每个扩展都有一个manifest文件用来描述插件的元数据和配置信息;


界面

一般扩展会以 browser action 或 page action 的形式在浏览器界面上展现。每个扩展最多可以有一个 browser action 或 page action

如下图:(page action在地址拦后面,browser action在工具栏上)


扩展应用也可以通过其它方式提供界面,比如加入到上下文菜单,提供一个选项页面或用一个content script改变页面的显示等。可以在"开发指南"中找到应用(扩展)特性的完整列表以及实现的细节。



基本架构

背景页面

大多数应用(扩展)都包含一个背景页面(background page),用来执行应用(扩展)的主要功能。

在背景页面里定义了browser action和javascript代码。应用(扩展)里面的HTML页面可以互相访问各自DOM树中的全部元素,或者互相调用其中的函数。

背景页面是一个常驻的页面,它的生命周期是插件中所有类型页面中最长的,它随着浏览器的打开而打开,随着浏览器的关闭而关闭,所以通常把需要一直运行的、启动就运行的、全局的代码放在background里面。


Content scripts

如果一个应用(扩展)需要与web页面交互,那么就要使用content script。Content script脚本是能够在浏览器已经加载的页面内部运行javascript脚本。可以将content script看作是网页的一部分,而不是它所在的应用(扩展)的一部分。因此在从背景页面给content script发送消息时,就需要确定要发送到哪个标签页中的content script。

Content script可以获得浏览器所访问的web页面的详细信息,并可以对页面做出修改。但是它并不能修改它所在应用(扩展)的背景页面的DOM树。

Content script与它所在的应用(扩展)并不是完全没有联系。一个content script脚本可以与所在的应用(扩展)交换消息


优质资料https://juejin.im/post/5c135a275188257284143418#communication01

https://www.cnblogs.com/liuxianan/p/chrome-plugin-develop.html



强大的Chrom浏览器插件Demohttps://github.com/sxei/chrome-plugin-demo

Chrom插件英雄榜:https://github.com/zhaoolee/ChromeAppHeroes



举报

© 著作权归作者所有


1