Saját böngésző UI írása - Electron js? Node Webkit (NW.js)?

UPDATE: jelenleg majdnem teljesen végeztem a teszteléssel, van olyan megoldás, ami a specifikációmnak megfelel, kommentekben már írtam róla, és külön posztban publikálni fogom az eredményeket. Röviden: NW.js alias node-webkit, köszönöm a kommenteket-javaslatokat-felvetéseket, továbbiakat is várok!

- - - - -

Miért? Mert a Firefox sorra töri meg az extension-jeimet, főleg a userChrome.css és userContent.css kerül ahogy látom kivezetésre majd idővel, lehet nem, de jelenleg is unofficial szagúak, nincs dokumentáció hozzá, körülményes benne fejleszteni, beleuntam.

Cél? Egy meglévő böngészőmotorra saját UI építése, lehetőleg webes eszközökkel (js-ben legyen programozható). Nem érdekel, hogy Chrome (Webkit) vagy Gecko lesz, legyen nyílt forráskódú, és lehessen megvalósítani az alábbiakat.

Kérdés? Van, ki mivel valósítaná ezt meg?

(Igényeim a teljes post-ban.)

- - - - -

(Napi 10+ órában ülök böngésző előtt, mint fejlesztő és mint magán ember is, van egy rakás kisebb ötletem, amikkel kényelmesebbé tettem az életem, és mindig van két új ötletem, ezért nem megoldás a "de a chrome jó ha felrakod ezeket az extension-öket".)

Igényeim, amik megvalósíthatósága érdekel:

- JS-ben programozhatóság, aktuális html tartalom és JS változók elérése szükséges, lehetőleg korlátozás nélkül (ne legyen elválasztva az én script-em a az oldal script-jeitől ... tudom tudom biztonság).

(Ha teljes JS elérésem van, akkor a UI nagyrésze JS-ben definiált gyorsbillentyűkkel lenne megoldva, nagyritkán saját prompt ablakokkal, csak html-css kell, nem kell pl. GTK overlay. Ugyan így JS-ből kezelném a vissza-előre funkciókat előzmények között, könyvjelzőzést, linkek másolását, ..., de ha pl. van ablak szintű history stack, az nem hátrány.)

- Nem kell több tabot kezelnie, egy ablak, egy context, egy runtime, de több példányban legyen futtatható.

- Még a tartalom feldolgozása előtt és közben is szükségem lenne hozzáférésre, jelenleg ez két részletre korlátozódik: reklámblokkolás, és a teljes html tartalom láthatatlanná tétele, amit majd egyes js kódok lefutása után tennék láthatóvá, ez jelenleg egy css style applikálása a html-re (opacity: 0).

- Minél teljesebb tartalomfeldolgozásra van szükségem, html5 media, webp mindenképpen kell, webRTC-t lehet sose használtam, DRM-ről sem tudom, hogy mi használta, pdf-eket nem nyitok meg böngészőben, nyomtatni sem szoktam, ...

- Fájl letöltést korlátozott hozzáférhetőségű helyről a böngészőnek kéne kezelnie, nem szeretnék cookie-kat és user agent string-et átadni egy wget-nek, de ha más nincs ...

- Böngésző saját webdeveloper tool-ját használnám, chrome és firefox eszközeit ismerem, valamelyik jó lesz.

- Csak linux-on lenne használva, és nem tervezem termékké fejleszteni.

- Fizetős megoldás is érdekelhet.

- Nem szeretnék egy fork-ot a firefox-ból vagy chrome-ból, hogy minden frissítéskor patch-elhessem az új release-t, valami olyan megoldás kéne, ami jelenleg pont erre van, vagy legalább majdnem. Előny lenne ha egy-egy verzióra frissítés viszonylag kevés melóval járna, de az se gond, ha build-elni kell, csak legyen az én kódbázisom és a böngészőé elválasztva.

Amikre gondoltam megoldásként: NW.js (egykori node-webkit), és Electron. Utóbbit nem használtam még, előbbit igen, de nagyon felületesen, és régen. Más megoldás is érdekel. Gondolom a fentiek azért nem megoldhatatlanok, KIOSK vonalon biztos vannak már hasonló megoldások.

Hozzászólások

