diff --git a/.gitignore b/.gitignore index 40cd066..3270146 100644 --- a/.gitignore +++ b/.gitignore @@ -108,3 +108,4 @@ bundle-gemini.js bundle-json.js bundle-markdown.js bundle-ssb.js +bundle-reader.js diff --git a/background.js b/background.js index d1ca352..0253dfb 100644 --- a/background.js +++ b/background.js @@ -42,6 +42,19 @@ if(knownType) { console.log('Waiting to inject rendering code', { SCRIPT_MAP, TYPE_MAP }) +chrome.browserAction.onClicked.addListener(({ id: tabId }) => { + const readerCode = ` +(function (){ + const src = "${scriptURL('reader')}" + const script = document.createElement('script') + script.setAttribute('src', src) + script.setAttribute('charset', 'utf-8') + document.body.appendChild(script) +})(); +` + chrome.tabs.executeScript(tabId, { code: readerCode }) +}) + function handleLoaded ({ tabId, url }) { const { protocol } = new URL(url) if (FORBIDDEN_PROTOCOLS.includes(protocol)) return diff --git a/manifest.json b/manifest.json index b024aac..fb16c99 100644 --- a/manifest.json +++ b/manifest.json @@ -16,10 +16,18 @@ "scripts": ["background.js"] }, + "browser_action": { + "default_icon": { + "32": "reader.png" + }, + "default_title": "Reader View" + }, + "web_accessible_resources": [ "bundle-gemini.js", "bundle-markdown.js", "bundle-json.js", - "bundle-ssb.js" + "bundle-ssb.js", + "bundle-reader.js" ] } diff --git a/package.json b/package.json index 9dab3b5..4ad2724 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,8 @@ "build-json": "browserify ./json.js > bundle-json.js", "build-gemini": "browserify ./gemini.js > bundle-gemini.js", "build-ssb": "browserify ./ssb.js > bundle-ssb.js", - "build": "npm run build-markdown && npm run build-json && npm run build-gemini && npm run build-ssb" + "build-reader": "browserify ./reader.js > bundle-reader.js", + "build": "npm run build-markdown && npm run build-json && npm run build-gemini && npm run build-ssb && npm run build-reader" }, "repository": { "type": "git", @@ -27,6 +28,7 @@ "standard": "^17.0.0" }, "dependencies": { + "@mozilla/readability": "^0.4.4", "escape-html": "^1.0.3", "gemini-to-html": "^2.1.0", "html-to-text": "^8.2.0", diff --git a/reader.js b/reader.js new file mode 100644 index 0000000..d59650e --- /dev/null +++ b/reader.js @@ -0,0 +1,20 @@ +const renderPage = require('./template.js') +const {Readability} = require('@mozilla/readability') + +const article = new Readability(document).parse() + +const { title, content, byline } = article + +const finalContent = ` +<h1>${title}</h1> + +<p> +${byline} +</p> + +<hr> + +${content} +` + +renderPage(finalContent, title) diff --git a/reader.png b/reader.png new file mode 100644 index 0000000..d26efaa Binary files /dev/null and b/reader.png differ diff --git a/reader.svg b/reader.svg new file mode 100644 index 0000000..7ebc8c4 --- /dev/null +++ b/reader.svg @@ -0,0 +1,19 @@ +<?xml version="1.0" standalone="no"?> +<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 32 32" width="32" height="32"> +<!-- +-purple: #6e2de5; +-black: #111; +-white: #F2F2F2; +-green: #2de56e; +} +--> + <rect x="8" y="4" width="16" height="24" fill="#F2F2F2" + stroke="#6e2de5" stroke-width="2" stroke-linejoin="round" /> + <rect y="8" x="10" width="12" height="1" fill="#111" /> + <rect y="12" x="10" width="12" height="1" fill="#111" /> + <rect y="16" x="10" width="12" height="1" fill="#111" /> + <rect y="20" x="10" width="12" height="1" fill="#111" /> + <rect y="24" x="10" width="8" height="1" fill="#111" /> + + <rect y="24" x="19" width="3" height="1" fill="#2de56e" /> +</svg>