第一次寫瀏覽器外掛--去除廣告框

因為在看視訊嘛，每次開啟那個網站總會彈出來一個懸浮框擋在那裡，看的都煩，點關閉說不準那個關閉按鈕是人家做出來的一個效果而已

沒錯就上面這種廣告，自己又是學的前端，解決辦法肯定有的啊，開啟控制檯咯，直接將包裹廣告的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，於是我就加上了這一段，結果還真是。