Added support for extraction of feed URLs from the current page in the popup

This commit is contained in:
Fabio Manganiello 2022-12-04 15:29:48 +01:00
parent 67896b2380
commit f065860edb
5 changed files with 63 additions and 12 deletions

View file

@ -136,10 +136,7 @@ const getFeedRoot = () => {
return root return root
} }
browser.runtime.onMessage.addListener(async (message: {type: Object}) => { const renderFeed = () => {
if (message.type !== 'renderFeed')
return
const xmlDoc = getFeedRoot() const xmlDoc = getFeedRoot()
if (!xmlDoc) if (!xmlDoc)
// Not an RSS feed // Not an RSS feed
@ -151,4 +148,33 @@ browser.runtime.onMessage.addListener(async (message: {type: Object}) => {
browser.storage.local.set(parseFeed(channel)) browser.storage.local.set(parseFeed(channel))
window.location.href = browser.runtime.getURL('viewer/index.html') window.location.href = browser.runtime.getURL('viewer/index.html')
}
const extractFeedUrl = () => {
const links = Array.from(document.getElementsByTagName('link'))
.filter((link) =>
link.getAttribute('rel') === 'alternate' &&
link.getAttribute('type') === 'application/rss+xml'
)
if (!links.length)
return
let link = links[0].getAttribute('href') || ''
if (link.length && !link.match(/^https?:\/\//)) {
let port = window.location.port
if (port.length)
port = `:${port}`
link = `${window.location.protocol}//${window.location.hostname}${port}${link}`
}
return link.length ? link : null
}
browser.runtime.onMessage.addListener(async (message: {type: Object}) => {
if (message.type === 'renderFeed')
return renderFeed()
if (message.type === 'extractFeedUrl')
return extractFeedUrl()
}) })

View file

@ -1,14 +1,34 @@
<template> <template>
<div class="popup"> <div class="popup">
Nothing interesting here <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> </div>
</template> </template>
<script lang="ts"> <script>
import browser from 'webextension-polyfill';
export default { export default {
name: 'Popup', name: 'Popup',
data() {
return {
feedUrl: null,
}
},
async mounted() {
const [tab] = await chrome.tabs.query({ active: true, currentWindow: true })
this.feedUrl = await browser.tabs.sendMessage(tab.id, {type: 'extractFeedUrl'})
},
} }
</script> </script>
<style scoped> <style scoped>
.popup {
padding: 1em;
}
</style> </style>

View file

@ -2,7 +2,7 @@
<html> <html>
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Popup</title> <title>RSS Viewer Popup</title>
</head> </head>
<body style="min-width: 200px;"> <body style="min-width: 200px;">
<div id="app"></div> <div id="app"></div>

View file

@ -18,7 +18,8 @@
<main> <main>
<div class="item" v-for="item, i in (feed.items || [])" :key="i"> <div class="item" v-for="item, i in (feed.items || [])" :key="i">
<div class="header" @click="expandedItems[i] = !expandedItems[i]"> <div class="header" :class="{expanded: expandedItems[i]}"
@click="expandedItems[i] = !expandedItems[i]">
<h2 v-if="item.title?.length"> <h2 v-if="item.title?.length">
<a :href="item.url" target="_blank" v-text="item.title" /> <a :href="item.url" target="_blank" v-text="item.title" />
</h2> </h2>
@ -124,6 +125,10 @@ main {
padding: 0.5em; padding: 0.5em;
border-radius: 1em; border-radius: 1em;
&.expanded {
border-radius: 1em 1em 0 0;
}
&:hover { &:hover {
background: #cff7cf; background: #cff7cf;
} }