Use declarativeContent API to show/hide page action

Author: sudonatalie

js/background.js

@@ -1,16 +1,14 @@
+const boardUrl = 'trello.com/b/';
+
 chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
   // Match Trello board pages only
-  var regex = new RegExp(/.*:\/\/trello\.com\/b\/.*/);
-  var match = regex.exec(tab.url);
+  const match = tab.url.includes(boardUrl);
 
   // Setup page for layout changes and show page action
   if (match) {
     chrome.tabs.executeScript(null, {
       file: 'js/setup-css.js'
     });
-    chrome.pageAction.show(tabId);
-  } else {
-    chrome.pageAction.hide(tabId);
   }
 });
 
@@ -19,3 +17,20 @@ chrome.pageAction.onClicked.addListener(function(tab) {
     file: 'js/toggle-layout.js'
   });
 });
+
+chrome.runtime.onInstalled.addListener(function(details) {
+  chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
+    chrome.declarativeContent.onPageChanged.addRules([{
+      conditions: [
+        new chrome.declarativeContent.PageStateMatcher({
+          pageUrl: {
+            urlContains: boardUrl
+          }
+        })
+      ],
+      actions: [
+        new chrome.declarativeContent.ShowPageAction()
+      ]
+    }]);
+  });
+});

manifest.json

@@ -15,6 +15,7 @@
   },
   "permissions": [
     "*://trello.com/b/*",
+    "declarativeContent",
     "tabs",
     "storage"
   ],