前言
- 最近由于开发需要所以用到了chrome的自定义插件的开发。所以写下这篇博文希望能对大家有一点点帮助。
核心内容
manifest.json这是一个Chrome插件最重要也是必不可少的文件，用来配置所有和插件相关的配置，必须放在根目录。常见的配置：
{// 插件的名称"name": "TestDemo",// 插件的版本"version": "1.0.0",// 插件描述"description": "用于测试",// 图标使用尺寸"icons": {"16": "img/icon.png","48": "img/icon.png","128": "img/icon.png"},// 浏览器右上角图标设置，browser_action、page_action、app必须三选一"browser_action": {"default_icon": "img/icon.png",// 图标悬停时的标题，可选"default_title": "TestDemo",//点击图标显示的页面"default_popup": "devtools.html"},"content_scripts": [{"matches": [ "<all_urls>" ],// 多个JS按顺序注入// JS的注入可以随便一点，但是CSS的注意就要千万小心了，因为一不小心就可能影响全局样式"js": [ "js/jquery-1.8.3.js", "js/ceshi.js" ],"css": [ "css/custom.css" ],// 代码注入的时间，可选值： "document_start", "document_end", or "document_idle"，最后一个表示页面空闲时，默认document_idle"run_at": "document_start"}],// 清单文件的版本，这个必须写，而且必须是2//一般会写在最后，防止报错"manifest_version": 2}
简单的常见配置json文件配置成功了；
制作用于显示浏览器右上角点击显示的页面：devtools.html
<html><head></head><body><h1>Hello Testdemo:这是一个测试插件页面</h1></body></html>
现在可以上传看一下效果：
点击右上角设置=》找到更多工具=》找到扩展程序
打开开发者模式按钮，点击加载已解压的扩展程序找到文件夹选中；
如果要具体做一个页面内显示的插件，则需要写JavaScript的代码和CSS样式，这里做一个页面中显示插件并操作。
具体css样式根据自己的喜爱编写
这样自己的插件就添加到页面了；
如果觉得《chrome插件开发(Demo案例)》对你有帮助，请点赞、收藏，并留下你的观点哦！
