HN Portal

README.md

INSTALL

Click the portal to navigate to it.

hnportal.user.js

// ==UserScript==
// @name         HN Portal
// @namespace    https://wingysam.xyz
// @version      0.3
// @description  Use <portal> on HN
// @author       Wingysam
// @match        https://news.ycombinator.com/item*
// @grant        none
// ==/UserScript==

// USE AN EXTENSION TO DISABLE CSP ON NEWS.YCOMBINATOR.COM OR THIS SCRIPT WON'T WORK.
// THIS ONE SHOULD WORK IF YOU CONFIGURE IT CORRECTLY AND USER CHROME.
// https://chrome.google.com/webstore/detail/content-security-policy-o/lhieoncdgamiiogcllfmboilhgoknmpi

// IF YOU ARE USING A VERSION OF CHROME FROM DECEMBER 2019, GO TO CHROME://FLAGS AND ENABLE PORTALS.

// THIS SCRIPT DOES NOT WORK IN FIREFOX AS OF DECEMBER 2019.

(function() {
    'use strict';

    const link = document.querySelector('.storylink').href

    if (window.location.href === link) return

    document.querySelector('#pagespace').style.display = 'none'

    const portal = document.createElement('portal')
    portal.src = link
    portal.style.width = '100%'
    portal.style.height = '100%'
    portal.addEventListener('click', () => { window.location.href = portal.src }) // portal.activate() clears navigation history unfortunately

    const div = document.createElement('div')
    div.style.width = '100%'
    div.style.height = '20em'
    div.style.boxSizing = 'border-box'
    div.style.border = '2px solid black'

    document.querySelector('.fatitem').parentElement.prepend(div)

    div.appendChild(portal)
})();