chrome插件教程1-初识manifest

关于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": [...]
}

最后

了解了基本的结构. 我们就先来做一个简单的扩展.