chrome插件开发入门
前言
chrome浏览器深受广大用户的喜爱，其扩展性对于开发者来说更加是经常会接触到的，平时用到很多的插件，一方面帮助自己提高了工作的效率，本小节来学习一下chrome插件开发入门篇
在应用商店中下载下来的插件基本上都是以.crx为文件后缀，该文件其实就是一个压缩包，包括插件所需要的html、css、javascript、图片资源等等文件
chrome插件开发的课程：
https://www.w3cschool.cn/kesyi/kesyi-m5uo24rx.html
视频地址：
https://www.bilibili.com/video/BV167411R7KX/?spm_id_from=autoNext
环境准备
- 开发工具：vscode
- chrome浏览器的拓展程序中打开"开发者模式"
manifest.json
{
// 清单文件的版本，这个必须写，而且必须是2
"manifest_version": 2,
// 插件的名称
"name": "demo",
// 插件的版本
"version": "1.0.0",
// 插件描述
"description": "简单的Chrome扩展demo",
// 图标，一般偷懒全部用一个尺寸的也没问题
"icons":
{
"16": "img/logo.jpg",
"48": "img/logo.jpg",
"128": "img/logo.jpg"
},
// 浏览器右上角图标设置，browser_action、page_action、app必须三选一
"browser_action":
{
"default_icon": "img/logo.jpg",
// 图标悬停时的标题，可选
"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": ["http://*/*", "https://*/*"],
// "<all_urls>" 表示匹配所有地址
"matches": ["https://blog.csdn.net/*"],
// 多个JS按顺序注入
"js": ["custom.js"],
// JS的注入可以随便一点，但是CSS的注意就要千万小心了，因为一不小心就可能影响全局样式
"css": ["custom.css"],
"run_at": "document_end"
}
],
// 权限申请
"permissions":
[
"tabs"// 标签
]
}custom.js
console.log(document.title);
document.querySelector('aside').innerHTML="";
document.querySelector('main').style.width="100%";custom.css中暂时没有内容
popup.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>测试demo</div>
</body>
</html>img文件夹中存放图标
导入到chrome中
打开chrmoe插件拓展
直接将以上文件所在的文件夹直接拖到扩展程序页面即可
测试
可以看到左边栏成功的去掉了
因时间有限，后续有时间再深入了解学习吧
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2022-06-12，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
