!!本文先介绍插件的几个核心知识点,再从项目实战的角度深刻记忆它。
简介谷歌浏览器右上角的扩展插件(ChromeExtension)实际上是是更底层的浏览器功能扩展。Chrome插件是一个用Web技术开发、用来增强浏览器功能的软件,它其实就是一个由HTML、CSS、JS、图片等资源组成的一个.crx后缀的压缩包。
核心介绍manifest.json这是一个Chrome插件最重要也是必不可少的文件,用来配置所有和插件相关的配置,必须放在根目录。其中,manifest_version、name、version3个是必不可少的,description和icons是推荐的。
下面给出的是一些常见的配置项,均有中文注释,完整的配置文档请戳这里。
{//清单文件的版本,这个必须写,而且必须是2"manifest_version":2,//插件的名称"name":"demo",//插件的版本"version":"1.0.0",//插件描述"description":"简单的Chrome扩展demo",//图标,一般偷懒全部用一个尺寸的也没问题"icons":{"16":"img/icon.png","48":"img/icon.png","":"img/icon.png"},//会一直常驻的后台JS或后台页面"background":{//2种指定方式,如果指定JS,那么会自动生成一个背景页"page":"background.html"//"scripts":["js/background.js"]},//浏览器右上角图标设置,browser_action、page_action、app必须三选一"browser_action":{"default_icon":"img/icon.png",//图标悬停时的标题,可选"default_title":"这是一个示例Chrome插件","default_popup":"popup.html"},//当某些特定页面打开才显示的图标/*"page_action":{"default_icon":"img/icon.png","default_title":"我是pageAction","default_popup":"popup.html"},*///需要直接注入页面的JS"content_scripts":[{//"matches":["