关注 “弋凡”(YiFan)微信公众号吧 记录简单笔记 做你的最爱
关于Chrome Extension
Chrome Extension 浏览器的功能扩展插件,由html
、css
、js
和一个描述文件manifest.json
组成,在浏览器中显示图标,本质上其实就是一个由html、css、js、图片等资源组成的一个.crx后缀的压缩包
Chrome API
manifest.json
消息交互
网页和Chrome插件之间的通信
大致流程(个人理解)
-
manifest.json 配置说明(必须文件)
- 简单记录
{ "name": "名称", -- 必须 "description": "描述", "version": "版本号", -- 必须 "manifest_version": 2, -- 必须 "icons":{ "16": "图标.png", "46": "图标.png", "128": "图标.png" }, // 权限 "permissions": [ "contextMenus", // 右键菜单 "tabs", // 标签 "notifications", // 通知 "webRequest", // web请求 "webRequestBlocking" "<all_urls>", ], "browser_action": { "default_popup": "popup.html 右上角点击后的弹窗,可以用一个页面定义", "default_icon": "xxx.png 显示在右上角的图标按钮" }, // 插件运行的环境,会一直常驻的后台JS或后台页面 为了告诉脚本哪些文件被引用,这些文件有什么作用 "background": { "scripts": ["background.js"] }, // 访问目标网站的 DOM ,可以用来进行通信 "content_scripts": [ { //"matches": ["http://*/*", "https://*/*"], // "<all_urls>" 表示匹配所有地址 "matches": ["<all_urls>"], // js按需加载顺序注入 "js": ["content.js"] }, // 可访问Web的资源 "web_accessible_resources": ["*.html"], // 定义触发扩展事件的快捷键 "commands": { "xxx": { "suggested_key": { "default": "Ctrl+X", "mac": "Command+X", "windows": "Ctrl+X" } }, "_execute_browser_action": {...}, "_execute_page_action": {...} } // 操作快捷键后,插件后台会监听到对应的事件 // background.js // chrome.commands.onCommand.addListener(function(command) {}); // 注意: _execute_browser_action _execute_page_action 这两个命令不会被监听, 他们是触发 popup 弹出的 // ...... }