寫一個 Chrome 擴展之 Flat Weibo —— 簡潔你的微博世界

fredshare 發布于2019-08-19 17:59 / 1363人閱讀

摘要：一般而言，擴展會對用戶瀏覽的頁面進行相應的操作和一些數據傳遞，本案例的本質是，當用戶瀏覽網頁版微博時，擴展會向當前頁面注入預先寫好的，這樣便對微博網頁版進行了樣式重構。采用這樣的方法依次處理所有你不想看到的元素，你的微博便會簡潔很多。

0x00. 前言

微博現在也是變得越來越臃腫，廣告越來越多，早已不再是“微”博了，這讓微博深度用戶的我感到十分焦灼。由于之前就嘗試寫過 Chrome 插件，于是便想到了這樣的解決方案。Flat Weibo，簡潔你的微博！

0x01. 概覽

去除兩邊的各種推薦

去除部分廣告

重置頂部導航樣式

修改背景

修改微博流樣式

其他

0x02. 下載 & 安裝 下載

Chrome 應用商店
百度云

安裝

由于 Chrome 目前禁止第三方插件的安裝，所以需在 Chrome 里依次點擊菜單 更多工具 擴展程序 然后打開 開發者模式，將插件拖進來然后會自動安裝。

安裝成功后插件即生效，更多自定義功能稍后便來 ~

0x03. 寫一個 Chrome 擴展 源碼

GitHub - Flat Weibo

Chrome 擴展是什么？

Chrome 擴展允許你在 Chrome 中使用 JavaScript 來對網頁、瀏覽器、本地存儲等內容進行訪問和更改，對應的 Firefox 也有自己的擴展程序。本文章的擴展只針對 Chrome 而言。

Chrome 擴展是一系列文件的集合，這些文件包括 HTML 文件、CSS 樣式文件、JavaScript 腳本文件、圖片等靜態文件以及 manifest.json（清單文件）。

擴展被安裝后，Chrome 就會讀取擴展中的 manifest.json 文件。這個文件的文件名固定為 manifest.json，內容是按照一定格式描述的擴展相關信息，如擴展名稱、版本、更新地址、請求的權限、擴展的 UI 界面入口等等。這樣 Chrome 就可以知道在瀏覽器中如何呈現這個擴展，以及這個擴展如何同用戶進行交互。

一般而言，Chrome 擴展會對用戶瀏覽的頁面進行相應的 DOM 操作和一些數據傳遞，本案例 Flat Weibo 的本質是，當用戶瀏覽網頁版微博時，Chrome 擴展會向當前頁面注入預先寫好的 CSS，這樣便對微博網頁版進行了樣式重構。

manifest.json（清單文件）

每個 Chrome 擴展都包含一個 manifest 文件，Chrome 會從該文件中讀取本擴展的相關信息，是擴展的入口。

{
  "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"         // 點擊按鈕呈現的頁面
  },
  "content_scripts": [                    // 被注入的腳本
    {
      "matches": [                        // 匹配被注入的條件
        "*://weibo.com/*",
        "*://www.weibo.com/*"
      ],
      "css": [                            // 被注入的 css
        "css/flat-weibo.css"
      ]
    }
  ]
}

更多關于清單文件的介紹請訪問

http://open.chrome.360.cn/extension_dev/...

http://www.ituring.com.cn/article/60136

css

本擴展的核心部分便是被注入到頁面中的 CSS，核心思想是分析頁面 DOM 結構，編寫新樣式，進行注入。

如上圖所示，兩個紅框標出了一些我們不愿意看到的東西，我們先分析一下這兩部分的 DOM 結構。

我們可以看到這個煩人的推薦位所對應的節點為 .send_weibo .key，既然拿到了 DOM 節點，就可以這么寫：

.send_weibo .key {
  display: none;
}

是不是很簡單，很機智呢，直接讓我們不想看到的東西隱藏就好了！

同樣的，我們審查一下右側推薦位的 DOM 結構。

于是

#v6_pl_rightmod_rank {
  display: none;
}

處理之后就是這個樣子，我們看到 #v6_pl_rightmod_rank 的 Styles 中出現了一個標有 injected stylesheet 的樣式（中間紅框），這個便是我們在 Chrome 擴展中向頁面注入的 CSS。同樣的我們看到左邊紅框和 #v6_pl_rightmod_rank 同級有許多 div 標簽，采用同樣的方法就可以讓右側只剩下個人信息了。