(Kell írnom egy új hozzászólást, hogy megadhassam, hogy kérek értesítést az új kommentekről?)

Ha nem válaszolnék kommentben, hát küldj privátot!

Nevergone, nem lehetne *megis* snippetes nezetet huzni a blog fooldalra eroszakkal?

Vortex Rikers NC114-85EKLS

Vicces megjegyzésnek okés, meglehet.

Komolynak viszont nem fair. Nagyjából 17-szer lett megkérve mindenki, hogy legyetek kedvesek *ne* tegyetek 5 oldalt a bevezetőbe, mert a motor nem fogja megvágni, hanem kibassza "bevezetőként". Ebből adódóan smartfone előtt ülve 6-7-15 teljes képernyőt is fel kell scrollozni az új tartalomig - ami ha nincs szerencséd, ugyanebben fog szenvedni. Lényegtelen, hogy érdekes a tartalom vagy sem, mert ami nekem az, az neked nem lesz az. Szóval részemről jöhet az automatika, mert amit meg lehetett tanulni a régi verzióban az itt feladja a leckét. Kamon' robot, fúrj és faragj - ezt megelőzendő mindenki rövidebbre fogja majd venni a bevezetőt, csak idő kérdése lesz.

Vortex Rikers NC114-85EKLS

"Nagyjából 17-szer lett megkérve mindenki, ..."

Hol? Lemaradtam róla, hogy volt valahol egy kézikönyv, amit direkt kikerültem. Van egy ilyen szöveg:

"Ez a mező a listázó oldalakon és a tartalmak megtekintésénél is megjelenik."

Kellemes betűmérettel, nehogy zavarjon. Ezek helyett mérföldekkel jobb lenne egy karakter korlát, vagy akár csak egy figyelmeztetés.

Ha nem válaszolnék kommentben, hát küldj privátot!

A 17-el szerintem nem mondtam sokat, de a lényeg, hogy volt szó még a karakterkorlátról is. Sajnos nem lett megvalósítva, mert túl fájdalmasnak tűnt néhányaknak. De nem ellened kárálok, mert a "bevezetőbe bebaszni mindent" tengerében egy csepp voltál, ráadásul simán be is lehet nézni a dolgot figyelmetlenségből. De az eseti előfordulásokon túl már elég zavaró a dolog.

Jöjjön a robot, az majd megtanítja miképpen érdemes csinálni.

Vortex Rikers NC114-85EKLS

Nem visszaszólni akartam, csak arra hoztam példákat, hogy ez így történik, nincs kézikönyv, nincs titkos kézfogás után átadott ősi tudás, kattintás van, és figyelmeztetés nélkül látod, még én is, aki nem akartam, elkövettem a hülyeséget, posztoltam, majd utána visszaléptem, hogy hogy is van ez?

Ha nem válaszolnék kommentben, hát küldj privátot!

Nem igazán ilyent akarok, nem is jó a blog címe, mert könnyen félreérthető a UI úgy hogy GUI. Nekem az a lényeg, hogy ne legyen egy megadott UI, amit épphogy tudok módosítani, hanem legyen egy html context-ben futó egyedi script-em, ami pl. hotkey-eket is el tud kapni, de pl. a tartalmat is alakítani tudja. Jelenleg az NW.js-et túrom, lista felénél tartok, már van ami nem megy (DRM videók, de ez pont nem is érdekel annyira), de van rengeteg dolog ami megy, és kényelmes. Az én részem a programban csak html és js fájlokból áll, a package.json-on kívül, ez eddig jónak tűnik, de most épp a "több ablak, egy profile mappa" problémát akarom megoldani, van itt még mit túrnom.

Ha nem válaszolnék kommentben, hát küldj privátot!

Electron-ig még oké, React-ot nem használtam még (jelenleg nem is szándékozom), de ez egy böngésző már önmagában is, nem egészen ezt keresem. Ha valamit nem tudok megoldani Electron-ban, akkor megnézem ők hogy oldották meg, úgyhogy köszi az ajánlást, de tovább keresek.

Ha nem válaszolnék kommentben, hát küldj privátot!

Szerkesztve: 2019. 12. 13., p – 10:30

