Add reader mode for simplifying pages

.gitignore

@@ -108,3 +108,4 @@ bundle-gemini.js
 bundle-json.js
 bundle-markdown.js
 bundle-ssb.js
+bundle-reader.js

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

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"
 	]
 }

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",

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)