目 录CONTENT

文章目录

chrome插件开发入门

在水一方
2022-06-12 / 0 评论 / 0 点赞 / 99 阅读 / 2,094 字 / 正在检测是否收录...

前言

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文件夹中存放图标

image.png

导入到chrome中

打开chrmoe插件拓展
image.png

直接将以上文件所在的文件夹直接拖到扩展程序页面即可

测试

可以看到左边栏成功的去掉了

image.png

因时间有限,后续有时间再深入了解学习吧

0

评论区