关于chrome插件. 可能大家或多或少的都会用几个. 例如wappalyzer, 截图, Fehelper等. 这些在使用浏览器中或多或少的都给予我们极大的方便. 那如何来开发一个扩展呢. 国内这样的文档也比较少. 下面我们就来实地的解剖一下chrome插件所需要的东西.
剖析chrome插件
如果要开发一个插件, 首先我们先看一下简单的chrome插件怎么书写. 来看一个例子
https://github.com/orbitbot/chrome-extensions-examples/tree/master/basic_1我们先看一下目录
├── icon.png // 图标文件
├── manifest.json // 声明文件
├── popup.css // popup.html引用的css
├── popup.html // 页面文件
├── popup.js // popup页面引用的js文件
└── README.md // 说明文件我们按照已知的来分组. 首先. icon为图标文件, 没撒好了解的. popup.js,html,css全都是一个页面的. 一组. 还有一个manifest.json一组. README.md. 仓库说明文件一组. 抛除我们就只需要查看一下manifest.json文件. html/js/css大家都有一定程度的了解. 说明我们的chrome插件的就必须要manifest.json文件. 我们来看看.
manifest.json
既然我们要了解这个json文件. 那我们得明白里面应该要填写什么内容. 我们看一下官方提供的较为全面的manifest.json文件.
{
// 必填
"manifest_version": 3, // manifest版本. 有1,2,3不同的版本所代表的参数不一致. 官方推荐3
"name": "My Extension", // 扩展名称
"version": "versionString", // 扩展的版本号
// 推荐
"action": {...}, // 3版本新出来的. 行为. 可以控制在chrome扩展上面的展示文字等图标
"default_locale": "en", // 默认使用的语言. 如果使用. 则必须在_locales文件夹下面包含对应版本的文件
"description": "A plain text description", // 扩展的描述
"icons": {...}, // 图标
// 选填
"author": ..., // 作者
"automation": ..., // 自动化. 目前官方并没有给出对应的信息.
"background": { // 背景页参数.
// 必填
"service_worker": "background.js", // 背景页的逻辑.
// 选填
"type": ... // 类型. 目前可以填写module. 使用ES的模块来进行书写.
},
// 覆盖chrome的设置
"chrome_settings_overrides": {...},
// 更改默认的tab页面
"chrome_url_overrides": {...},
// 自定义chrome的命令
"commands": {...},
"content_capabilities": ...,
// 内容脚本
"content_scripts": [{...}],
// 内容限制策略 csp
"content_security_policy": {...},
// 转换用户的脚本
"converted_from_user_script": ...,
// csp内容策略 embedder
"cross_origin_embedder_policy": {"value": "require-corp"},
// csp打开策略
"cross_origin_opener_policy": {"value": "same-origin"},
// 当前的本地化
"current_locale": ...,
"declarative_net_request": ...,
// 调试页面
"devtools_page": "devtools.html",
"differential_fingerprint": ...,
// 事件规则, 主要用于declarativeContent的事件监听
"event_rules": [{...}],
// 定义某些网页或扩展访问你开发的扩展
"externally_connectable": {
"matches": ["*://*.example.com/*"]
},
// 文件下载器
"file_browser_handlers": [...],
// 管理文件下载器
"file_system_provider_capabilities": {
"configurable": true,
"multiple_mounts": true,
"source": "network"
},
// 主页地址
"homepage_url": "https://path/to/homepage",
// 站点权限. 允许哪些站点打开您的扩展
"host_permissions": [...],
// 导入共享的模块
"import": [{"id": "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"}],
// 隐身模式设置
"incognito": "spanning, split, or not_allowed",
//
"input_components": ...,
// 公钥
"key": "publicKey",
// 最低chrome的版本
"minimum_chrome_version": "versionString",
// 申明文件后缀的处理方式
"nacl_modules": [...],
"natively_connectable": ...,
"oauth2": ...,
"offline_enabled": true,
// 设置omnibox
"omnibox": {
"keyword": "aString"
},
// 选项菜单所使用的权限
"optional_permissions": ["tabs"],
// 选项菜单页面
"options_page": "options.html",
// 执行页面和是否使用chrome的ui
"options_ui": {
"chrome_style": true,
"page": "options.html"
},
// 权限
"permissions": ["tabs"],
"platforms": ...,
"replacement_web_app": ...,
// 声明所需要的依赖
"requirements": {...},
// 定义一组页面在沙箱中使用
"sandbox": [...],
// 简短的扩展名字
"short_name": "Short Name",
// 定义存储
"storage": {
"managed_schema": "schema.json"
},
"system_indicator": ...,
"tts_engine": {...},
// 声明更新地址
"update_url": "https://path/to/updateInfo.xml",
// 版本名称
"version_name": "aString",
// web资源的访问权限
"web_accessible_resources": [...]
}最后
了解了基本的结构. 我们就先来做一个简单的扩展.