采用這樣的方法依次處理所有你不想看到的元素，你的微博便會簡潔很多。由于需要更改的樣式比較復雜，因此使用了 SASS 進行預處理 CSS，也因此使用了 gulp 來進行自動化構建。

本例中的 scss 在這里

SASS 是一個 CSS 預處理器，它允許選擇器嵌套、使用一些簡單的邏輯運算進行編寫 CSS，功能十分強大，但語法也很簡單。
gulp 是一個前端自動化構建工具，有豐富的插件供你使用，本例中便使用 gulp-sass 來編譯 scss，使用 gulp-autoprefixer 給 css 添加瀏覽器前綴
sass 入門/gulp.js 入門

開發 & 構建

安裝依賴

npm install

開發

npm run dev

構建

npm run build

0x04. TODO

添加自定義主題色

添加更改布局

添加模塊顯示/隱藏選擇

0x05. 學習參考資料

Chrome 擴展及應用開發
Chrome 開發文檔中文版

GPU云服務器云服務器 php 簡潔之道擴展你的微博微博?爬取數據

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/79041.html

selenium跳過webdriver檢測并爬取淘寶我已購買的寶貝數據

摘要：簡介上一個博文已經講述了如何使用跳過檢測并爬取天貓商品數據，所以在此不再詳細講，有需要思路的可以查看另外一篇博文。簡介上一個博文已經講述了如何使用selenium跳過webdriver檢測并爬取天貓商品數據，所以在此不再詳細講，有需要思路的可以查看另外一篇博文。源代碼 # -*- coding: utf-8 -*- from selenium import webdr...

banana_pi 2019-07-31 10:10 評論0 收藏0
目前可用的微博秀的嵌入方法大全(親測2019年2月仍有效)

摘要：對于第個問題，為使得微博秀既能在和形式分別對應于和，方法也很簡單。將微博的版本應用到微博秀上，直接使用微博官方提供的來解決，該方法微博的組件接口中贊同就是類似的參看網頁末尾。當今最全面可用的微博分享組件嵌入方法(親測2019年2月仍有效) 最近一直在找一種目前可用的微博分享組件的使用方法，發現有3個大坑：向網頁嵌入微博秀時，需要的uid簡單，但需要的verifier值有點難獲取，...

luckyyulin 2019-08-23 15:11 評論0 收藏0
微博爬蟲“免登錄”技巧詳解及Java實現

摘要：現在的微博即便在不登錄的狀態下，依然可以看到很多微博信息流，而我們的落腳點就在這里。本文詳細介紹如何獲取相關的并重新封裝達到免登錄的目的，以支持微博上的各項數據抓取任務。本文源地址：http://www.fullstackyang.com/...，轉發請注明該地址或segmentfault地址，謝謝！一、微博一定要登錄才能抓取？目前，對于微博的爬蟲，大部分是基于模擬微博賬號登錄的...

mmy123456 2019-08-16 10:48 評論0 收藏0
selenium跳過webdriver檢測并模擬登錄淘寶

摘要：是一款優秀的自動化測試工具，所以現在采用進行半自動化爬取數據，支持模擬登錄淘寶和自動處理滑動驗證碼。編寫思路由于現在大型網站對工具進行檢測，若檢測到，則判定為機器人，訪問被拒絕。以開頭的在中表示類名，以開頭的在中表示名。簡介模擬登錄淘寶已經不是一件新鮮的事情了，過去我曾經使用get/post方式進行爬蟲，同時也加入IP代理池進行跳過檢驗，但隨著大型網站的升級，采取該策略比較難實現了...

tulayang 2019-07-31 10:09 評論0 收藏0
Python3網絡爬蟲實戰---35、 Ajax數據爬取

摘要：所以說，我們所看到的微博頁面的真實數據并不是最原始的頁面返回的，而是后來執行后再次向后臺發送了請求，拿到數據后再進一步渲染出來的。結果提取仍然是拿微博為例，我們接下來用來模擬這些請求，把馬云發過的微博爬取下來。上一篇文章：Python3網絡爬蟲實戰---34、數據存儲：非關系型數據庫存儲:Redis下一篇文章：Python3網絡爬蟲實戰---36、分析Ajax爬取今日頭條街拍美圖 ...

Thanatos 2019-07-31 10:36 評論0 收藏0