chrome插件开发(Demo案例)

最新推荐文章于 2024-07-26 11:41:15 发布

石庆SQ

最新推荐文章于 2024-07-26 11:41:15 发布

阅读量1.5k

点赞数

分类专栏：前端文章标签： google chrome javascript

本文链接：https://blog.csdn.net/weixin_44352179/article/details/105864922

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

前言

- 最近由于开发需要所以用到了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样式，这里做一个页面中显示插件并操作。
js代码

具体css样式根据自己的喜爱编写
在这里插入图片描述
这样自己的插件就添加到页面了；

石庆SQ

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
chrome插件开发(Demo案例)

前言- 最近由于开发需要所以用到了chrome的自定义插件的开发。所以写下这篇博文希望能对大家有一点点帮助。核心内容manifest.json这是一个Chrome插件最重要也是必不可少的文件，用来配置所有和插件相关的配置，必须放在根目录。常见的配置：{ // 插件的名称 "name": "TestDemo", // 插件的版本 "version": "1.0....
复制链接

扫一扫

专栏目录