Replaced browser_action with a page_action

src/background.ts

@@ -1,10 +1,27 @@
 import browser from 'webextension-polyfill';
 
-let awaitingResponse = false
+interface State {
+  awaitingResponse: boolean
+  feedUrl: string | null
+}
+
+const state: State = {
+  awaitingResponse: false,
+  feedUrl: null,
+}
+
+const getActiveTab = async () => {
+  const [tab] = await browser.tabs.query({
+    active: true,
+    currentWindow: true
+  })
+
+  return tab
+}
 
 const onFeedDownloaded = (req: XMLHttpRequest) => {
   return async () => {
-    awaitingResponse = false
+    state.awaitingResponse = false
     if (req.status >= 400) {
       console.error(
         `Could not load URL feed: ${req.responseURL}: ` +
@@ -14,11 +31,7 @@ const onFeedDownloaded = (req: XMLHttpRequest) => {
       return
     }
 
-    const [tab] = await browser.tabs.query({
+    const tab = await getActiveTab()
-      active: true,
-      currentWindow: true
-    })
-
     if (!tab || tab.id === -1)
       return
 
@@ -32,7 +45,7 @@ const onFeedDownloaded = (req: XMLHttpRequest) => {
 }
 
 const renderFeed = (url: string) => {
-  awaitingResponse = true
+  state.awaitingResponse = true
   const req = new XMLHttpRequest()
   req.onload = onFeedDownloaded(req)
   req.open('GET', url)
@@ -40,9 +53,28 @@ const renderFeed = (url: string) => {
   req.send()
 }
 
+const updateFeedUrl = (tabId: number, feedUrl: string | null) => {
+  if (!feedUrl?.length) {
+    browser.pageAction.hide()
+    state.feedUrl = null
+  } else {
+    browser.pageAction.show(tabId)
+    state.feedUrl = feedUrl
+  }
+}
+
+browser.pageAction.onClicked.addListener(
+  async () => {
+    if (state.feedUrl?.length)
+      renderFeed(state.feedUrl)
+  }
+)
+
 browser.webNavigation.onCompleted.addListener(
-  async (event: {tabId: Number}) => {
+  async (event: {tabId: number}) => {
     const { tabId } = event
+    const feedUrl = await browser.tabs.sendMessage(tabId, {type: 'extractFeedUrl'})
+    updateFeedUrl(tabId, feedUrl)
     await browser.tabs.sendMessage(tabId, {type: 'renderFeed'})
   }
 )
@@ -52,7 +84,7 @@ browser.webRequest.onHeadersReceived.addListener(
     url: string,
     responseHeaders: Array<{name: string, value: string}>
   }) => {
-    if (awaitingResponse)
+    if (state.awaitingResponse)
       return
 
     const {url, responseHeaders} = event

src/main.ts

@@ -177,7 +177,7 @@ const extractFeedUrl = () => {
 browser.runtime.onMessage.addListener(
   async (
     message: {
-      type: Object,
+      type: string,
       url: string,
       document: string,
     }

src/manifest_v2.json

@@ -3,9 +3,13 @@
   "description": "An easy way to render RSS feeds directly in your browser",
   "version": "0.1.2",
   "manifest_version": 2,
-  "browser_action": {
+  "page_action": {
-    "default_title": "Feed Viewer",
+    "default_icon": {
-    "default_popup": "popup/index.html"
+      "16": "assets/icon-gray-16.png",
+      "48": "assets/icon-gray-48.png",
+      "128": "assets/icon-gray-128.png"
+    },
+    "default_title": "Detected an RSS/Atom feed"
   },
   "icons": {
     "16": "assets/icon16.png",

src/manifest_v3.json

@@ -3,14 +3,13 @@
   "description": "An easy way to render RSS feeds directly in your browser",
   "version": "0.1.2",
   "manifest_version": 3,
-  "action": {
+  "page_action": {
-    "default_title": "Feed Viewer",
-    "default_popup": "popup/index.html",
     "default_icon": {
-      "16": "assets/icon16.png",
+      "16": "assets/icon-gray-16.png",
-      "48": "assets/icon48.png",
+      "48": "assets/icon-gray-48.png",
-      "128": "assets/icon128.png"
+      "128": "assets/icon-gray-128.png"
-    }
+    },
+    "default_title": "Detected an RSS/Atom feed"
   },
   "background": {
     "service_worker": "background.ts",

src/popup/Popup.vue

@@ -1,34 +0,0 @@
-<template>
-  <div class="popup">
-    <div v-if="feedUrl">
-      <a :href="feedUrl" target="_blank">Found a feed URL</a>
-    </div>
-    <div v-else>
-      No feed URLs found on this page
-    </div>
-  </div>
-</template>
-
-<script>
-import browser from 'webextension-polyfill';
-
-export default {
-  name: 'Popup',
-  data() {
-    return {
-      feedUrl: null,
-    }
-  },
-
-  async mounted() {
-    const [tab] = await browser.tabs.query({ active: true, currentWindow: true })
-    this.feedUrl = await browser.tabs.sendMessage(tab.id, {type: 'extractFeedUrl'})
-  },
-}
-</script>
-
-<style scoped>
-.popup {
-  padding: 1em;
-}
-</style>

src/popup/index.html

@@ -1,11 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="UTF-8">
-  <title>RSS Viewer Popup</title>
-</head>
-<body style="min-width: 200px;">
-  <div id="app"></div>
-  <script type="module" src="./main.ts"></script>
-</body>
-</html>

src/popup/main.ts

@@ -1,5 +0,0 @@
-import { createApp } from "vue";
-import App from "./Popup.vue";
-
-const app = createApp(App)
-app.mount('#app')