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