谷歌及360瀏覽器插件製作

    之前以爲瀏覽器插件有多麼高深 , 其實就是一些簡單的css和js , 就跟你打開一個網頁在F12裏面改一樣 , 瀏覽器插件 , 就是鑲嵌在頁面上但寫在頁面外的樣式和腳本.

  首先我們需要建立一個目錄 , 形式隨便 , 大體長這樣

    其中最下面那個json就是總體的配置文件 , 那個.project不用管 , 那是編輯器sublime產生的 , 不屬於插件所需文件

    res文件夾中的popup.html , 是預覽文件 , 就是如下圖所示的展示頁面 , 可以放上你的打賞諮詢累的東西 , 自己愛放啥放啥

    css js 和 img不需要多說 , 都是需要用到的資源

    首先我們來看json文件

{
	"name":"ItAdCleaner",
	"version":"1.0",
	"manifest_version":2,
	"description":"去除各大知識型網站的廣告, 擴大主體內容顯示範圍, 包括CSDN 51博客 博客園 簡書等. 過濾百度搜索的所有腳本之家的搜索結果, 還你一片清淨",
	"browser_action":{"default_popup":"res/popup.html"},
	"icons":{"128":"res/img/icon.png"},

	"content_scripts":[
		{
			"matches":["http://blog.csdn.net/*","https://blog.csdn.net/*",
			"http://lib.csdn.net/*","https://lib.csdn.net/*"],
			"js":["res/js/csdn.js"],
			"css":["res/css/csdn.css"],
			"run_at":"document_start",
			"all_frames":true
		},
		{
			"matches":["http://www.baidu.com/*","https://www.baidu.com/*"],
			"js":["res/js/jb51.js"],
			"css":["res/css/jb51.css"],
			"run_at":"document_start",
			"all_frames":true
		},
		{
			"matches":["http://www.cnblogs.com/*","https://www.cnblogs.com/*"],
			"js":["res/js/cnblogs.js"],
			"css":["res/css/cnblogs.css"],
			"run_at":"document_start",
			"all_frames":true
		},
		{
			"matches":["http://blog.51cto.com/*","https://blog.51cto.com/*"],
			"js":["res/js/51cto.js"],
			"css":["res/css/51cto.css"],
			"run_at":"document_start",
			"all_frames":true
		},
		{
			"matches":["http://www.jianshu.com/*","https://www.jianshu.com/*"],
			"js":["res/js/jianshu.js"],
			"css":["res/css/jianshu.css"],
			"run_at":"document_start",
			"all_frames":true
		}
	],
	"permissions":["<all_urls>","activeTab"]
}

    其中主要的內容就是content_scripts 中的內容 , 分別是你要操作的網址 , 需要用的js和css , 開頭說到這裏所用到的js和css , 就是你要插在頁面上的東西 , 等於間接給你的頁面添加了新的腳本和樣式 , 所以你需要改動什麼東西具體看你的需求 , 我這裏的主要功能是過濾掉各大博客的兩邊廣告模塊 , 然後把中間的主要內容放大大寬度百分百

    version是自己的版本 , 可以隨便寫

    manifest_version是瀏覽器插件類似平臺的版本 , 這裏默認爲2 , 具體升級可以關注這些瀏覽器的插件開發官方文檔

    browser_action就是自己編寫的的主題介紹頁面 , 後面會給大家介紹

    icons就是圖標了 , 我這裏只用了大小128時加載的圖片 , 還有其他的規格懶得弄

    其他的配置都沒啥 , 照着弄就行

    先拿CSDN.css爲例

.pulllog-box,
.meau-gotop-box,
aside, .infortop{
	display: none !important;
}

@media screen and (max-width:1320px) {
	.container,
	.pulllog {
		width: 100% !important;
	}
	.container main,
	.pulllog main {
		width: 100% !important;
	}
	.container main .answer-box,
	.pulllog main .answer-box {
		width: 100% !important
	}
	.container header .title-box,
	.pulllog header .title-box {
		width: 100% !important
	}
}

@media screen and (min-width:1320px) {
	.container,
	.pulllog {
		width: 100% !important
	}
	.container main,
	.pulllog main {
		width: 100% !important;
	}
	.container main .answer-box,
	.pulllog main .answer-box {
		width: 100% !important
	}
	header .title-box {
		width: 100% !important
	}
	.nodata .container {
		width: 100% !important
	}
}

@media screen and (max-width:1200px) {
	.container,
	.pulllog {
		width: 100% !important;
	}
	.container main,
	.pulllog main {
		width: 100% !important;
	}
	.container main .answer-box,
	.pulllog main .answer-box {
		width: 100% !important
	}
	.container header .title-box,
	.pulllog header .title-box {
		width: 100% !important
	}
}

.mainread{width: 100% !important;}

    css中的class id都是在頁面上找的 , 爲什麼加上!important是爲了防止被js動態改變 , 具體有沒有用還得看實際情況 . js也是一樣

 document.addEventListener('DOMContentLoaded',
 	fireContentLoadedEvent, false);

 function fireContentLoadedEvent() {
 	console.log('DOMContentLoaded');
 	//在此放置您的代碼。 
 	/*//刪除下端登錄
 	var paras = document.getElementsByClassName('pulllog-box');
 	for(i = 0; i < paras.length; i++) {
 		if(paras[i] != null)
 			paras[i].parentNode.removeChild(paras[i]);
 	}
 	//刪除左側廣告欄
 	paras = document.getElementsByTagName('aside');
 	for(i = 0; i < paras.length; i++) {
 		if(paras[i] != null)
 			paras[i].parentNode.removeChild(paras[i]);
 	}
 	paras = document.getElementsByTagName('main');
 	for(i = 0; i < paras.length; i++) {
 		if(paras[i] != null)
 			paras[i].setAttribute('style', 'width:100%');
 	}*/

 	document.getElementById('btn-readmore').click();
 	document.getElementsByClassName('pmores').click();
 }

    js中的第一句是爲了在頁面加載完成後調用方法 , 我這裏讓頁面加載完成後自動點擊加載全文按鈕 , 省時省力 , 像jb之家這樣大面積廣告的網站我直接限制了百度搜索 , 懶得看 , 如果你覺得我的腳本太簡單了 , 你可以自己花點時間寫高級的 , 可以寫一些自己要用到的網站

    話不多說 , 首先我們看沒有運用插件的情況是怎樣的

然後是啓用插件後

    這裏我做的很不人道 , 把作者都給隱藏了 , 我本來打算把作者之類的畫小一點放在旁邊 , 可是花太多時間了 , 各位有時間富裕且精通前端的看官可以試着改一改 . 還有一點不行浪費時間的原因就是這些網站一旦更新了這些標籤id class , 我又得花大量時間去重新弄 , 得不償失 .