Update button title when enabled/disabled.

src/PageActionButton.js

@@ -7,8 +7,10 @@
  *   - options.icon: Tab => either a string (the icon path), or null (to get the
  *     default icon from the manifest), or an object (with path or imageData, see
  *     docs of browser.pageAction.setIcon).
- *   - options.onClicked: Tab => void (or Promise of void); run on click, after
- *     which the button state is automatically updated on all tabs.
+ *   - options.title: Tab => string (to use as button tooltip), or null (to use
+ *     default title from the manifest)
+ *   - options.onClicked: Tab => void; executed on click, after which the button
+ *     state is automatically updated on all tabs.
  *
  * Returns an object with the following methods:
  *   - update(tab?): update visibility, icons, etcetera of a given tab, or of
@@ -18,6 +20,7 @@
  *   const pageActionButton = PageActionButton({
  *     visible: tab => tab.url.startsWith('https'),
  *     icon: tab => isEnabled(tab.url) ? '/icon_enabled.svg' : '/icon_disabled.svg',
+ *     title: tab => isEnabled(tab.url) ? 'Disable' : 'Enable',
  *     onClicked: tab => toggleEnabled(tab.url),
  *   })
  *   // Manually trigger an update of a tab.
@@ -30,6 +33,7 @@ import browser from 'webextension-polyfill'
 export default function PageActionButton({
   visible = tab => true,
   icon = tab => null,
+  title = tab => null,
   onClicked = tab => {},
 }) {
   async function setIcon(tab) {
@@ -43,9 +47,17 @@ export default function PageActionButton({
     })
   }
 
+  async function setTitle(tab) {
+    browser.pageAction.setTitle({
+      title: await title(tab),
+      tabId: tab.id,
+    })
+  }
+
   async function checkTab(tab) {
     if (await visible(tab)) {
       setIcon(tab)
+      setTitle(tab)
       browser.pageAction.show(tab.id)
     } else {
       browser.pageAction.hide(tab.id)

src/background_script.js

@@ -5,5 +5,6 @@ import { toggleEnabled, isEnabled, onEnabledChange } from './perOrigin'
 
 const pageActionButton = PageActionButton({
   icon: async tab => (await isEnabled(tab.url)) ? '/icon_enabled.svg' : '/icon_disabled.svg',
+  title: async tab => (await isEnabled(tab.url)) ? 'Unhide banners' : 'Hide banners',
   onClicked: async tab => toggleEnabled(tab.url),
 })