chrome插件教程1-初识manifest chrome插件教程1-初识manifest

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

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