資訊專欄INFORMATION COLUMN
摘要：一般而言，擴(kuò)展會(huì)對(duì)用戶瀏覽的頁面進(jìn)行相應(yīng)的操作和一些數(shù)據(jù)傳遞，本案例的本質(zhì)是，當(dāng)用戶瀏覽網(wǎng)頁版微博時(shí)，擴(kuò)展會(huì)向當(dāng)前頁面注入預(yù)先寫好的，這樣便對(duì)微博網(wǎng)頁版進(jìn)行了樣式重構(gòu)。采用這樣的方法依次處理所有你不想看到的元素，你的微博便會(huì)簡(jiǎn)潔很多。
0x00. 前言
微博現(xiàn)在也是變得越來越臃腫，廣告越來越多，早已不再是“微”博了，這讓微博深度用戶的我感到十分焦灼。由于之前就嘗試寫過 Chrome 插件，于是便想到了這樣的解決方案。Flat Weibo，簡(jiǎn)潔你的微博！
0x01. 概覽去除兩邊的各種推薦
去除部分廣告
重置頂部導(dǎo)航樣式
修改背景
修改微博流樣式
其他
0x02. 下載 & 安裝 下載Chrome 應(yīng)用商店
百度云
由于 Chrome 目前禁止第三方插件的安裝，所以需在 Chrome 里依次點(diǎn)擊 菜單 更多工具 擴(kuò)展程序 然后打開 開發(fā)者模式，將插件拖進(jìn)來然后會(huì)自動(dòng)安裝。
安裝成功后插件即生效，更多自定義功能稍后便來 ~
0x03. 寫一個(gè) Chrome 擴(kuò)展 源碼GitHub - Flat Weibo
Chrome 擴(kuò)展是什么？Chrome 擴(kuò)展允許你在 Chrome 中使用 JavaScript 來對(duì)網(wǎng)頁、瀏覽器、本地存儲(chǔ)等內(nèi)容進(jìn)行訪問和更改，對(duì)應(yīng)的 Firefox 也有自己的擴(kuò)展程序。本文章的擴(kuò)展只針對(duì) Chrome 而言。
Chrome 擴(kuò)展是一系列文件的集合，這些文件包括 HTML 文件、CSS 樣式文件、JavaScript 腳本文件、圖片等靜態(tài)文件以及 manifest.json（清單文件）。
擴(kuò)展被安裝后，Chrome 就會(huì)讀取擴(kuò)展中的 manifest.json 文件。這個(gè)文件的文件名固定為 manifest.json，內(nèi)容是按照一定格式描述的擴(kuò)展相關(guān)信息，如擴(kuò)展名稱、版本、更新地址、請(qǐng)求的權(quán)限、擴(kuò)展的 UI 界面入口等等。這樣 Chrome 就可以知道在瀏覽器中如何呈現(xiàn)這個(gè)擴(kuò)展，以及這個(gè)擴(kuò)展如何同用戶進(jìn)行交互。
一般而言，Chrome 擴(kuò)展會(huì)對(duì)用戶瀏覽的頁面進(jìn)行相應(yīng)的 DOM 操作和一些數(shù)據(jù)傳遞，本案例 Flat Weibo 的本質(zhì)是，當(dāng)用戶瀏覽網(wǎng)頁版微博時(shí)，Chrome 擴(kuò)展會(huì)向當(dāng)前頁面注入預(yù)先寫好的 CSS，這樣便對(duì)微博網(wǎng)頁版進(jìn)行了樣式重構(gòu)。
manifest.json（清單文件）每個(gè) Chrome 擴(kuò)展都包含一個(gè) manifest 文件，Chrome 會(huì)從該文件中讀取本擴(kuò)展的相關(guān)信息，是擴(kuò)展的入口。
{
"manifest_version": 2, // manifest 版本，當(dāng)前只能為 2
"name": "Flat Weibo", // 擴(kuò)展名
"version": "1.0.0", // 擴(kuò)展版本號(hào)
"description": "簡(jiǎn)潔你的微博，去除煩人的微博推薦和廣告，讓微博更加扁平，更加簡(jiǎn)單明了", // 擴(kuò)展描述
"icons": { // 擴(kuò)展圖標(biāo)
"16": "img/icon/icon_16.png",
"48": "img/icon/icon_48.png",
"128": "img/icon/icon_128.png"
},
"browser_action": { // 添加圖標(biāo)按鈕至 Chrome 工具條
"default_icon": { // 圖標(biāo)
"19": "img/icon/icon_19.png",
"38": "img/icon/icon_38.png"
},
"default_title": "開啟簡(jiǎn)潔微博世界", // 按鈕標(biāo)題，鼠標(biāo)移動(dòng)至按鈕上會(huì)顯示
"default_popup": "popup.html" // 點(diǎn)擊按鈕呈現(xiàn)的頁面
},
"content_scripts": [ // 被注入的腳本
{
"matches": [ // 匹配被注入的條件
"*://weibo.com/*",
"*://www.weibo.com/*"
],
"css": [ // 被注入的 css
"css/flat-weibo.css"
]
}
]
}
css更多關(guān)于清單文件的介紹請(qǐng)?jiān)L問
http://open.chrome.#/extension_dev/...
http://www.ituring.com.cn/article/60136
本擴(kuò)展的核心部分便是被注入到頁面中的 CSS，核心思想是分析頁面 DOM 結(jié)構(gòu)，編寫新樣式，進(jìn)行注入。
如上圖所示，兩個(gè)紅框標(biāo)出了一些我們不愿意看到的東西，我們先分析一下這兩部分的 DOM 結(jié)構(gòu)。
我們可以看到這個(gè)煩人的推薦位所對(duì)應(yīng)的節(jié)點(diǎn)為 .send_weibo .key，既然拿到了 DOM 節(jié)點(diǎn)，就可以這么寫：
.send_weibo .key {
display: none;
}
是不是很簡(jiǎn)單，很機(jī)智呢，直接讓我們不想看到的東西隱藏就好了！
同樣的，我們審查一下右側(cè)推薦位的 DOM 結(jié)構(gòu)。
于是
#v6_pl_rightmod_rank {
display: none;
}
處理之后就是這個(gè)樣子，我們看到 #v6_pl_rightmod_rank 的 Styles 中出現(xiàn)了一個(gè)標(biāo)有 injected stylesheet 的樣式（中間紅框），這個(gè)便是我們?cè)?Chrome 擴(kuò)展中向頁面注入的 CSS。同樣的我們看到左邊紅框和 #v6_pl_rightmod_rank 同級(jí)有許多 div 標(biāo)簽，采用同樣的方法就可以讓右側(cè)只剩下個(gè)人信息了。
采用這樣的方法依次處理所有你不想看到的元素，你的微博便會(huì)簡(jiǎn)潔很多。由于需要更改的樣式比較復(fù)雜，因此使用了 SASS 進(jìn)行預(yù)處理 CSS，也因此使用了 gulp 來進(jìn)行自動(dòng)化構(gòu)建。
本例中的 scss 在這里
開發(fā) & 構(gòu)建SASS 是一個(gè) CSS 預(yù)處理器，它允許選擇器嵌套、使用一些簡(jiǎn)單的邏輯運(yùn)算進(jìn)行編寫 CSS，功能十分強(qiáng)大，但語法也很簡(jiǎn)單。
gulp 是一個(gè)前端自動(dòng)化構(gòu)建工具，有豐富的插件供你使用，本例中便使用 gulp-sass 來編譯 scss，使用 gulp-autoprefixer 給 css 添加瀏覽器前綴
sass 入門/gulp.js 入門
安裝依賴
npm install
開發(fā)
npm run dev
構(gòu)建
npm run build
0x04. TODO添加自定義主題色
添加更改布局
添加模塊顯示/隱藏選擇
0x05. 學(xué)習(xí)參考資料Chrome 擴(kuò)展及應(yīng)用開發(fā)
Chrome 開發(fā)文檔中文版
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/79041.html
摘要：簡(jiǎn)介上一個(gè)博文已經(jīng)講述了如何使用跳過檢測(cè)并爬取天貓商品數(shù)據(jù)，所以在此不再詳細(xì)講，有需要思路的可以查看另外一篇博文。 簡(jiǎn)介 上一個(gè)博文已經(jīng)講述了如何使用selenium跳過webdriver檢測(cè)并爬取天貓商品數(shù)據(jù)，所以在此不再詳細(xì)講，有需要思路的可以查看另外一篇博文。 源代碼 # -*- coding: utf-8 -*- from selenium import webdr...
摘要：對(duì)于第個(gè)問題，為使得微博秀既能在和形式分別對(duì)應(yīng)于和，方法也很簡(jiǎn)單。將微博的版本應(yīng)用到微博秀上，直接使用微博官方提供的來解決，該方法微博的組件接口中贊同就是類似的參看網(wǎng)頁末尾。 當(dāng)今最全面可用的微博分享組件嵌入方法(親測(cè)2019年2月仍有效) 最近一直在找一種目前可用的微博分享組件的使用方法，發(fā)現(xiàn)有3個(gè)大坑： 向網(wǎng)頁嵌入微博秀時(shí)，需要的uid簡(jiǎn)單，但需要的verifier值有點(diǎn)難獲取，...
摘要：現(xiàn)在的微博即便在不登錄的狀態(tài)下，依然可以看到很多微博信息流，而我們的落腳點(diǎn)就在這里。本文詳細(xì)介紹如何獲取相關(guān)的并重新封裝達(dá)到免登錄的目的，以支持微博上的各項(xiàng)數(shù)據(jù)抓取任務(wù)。 本文源地址：http://www.fullstackyang.com/...，轉(zhuǎn)發(fā)請(qǐng)注明該地址或segmentfault地址，謝謝！ 一、微博一定要登錄才能抓??？ 目前，對(duì)于微博的爬蟲，大部分是基于模擬微博賬號(hào)登錄的...
摘要：是一款優(yōu)秀的自動(dòng)化測(cè)試工具，所以現(xiàn)在采用進(jìn)行半自動(dòng)化爬取數(shù)據(jù)，支持模擬登錄淘寶和自動(dòng)處理滑動(dòng)驗(yàn)證碼。編寫思路由于現(xiàn)在大型網(wǎng)站對(duì)工具進(jìn)行檢測(cè)，若檢測(cè)到，則判定為機(jī)器人，訪問被拒絕。以開頭的在中表示類名，以開頭的在中表示名。 簡(jiǎn)介 模擬登錄淘寶已經(jīng)不是一件新鮮的事情了，過去我曾經(jīng)使用get/post方式進(jìn)行爬蟲，同時(shí)也加入IP代理池進(jìn)行跳過檢驗(yàn)，但隨著大型網(wǎng)站的升級(jí)，采取該策略比較難實(shí)現(xiàn)了...
摘要：所以說，我們所看到的微博頁面的真實(shí)數(shù)據(jù)并不是最原始的頁面返回的，而是后來執(zhí)行后再次向后臺(tái)發(fā)送了請(qǐng)求，拿到數(shù)據(jù)后再進(jìn)一步渲染出來的。結(jié)果提取仍然是拿微博為例，我們接下來用來模擬這些請(qǐng)求，把馬云發(fā)過的微博爬取下來。 上一篇文章：Python3網(wǎng)絡(luò)爬蟲實(shí)戰(zhàn)---34、數(shù)據(jù)存儲(chǔ)：非關(guān)系型數(shù)據(jù)庫存儲(chǔ):Redis下一篇文章：Python3網(wǎng)絡(luò)爬蟲實(shí)戰(zhàn)---36、分析Ajax爬取今日頭條街拍美圖 ...
閱讀 1868·2023-04-25 23:28
閱讀 579·2023-04-25 22:49
閱讀 2259·2021-09-27 13:34
閱讀 5229·2021-09-22 15:09
閱讀 3622·2019-08-30 12:52
閱讀 2752·2019-08-29 15:26
閱讀 666·2019-08-29 11:12
閱讀 2201·2019-08-26 12:24
