Chrome插件筆記之content_scripts

 

1、概論

說這個以前先看一個段子，講的是甲方有一奇葩客戶，這客戶看一網站某些樣式很彆扭不得勁，非要讓乙方修改，乍一聽沒毛病，但關鍵是這網站不是乙方家的，根本沒有修改權限，怎麼辦，客戶就是上帝，上帝的要求怎麼好拒絕，這時候乙方就有一神人自告奮勇，寫了一個修改頁面樣式的瀏覽器插件給客戶裝上，這樣客戶只要開着這個插件瀏覽那個網站看到的就是本身想看到的樣式。其實原理就至關於將網頁html下載以後在客戶端經過js和css修改了樣式，而後經過瀏覽器渲染出來看到修改以後的樣式，對其餘人沒有任何影響，但就能在徹底沒有修改權限的狀況下解決了客戶的需求，從這個故事裏我獲得的啓示是腦子是個好東西，真但願我也能有一個…

在上面的故事中修改本地樣式使用到的技術相似於content_scripts，此選項用來在頁面的url符合條件時向頁面中注入js腳本或者css樣式，而且能夠設置注入的時機。不要簡單的認爲只是往頁面中追加一段js，這仍是有一些區別的，content_scripts引入的js和頁面中原有的js是隔離的，只是共享DOM。爲何這麼作呢，我想多是若是能夠訪問頁面中原js的話，用戶的不少關鍵數據都是存儲在頁面的js變量中的，那豈不是能夠用來竊取用戶的信息，因此出於安全性考慮乾脆就分家算了。

在manifest.json中配置content_scripts的寫法：

{
	...

	// 在此處使用數組往頁面中引入JS或者CSS。
	"content_scripts": 
	[
		{
			// 當matches返回true時纔會注入
			// 好比 ["http://foo.com/bar/*", "https://foobar.com/bar/*"] 
			// 表示在foobar.com下的bar路徑下會發生注入
			// 一個特殊的值： "<all_urls>" 表示匹配全部地址
			"matches": ["<all_urls>"],
			// 多個JS會按照配置的順序引入到頁面
			"js": ["js/jquery-1.8.3.js", "js/content-script.js"],
			// 多個CSS會按照配置的順序引入到頁面
			"css": ["foo/bar.css"],
			// 在什麼時機引入到頁面，三個可選擇的值： "document_start"、"document_end"、"document_idle"
			// 默認document_idle。
			// 這個很重要，好比若是引入的JS中使用到了onload就要選擇document_start，不然會錯過事件
			// 可是若是沒有相似的事件的話最好保持默認值document_idle，這樣不對原頁面的加載速度產生影響
			"run_at": "document_idle"
		},
		{
			// 由於是數組，因此能夠配置多項
		}
	], 
	
	...
} 

 

2、插件實戰：修改百度首頁樣式

假設（希望不要）很不幸碰到一個蠻不講理的客戶，非要你把百度首頁的搜索按鈕樣式由藍底修改爲黑底的否則就跟領導投訴你：

 

不要慫，可使用content_scripts來解決這個問題。

首先編寫一個樣式文件custom-style.css：

#su {
	border-bottom: none !important;
	background: black !important;
}

而後編寫對應的manifest.json：

{
    "manifest_version": 2,
    "name": "change-btn-color",
    "version": "1.0.0",
    "description": "change baidu search submit button color.",
    "content_scripts": 
    [
        {
            "matches": ["https://www.baidu.com/", "http://www.baidu.com/"],
            "js": [],
            "css": ["./custom-style.css"],
            "run_at": "document_idle"
        }
    ]
}

兩個文件放在同一個文件夾change-baidu-btn-color下，目錄結構以下：

 

而後打開Chrome的擴展程序管理頁面，勾選「開發者模式」，將這個插件加載到Chrome瀏覽器使其生效，若是沒有錯誤的話，應該是這個樣子的：

而後再打開百度首頁，發現按鈕的顏色已經變成了黑底的：

 

 

3、插件實戰：CSDN自動點擊「閱讀更多」按鈕

我通常會去csdn看一些博客，博客嘛通常都會有點長，不知道從何時csdn的產品經理抽風設計了長博客自動摺疊的功能，我不知道csdn的產品經理對自家產品的定位是什麼，我只知道我通常都是使用百度搜索問題時有csdn的博客給出瞭解決方案纔會點進去，一般這種狀況我都會先將滾動條從上到下拉一下對整篇文章有個概覽，評估一下閱讀成本，包括字數、代碼排版、贊踩比、評論等等來決定要不要閱讀此篇博客，若是我問題急着解決八成沒心思讀幾萬字的解決方案，可是默認摺疊使得我每次都要多點一下這個按鈕才能看得博客真面目：

因此我就想，能夠寫一個插件幫我作這件事，每次在CSDN詳情頁的時候都幫我自動點一下這個按鈕。

仍是以前的套路，先編寫auto-click-read-more-btn.js，內容只有一行，就是獲取按鈕並單擊：

document.getElementById("btn-readmore").click();

而後是manifest.json文件：

{
    "manifest_version": 2,
    "name": "csdn-auto-click-read-more-btn",
    "version": "1.0.0",
    "description": "csdn auto click read more button.",
    "content_scripts": 
    [
        {
            "matches": ["*://blog.csdn.net/*/article/details/*"],
            "js": ["./auto-click-read-more-btn.js"],
            "css": [],
            "run_at": "document_idle"
        }
    ]
}

結構以下：

將其加載到Chrome瀏覽器使其生效。

再打開一個內容比較長的博客，好比https://blog.csdn.net/mmwwxx123/article/details/81334287，點進去就可以直接看到文章的全部內容：

 

仔細觀察的話會發現頁面下載的時候是摺疊的，當插件加載後自動單擊「閱讀更多」按鈕展開纔看到全文。

 

 

相關資料：

1. Content Scripts

 

.