今天我們要來學內容腳本(content_script)，內容腳本就是一個可以把js與css嵌入到其他網站中的功能，

根據官方說明，可以套用的chrome.api的功能為下

• i18n
• storage
• runtime:
  • connect
  • getManifest
  • getURL
  • id
  • onConnect
  • onMessage
  • sendMessage

所以其他的就必須要靠runtime與後台腳本溝通。

接下來是manifest的寫法
manifest.json

"content_scripts": [ 
    {
      "matches": ["*://*.youtube.com/*"],
      "js": ["content_script/base_script.js"],
      "css": ["content_script/style.css"]
    }
]

補上js與css以外的一些常用參數介紹

• matches - 必填，決定此腳本會注入到哪些網站。
• exclude_matches - 排除的網站不會注入腳本。
• match_about_blank - 決定是否會允許 about:blank 注入此腳本，默認為false
• run_at - 腳本注入的時機，默認為idle
  • document_idle - 將會在document_end及window.onload之間執行，取決於文檔與程式的複雜程度
  • document_start - 將會在所有css載入而dom還未渲覽之前注入
  • document_end - 將在dom都被載入以後注入
• all_frames - 是否在所有frame都載入，還是只有頂層的frame(主網頁)注入，默認為false

所以我們今天來試做一個簡單的--如何修改Youtube風格--

首先先修改manifest權限與注入規則，因為我們只需要修改風格所以只需要注入CSS即可

manifest.json

"content_scripts": [
    {
      "matches": ["*://*.youtube.com/*"],
      "css": ["content_script/style.css"]
    }
]

然後我們到css隨便打個code測試一下是否正常運作

content_script/style.css

*{
    font-family: '標楷體';
}

我們打開youtube來看一下，挖，全部字體都改變了

首頁一直出現蛇丸的影片，就乾脆截進來了...

接下來我們就可以用F12去抓到 youtube 的 dom class 以及 id ,然後依照自己想要的風格設定CSS囉
ex:

content_script/style.css

//首頁上方
#masthead>#container{
    background: #41B883;
}
//左方menu
#sections{
    background: #344951;
}
//清單文字顏色
.ytd-guide-entry-renderer{
    color: #41B883 !important;
}

登登，結果出爐，Vue色系的清單就誕生了

如果大家有興趣再試試看更多的CSS吧！為自己布置網站吧！