Chrome extension 讓 content script 加載 css

content script 載入 css

方法1 - 直接載 cdn 檔案

• Load cdn css directly from content script

  function loadCss(href) {
    const link = document.createElement('link')
    link.rel = 'stylesheet'
    link.href = href
    document.getElementsByTagName('head')[0].appendChild(link)
  }
  loadCss(
    'https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons',
  )
  

缺點

• 若是該網站 csp 很嚴格，會被擋。

方法2 - Extension 本地加載

打包到 extension 後，再用 script 載入。

• 把檔案放到專案下，以 mdi 為例

  $ tree -d mdi
  mdi
  ├── LICENSE
  ├── fonts
  │   ├── MaterialIcons-Regular.eot
  │   ├── MaterialIcons-Regular.ttf
  │   ├── MaterialIcons-Regular.woff
  │   └── MaterialIcons-Regular.woff2
  ├── material-design-icons.css
  └── material-design-icons.css.map
  

• Add paths to manifest.json

  {
    ...
    "web_accessible_resources": [
      "mdi/*"
    ]
  }
  

• load the css by content script

  function loadCss(href) {
    const link = document.createElement('link')
    link.rel = 'stylesheet'
    link.href = href
    document.getElementsByTagName('head')[0].appendChild(link)
  }
  function loadExtCss(path) {
    loadCss(browser.runtime.getURL(path))
  }
  loadExtCss('/mdi/material-design-icons.css')
  

缺點

• 相較於 cdn 方法，包會變大