Az az igazság, hogy ahogy végigolvastam a listádat, az Opera 12 ezeket kb. mind tudja OOB, mindenféle kiegészítő nélkül, az egyetlen kivétel a HTML 5 támogatásnál jelentkezhet, azt nem tudom mennyire támogatja, de az audio és video blokkok speciel mennek vele, a streaminget a GStreamer intézi, tehát kodekfüggő, hogy mit tud lejátszani. Viszont, ha nem windows alatt dolgozol vele, akkor az utolsó verzió az a 12.16-os, amiben az ECC cipherek támogatása még nincs benne; a 12.18-ban benne van, de azt meg nem adták ki csak windózra. Viszont ezt a problémát Squid/Privoxy kombóval orvosolni lehet.

Köszi a jelzést, de kerülni akarom a komplett böngészős megoldásokat, pont ugyan az megtörténhet az opera-val is, hogy jövő héten már nem támogatják ezt vagy azt a kiegészítőt, ami nekem kell, jelenleg egy html render részt külön akarok, egy egyedi UI-al. De megnézem az Opera motorjára épített-e valaki ilyen megoldást.

Ha nem válaszolnék kommentben, hát küldj privátot!

Nem épített senki, mert az Opera 12 zárt. Az igaz, hogy a 12.15 forráskódja kiszivárgott (tudok adni magnet linket), de ettől jogilag még nem lehet megtenni, hogy te arra böngészőt adsz ki. Patcheket lehet, azt csinálják is. Olyan nem fordulhat elő, hogy jövő héten már nem támogatnak valamit, mer az Opera 12 fejlesztése sajnos véget ért és átálltak krómra.

Ami a felsorolt igényeket illeti:
Az Opera 12 felületét úgy konfigolod ÉS programozod JS-ből, ahogy akarod. Példa: néha eltüntetik szándékosan a scrollbarokat a html és body tag-ekről. Operában írsz egy sima URL-t így: opera:/button/Go%20to%20page%2C%20%22javascript%3Afunction%20faszom()%7Bdocument.body.parentElement.style.overflow%3D'scroll'%3Bdocument.body.style.overflow%3D'scroll'%3B%7Dfaszom()%3B%22%2C1%2CFLOW (URL encode matters!), ráböksz és máris kérdezi, hogy szeretnéd-e a gombot hozzáadni a felülethez. Ha igen, akkor lesz egy gombod, ami a fentebb említett scroll eltüntetést orvosolja, hogy ráhúzza a html és body tag-ekre a style.overflow=scroll-ot. Ez persze csak az egyik megoldás, mert van user CSS. Úgy értem OOB, kiegészítő nélkül. Ahogy user JS is. Nem kell Greasemonkey, meg Tampermonkey, meg mittudomén, alapból van.
És ezek természetesen hotkeyekkel is vezérelhetőek.
És reklámblokkoló is van beépítve egy maszkolható URL-filter képében, ami black és whitelistet is tud.
Természetesen kiegészítőket is lehet írni Operához (én is csináltam), bár az esetek többségében nincs rá szükség, mert valami custom JS gomb, vagy az user JS/user CSS is jó hozzá.

A befejezett fejlesztése miatt a standardok támogatása és a biztonság erősen kérdéses, de egyébként ezt kerestem volna, hogy magas szinten lehessen alakítani. Ha az NW.js nem válik be, akkor sem akarok visszafelé menni, hamarabb kezdek bele az NW.js forrás hack-olásába inkább.

Ha nem válaszolnék kommentben, hát küldj privátot!

A böngésző programozásában nem akarok remekelni, nincs is megfelelő tudásom hozzá, én csak egy webes programozó vagyok :). Hamarabb fizetnék érte, hogy legyen egy ilyen project, ami viszont up to date, mint hogy én belekezdjek, hamar negatív lenne a pénzügyi mérlege, óránként többet tudok számlázni, mint amennyiből egy közösség ezt kihozná.

Ha nem válaszolnék kommentben, hát küldj privátot!

Érdekelne egy use case erre az UI-ra. Mármint, miért is van erre szükség és miért nem oldható meg tisztán HTML-ben?

"Maradt még 2 kB-om. Teszek bele egy TCP-IP stacket és egy bootlogót. "

