关注 “弋凡”（YiFan）微信公众号吧 记录简单笔记 做你的最爱

关于Chrome Extension

Chrome Extension 浏览器的功能扩展插件,由html、css、js和一个描述文件manifest.json组成,在浏览器中显示图标,本质上其实就是一个由html、css、js、图片等资源组成的一个.crx后缀的压缩包

Chrome API
manifest.json
消息交互
网页和Chrome插件之间的通信

大致流程(个人理解)

1. 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 弹出的
       // ......  
   }
   

快来关注“弋凡”微信公众号吧