第一次写浏览器插件--去掉那个框框(第一版）

因为在看视频嘛，每次打开那个网站总会弹出来一个悬浮框挡在那里，看的都烦，点关闭说不准那个关闭按钮是人家做出来的一个效果而已

没错就上面这种广告，自己又是学的前端，解决办法肯定有的啊，打开控制台咯，直接将包裹广告的div给删了就行了

可是，这种广告每次打开页面或者刷新又会冒出来，你总不可能每次都要这样操作吧，超麻烦，想了想就想起来这种事干嘛不用插件来做，那不就轻松了么。
诶，想了想，要是这种事还需要去扩展商店里找对应的插件，那我岂不是白学了这么久的前端开发了么。哎，乖乖去学一下插件怎么制作也好。

说干就干，从B站找到一个简单的插件制作教程，点击跳转

一开始还以为很难的，毕竟是第一次接触插件开发，但是想了想，我现在要实现的功能只是最简单的隐藏，问题应该不大，只要知道怎么写出来插件的其他部分就行，至于js运行部分，简单啦

首先是创建一个项目文件夹，然后是先创建一个manifest.json文件，该文件内容如下（正常开发肯定不止这点代码，但我需要实现的功能不难，无须太复杂的代码）：

{	
	// 插件名字
	"name":"去掉那个框框",
	// 对插件的描述
	"description":"大爷我的第一个插件",
	// 插件的图标，16、48、128这些是图标的尺寸，如果不懂，可以去阿里巴巴矢量图标库看看
	"icons":{
		"16":"kawayi16.png",
		"48":"kawayi48.png",
		"128":"kawayi128.png"
	},
	
	// 用 browser actions 可以在chrome主工具条的地址栏右侧增加一个图标。作为这个图标的延展，一个browser action图标还可以有tooltip、badge和popup。
	// "browser_action":{
	// 	"default_title":"去框框插件",
	// 	"default_icon":"logo.png"
	// },
	
	// JS主体
	"content_scripts":[
		{	
			// 指定在哪些框架中可运行
			"all_frames":true,
			// 指定引用哪些js文件
			"js":["remove.js"],
			// 指定在什么时候运行js
			"run_at":"document_end",
			// 指定什么类型的网址下运行js
			"matches":["http://*/*","https://*/*"]
		}
	],
	// 版本号
	"version":"1.0.0",
	// 这个我不懂
	"manifest_version":2
}

这个小插件的文件夹就长这样

因为我在里边写到了 kawayi16.png、kawayi48.png、kawayi128.png，这些文件从哪来的，没啥的，就是从阿里巴巴矢量图标库里随意下载了几张不同尺寸的png格式的图，那么，就差最后一个文件也就是js部分了，其实也没啥的，上代码

window.onload=function(){
	let boxs=[]
	function $(name){
		return document.querySelector(name)
	}
	boxs.push($("#HMRichBox"))
	console.log(boxs[0])
	for(let item of boxs){
		item.style.display="none"
	}
}

我的想法是，既然我做了这么一个插件，那么我肯定不止用在一个网站上面啊，那我要是只写了一个var box=document.getElementById(”HMRichBox“)，那很显然，这个插件就只能用在这个网站上而已，那还做个屁，浪费时间

行吧，那就用数组来接收不同网站里需要删除的div吧，再用for循环将它们都设置为display:none，就是这么一个思路。

至于为什么我要加上window.οnlοad=function(){}?

因为我运行了好几次一直报错，说没找到style属性，很奇怪，我在其他地方测试代码没问题啊，想了想，会不会是我这个代码加载运行的时候，那个我想隐藏的div还没开始加载，导致它并未捕获到该div，于是我就加上了这一段，结果还真是。