Use insertCss API over manually injecting via JS

Author: sudonatalie

js/background.js

@@ -6,6 +6,9 @@ chrome.webNavigation.onHistoryStateUpdated.addListener(function(details) {
 
   // Setup page for layout changes and show page action
   if (match) {
+    chrome.tabs.insertCSS(null, {
+      file: 'css/layout.css'
+    });
     chrome.tabs.executeScript(null, {
       file: 'js/init.js'
     });

js/init.js

@@ -1,17 +1,3 @@
-function insertCss() {
-  const cssFile = chrome.extension.getURL('css/layout.css');
-  const cssId = 'layoutcss';
-
-  if (document.getElementById(cssId) === null) {
-    let css = document.createElement('link');
-    css.id = cssId;
-    css.type = 'text/css';
-    css.rel = 'stylesheet';
-    css.href = cssFile;
-    document.getElementsByTagName('head')[0].appendChild(css);
-  }
-}
-
 function syncState() {
   chrome.storage.sync.get('classList', function(result) {
     let board = document.getElementById('board');
@@ -45,5 +31,4 @@ function toggleLayout() {
   }
 }
 
-insertCss();
 syncState();

manifest.json

@@ -19,9 +19,6 @@
     "storage",
     "webNavigation"
   ],
-  "web_accessible_resources": [
-    "css/layout.css"
-  ],
   "page_action": {
     "default_title": "List Layouts for Trello"
   },