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

最初

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