昨天我們教大家怎麼學習使用內容腳本調整CSS樣式，

但其實這樣的調整太不彈性，無法隨時調整你想要的樣式風格，

所以我們今天再往這個議題深入發展，教大家怎麼用另外一種方式注入腳本

所以來做 字體轉換器 吧！

首先需要一個UI頁面

popup.html

    <div id="app">
        <div class="row">
            <label>字體樣式:</label>
            <select id="fontStyle">
                <option value="Microsoft JhengHei">微軟正黑體</option>
                <option value="Microsoft Yahei">微軟雅黑體</option>
                <option value="DFKai-sb">標楷體</option>
                <option value="PMingLiU">新細明體</option>
                <option value="monospace">monospace</option>
                <option value="sans-serif">sans-serif</option>
            </select>
        </div>
        <div class="row">
            <div class="btn btn-blue" id="saveBtn">儲存</div>
        </div>
    </div>

並且記錄著我們每次儲存的字體，所以用chrome.cookies來管理好了，順便學一下新技術

const select = document.getElementById('fontStyle')
const save = document.getElementById('saveBtn')

//到cookies設定我們的字體
var saveFontStyle = () => {
    chrome.cookies.set({
        url: 'http://google.com',
        name: 'fontStyle',
        value: select.value
    })
    windows.close()
}

//綁定事件
save.addEventListener('click',saveFontStyle)

然後我們需要一個後台腳本監控 chrome tab 的變化，所以我們使用 onUpdated

chrome.tabs.onUpdated.addListener(tabId=>{
    //do something
})

並且搭配著 chrome.tabs.insertCSS 將CSS注入網站
而insertCSS可以載入file或code，而我們只有一行就直接用code吧
然後從chrome.cookies裡取得的資料直接放到code裡面

chrome.tabs.onUpdated.addListener(tabId => {
    chrome.cookies.get(
        {
            url: 'http://google.com',
            name: 'fontStyle'
        },
        data => {
            chrome.tabs.insertCSS(tabId, {
                code: ` * { font-family : "${data.value}"; }`
            })
        }
    )
})

實測結果

超簡單，就達到動態注入的功能拉！當然，如果要做得很詳細還有很多細節，如果有興趣可以再更深涉獵囉。

參考文獻：

• chrome.insertCSS
• chrome.cookies