Mondom amit fejből tudok: firefox-ban több html tartalmat érintő kiegészítőt írtam, többször körülményes elérni ezt vagy azt, és ki vagyok téve annak, hogy jövő héten valami miatt nincs már meg az az API. Nem tudok egy tetves ablak bezárása hotkey-t kikapcsolni, csak hack-olással (saját ablak megnyitása amiben bezáráskor felugrik egy "biztos?" ablak, ha nincs megnyitva a saját ablakom, úgy elszáll a böngésző mint a huzat). Nem tudom a UI-t úgy alakítani, ahogy akarom, hónapokig ment a tab és url bar rejtve, bal és jobb alsó sarokban, most egyszer csak userchrome fejlesztés keretében ez nem működik. Olyan eszközt keresek, ami erre van kitalálva, hogy alakítható legyen, nem "megtűrik" hogy variálom, és majd amikor nehézség a további fenntartása a lehetőségeknek, akkor hát törlik.

Mondok egy példát, amivel éjjel elég jól haladtam: NW.js. Webkit böngésző és node.js egybecsomagolva, utóbbi egyelőre kihasználatlanul, de van korlátozások nélküli script inject-álás, alapból nincs UI csak a html tartalom, tökéletes. Az általam írt részeket nem kell csomagolni, beküldeni, cska berakom egy manifest-be, hogy mit mikor töltsön be. Minden működik eddig amit akartam, a fájl letöltés, reklám blokkolás és a drm-es videó lejátszás van még hátra, de a drm-re már találtam több leírást, hogy a chrome aktuális binary codec-jeit simán tudom használni, csak nincs az alap csomagban, a reklám blokkolásra pedig ahogy láttam van komplett chrome extension kompatibilitás. Ha bármelyikkel elakadok akkor electron.js-t kipróbálom, de eddig elég bíztató a haladás.

(NW.js-ről: Intel fejlesztés, asztali alkalmazások webes eszközökkel való fejlesztésére lett kitalálva, node-webkit néven találkoztam először vele, nagyon barátságos, gyakorlatilag egy html megnyitását végzi egy manifest alapján, onnan viszont linkeken tovább navigálhatok, js-eket injectálhatok.)

Ha nem válaszolnék kommentben, hát küldj privátot!

Hááát... Ha egyszemélyes használatra szánod (a leírásból nekem ez jött le), akkor sok sikert hozzá... Elhiheted, hogy ha nekiállsz ezt megvalósítani, akkor több időd fog elmenni vele, mintha megszoknád a jelenlegi böngészőket+összevadászod a kiegészítőket.

