一、概論

說這個之前先看一個段子，講的是甲方有一奇葩客戶，這客戶看一網站某些樣式很別扭不得勁，非要讓乙方修改，乍一聽沒毛病，但關鍵是這網站不是乙方家的，根本沒有修改權限，怎么辦，客戶就是上帝，上帝的要求怎么好拒絕，這時候乙方就有一神人挺身而出，寫了一個修改頁面樣式的瀏覽器插件給客戶裝上，這樣客戶只要開著這個插件瀏覽那個網站看到的就是自己想看到的樣式。其實原理就相當于將網頁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"
		},
		{
			// 因為是數組，所以可以配置多項
		}
	], 
	
	...
} 

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

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

不要慫，可以使用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瀏覽器使其生效，如果沒有錯誤的話，應該是這個樣子的：

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

三、插件實戰：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

.

總結

以上是生活随笔為你收集整理的Chrome插件笔记之content_scripts的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。