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

最初

理解了根本的构造. 咱们就先来做一个简略的扩大.