Csak néhány meglátás az igényekkel kapcsolatosan:

  1. A JS biztonsággal a többi böngésző is nagyon küzd, nem véletlen vannak különválasztva a user és az oldal dolgai. Egyszer találsz egy olyan oldalt, ami egy ilyen böngésző hibát használ ki és kész.
  2. NoTab/példányosítás. Erőforrást hamarabb eszi.
  3. Ha saját böngésző, akkor kb elfelejtheted a webdeveloper tool-okat, amíg te magad meg nem csinálod őket.
  4. Electron... Találsz több olyan böngészőt ami Electron-ra épül (pl. https://minbrowser.github.io/min ). Viszont az Electron fejlesztői korábban már kijelentették, hogy bár mivel web-es technológiákra építkeznek és ezért lehetséges böngészőként is alkalmazni a megírt programokat, nagyon ellenjavallott, ugyanis az Electron alatt dolgozó Chromium nem követi az upstream verziót és van idő, mikor huzamosabb ideig nem is frissítik, mert funkciókat törhet. Jelen állás szerint a legfrissebb Electron a 7.1.2 (november 20) Chromium verzió: 78.0.3904.113. Legfrissebb Chromium jelenleg: 79.0.3945.79. Ez most nem tűnik olyan vészesnek, mert csak egy főverzióval van lemaradva, de volt idő, mikor ennél rosszabb volt a helyzet.
    Plusz kb mivel egy Chromium van alattad, így kb ugyanazok a megkötéseid vannak, mint ha egy sima Chrome/Chromium-ot használnál.

"Errors are red
My screen in blue
Someone help me
I've deleted Sys32"

Specifikáltam, rég óta gondolkoztam rajta, hogy miből is áll számomra a firefox, elég konkrét a lista, nem merült fel tartósan sem "hopsz ezt elfelejtettem, még valami". Azt nem kétlem, hogy lehet időben a mérleg jobban áll, ha egy böngészővel megoldom a problémát, de kockáztatok is, hogy jövő héten lesz egy új UI elem, amit utálok kerülgetni, vagy van valami, amit meg kell szoknom, és kész. Ha lehet, nem tenném. Jelenleg 5-6 óránál áll a project mérlege, ez még bőven jó.

1. js biztonság: beleástam magam még greasemonkey, és általában content script-ek kapcsán, lehet téves egyszerűsítés, de ha a böngészőben levő tartalmat megtartom a keretein belül, akkor én nem láttam olyan exploit-ot, amitől félnék, és mivel jelenleg a könyvjelző mentésén kívül semmim nincs, ami kifelé megy a böngészőből, és még olvasási joggal sem ér el semmi érzékeny adatot a js, nem látok hibalehetőséget, de fixme

2. példányosítás: nw.js ezt úgy kezeli, mint a chrome, egy runtime, egy profil mappa, csak nincsenek tab-ok, hanem ablakok vannak, mivel xdotool-al listáztatom az ablakokat jelenleg is egy saját ablaklistába, még jobb is így, elsőrendű állampolgárok lettek a tab-ok, nem másodrendűek a böngészőn belül

3. webdeveloper tool van, a webkit része (sdk verziót kell használni hozzá az nw.js-ből)

4. electron-ról pont ezt olvastam is, hogy nem up to date, nw.js az, emiatt is szimpatikusabb, 79-esen van jelenleg

Biztos van akinek nem jó megoldás a fenti, egyedi igényről van szó, de eddig nem ütköztem problémába.

Ha nem válaszolnék kommentben, hát küldj privátot!

A biztonságot semmiképpen nem lehet félvállról venni. A böngészőgyártók nem véletlen fordítanak nagy jelentőséget a process-ek szétválasztására. Lásd Chrome process sandbox.

De sajnos ezekben is van hiba. Csak egy gyors keresés eredménye: https://securelist.com/windows-0-day-exploit-cve-2019-1458-used-in-oper…

 

Egy ügyesen megírt JS szkript, bármelyik oldalon (hiszen nem tudhatod, hogy valamelyik kedvenc oldaladat mikor és kik törik éppen a háttérben) és máris sebezhető vagy. A fenti link okés, hogy még egy Windows hibát is kihasznált a privilégium növelésre, de akkor is ott van, hogy ha már csak a Chrome/Chromium jogosultságával fut, akkor is tudnak információkat lopni tőled, vagy előkészíteni bármi más hibát.

"Errors are red
My screen in blue
Someone help me
I've deleted Sys32"

Nem veszem félvállról, csak elvi szinten végignézve, ha olyan kódokat injektálok, amik csak a DOM-hoz férnek hozzá, nem adok át adatot, nincs kifelé írási joga, mert hát böngésző js sandbox, akkor problémát nem látok. Van egy pár ajax hívás kifelé tervben, amik helyben telepített szerverre írnak, de azt meg szerver oldalról biztosítom. Azt még tesztelnem kell, hogy ha egy oldal kódja pl. node eszközöket akar elérni, akkor mi történik, tudom-e ezt tiltani, de jelenleg nem tervezem használni a node részeket, ki is kapcsolható.

Ha nem válaszolnék kommentben, hát küldj privátot!

A project alapvetése volt, hogy a js és html motorokat nem én rakom össze, legyen friss, nw.js-nél ez pont kiderült, hogy meg van oldva. Az oldalak kódjával egy ketrecbe van zárva az én kódom is, ezzel én úgy látom nincs probléma, a korlátok ugyan azok, mint egy egyszerű böngészőnél. A problémát az jelenthetné, ha a node.js részeket az oldalak kódja eléri, de jelenleg pont ki is van kapcsolva a node.js modul (nw-ből az "n" a node lenne :) ), de nem kötekedés, csak security oldalról nem látok probléma lehetőséget (többet, mint egy átlag böngészőnél), fixme ha tévedek.

Ha nem válaszolnék kommentben, hát küldj privátot!

sub, en csak egy dashboard-ot szeretnek magamnak, ahol tiling azok a cuccok vannak, amik erdekelnek. Igen, probaltam a frame-ket. :|