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

@ -1,8 +1,8 @@
import browser from 'webextension-polyfill';
browser.webNavigation.onCompleted.addListener(
async (event: {tabId: string;}) => {
const { tabId } = event
await browser.tabs.sendMessage(tabId, {type: 'renderFeed'})
}
async (event: {tabId: string;}) => {
const { tabId } = event
await browser.tabs.sendMessage(tabId, {type: 'renderFeed'})
}
)

View File

@ -136,10 +136,7 @@ const getFeedRoot = () => {
return root
}
browser.runtime.onMessage.addListener(async (message: {type: Object}) => {
if (message.type !== 'renderFeed')
return
const renderFeed = () => {
const xmlDoc = getFeedRoot()
if (!xmlDoc)
// Not an RSS feed
@ -151,4 +148,33 @@ browser.runtime.onMessage.addListener(async (message: {type: Object}) => {
browser.storage.local.set(parseFeed(channel))
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>
<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>
</template>
<script lang="ts">
<script>
import browser from 'webextension-polyfill';
export default {
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>
<style scoped>
.popup {
padding: 1em;
}
</style>

View File

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

View File

@ -18,7 +18,8 @@
<main>
<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">
<a :href="item.url" target="_blank" v-text="item.title" />
</h2>
@ -124,6 +125,10 @@ main {
padding: 0.5em;
border-radius: 1em;
&.expanded {
border-radius: 1em 1em 0 0;
}
&:hover {
background: #cff7cf;
}