之前以爲瀏覽器插件有多麼高深 , 其實就是一些簡單的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 , 我又得花大量時間去重新弄 , 得不償失 .