Add chrome extension to an electron js application for mac osx? - javascript

I am building a small always on the top browser with electron. To show the website I am using .
Now my idea is to integrate an adblocker (preferably uBlock origin) into the browser and it should work and affect the webview. As electron is running on chrome (as far as I know) there must be a way this is possible right?
So after googling a bit, I found this:
https://electronjs.org/docs/api/browser-window#browserwindowaddextensionpath
This somehow looks like what I want to achieve. I downloaded the source of uBlock origin an added it to an extra extensions folder into the project. I ran this function both on the BrowserWindow and also my created mainWindow and both give errors or not the expected results (which means not blocking ads).
So am I doing this right? What do I need to change? Is there an easier way? Is there even a way?

Related

Cypress - Chrome Extension not working inside Cypress Test Runner iFrame

I have a chrome extension that I successfully loaded into my Cypress environment. It shows up successfully in my extensions and I can see that it is turned on. I know it is working because I can open a new tab in the same browser where Cypress is running and it is working fine and making changes to the UI.
The problem is, the main tab that is running the Cypress Test Runner is inside of an iFrame and I suspect that the chrome extension I have loaded cannot interact with it. I believe this issue reflects my problem. However, I tried that solution but with no luck.
There is a blog that I stumbled upon that talks about a solution for fixing this for the React Dev Tools Extension. The following screenshot explains:
However, the extension that I am using does not have some kind of Global Hook like __REACT_DEVTOOLS_GLOBAL_HOOK__ that I can take advantage of as far as I can tell.
I have no idea what to try next, if anyone can provide some guidance I would appreciate it.
I ended up using Puppeteer for testing this particular extension. Puppeteer does not run within an iFrame allowing the extension to be testable, also you can integrate it into Cypress. Its an annoying workaround but I'm not seeing a better way to do it.

Headless Chrome: Run a webpage from command line without launching it?

I have a webpage that uses D3, canvg and gif.js to generate GIFs of time-lapse maps. The page generates 3,000 gifs, one at a time. The page is not meant for public consumption.
While it works pretty well to just open this page and download the GIFs, it tends to be asking a lot of the browser. So I'm curious if there's a way to run a page headlessly from the command-line without actually opening it, but running the full app to render the page.
Why not just use Phantom from Node, you might ask? For starters, Phantom is hard! But more importantly, I've never had complete success using Phantom or any other client-side browser engine, like jsdom, to completely render SVGs exactly right.
So my question is basically whether it's possible to use Chrome instead of Phantom and launch a page from the command line that executes the page as if it was merely opened in the browser but without actually opening the page.
Thanks!
You could use electron. The advantage would be you could very easily save your generated gifs, something you can't do with Chrome unless you also run a server.
Otherwise there are some docs for headless chrome here

chrome script or CLI to open URL and capture screen

I'm trying to write a script (or a CLI command would also work) that does essentially the following:
open a browser window of a specific size (given in pixels)
open a specific URL in that browser window/tab (either is fine)
do a screen capture of that particular URL and save this capture to a file
push this jpg/png/whatever file somewhere
I can pretty easily write my own script to handle at least #1 and #4, but from the limited reading I've been doing it looks as if the various chrome extensions and/or scripting capabilities might be capable of doing this all in one shot for me (or maybe everything except #4)
I've got a fair bit of generic programming background, but nothing in the chrome extension/script universe, so that part is pretty opaque to me.
It sounds like the same what http://casperjs.org/ do.

How to create a Chrome App or Extension maybe for my HTML app?

I have a simple HTML app. Its just a single HTML page with all the javascript and css styling. I want to make Chrome app or Extension out of it.
What is difference between Chrome App and Chrome Extension? I am confused...
So is it possible to do so?
A Chrome web app is something which runs in its own Chrome browser instance and does not have any global impact upon the browser. Basically, it's just a website running in its own Chrome frame. Some files may require local storage, but will only be used in that browser instance.
An extension runs globally on your browser - so it'll be present regardless of which page you're viewing. They modify the browser itself in order to add global functionality.
Edit: On searching, this has already been answered here - Difference between Chrome Apps and Extensions
You should check Building a Chrome Extension. There you'll find really good tutorial and it might help you in creating applications and extensions for Chrome.

javascript jquery file opener

i was wondering if anyone knew a quick solution to my problem. I want to be able to open a folder on users screen pretty much the same as but just opening up the my computer folder so a user can drag a file onto the browser screen. anyone know how?
You can't. They even gave this bug a name: "security".
The closest you can get without using Flash, proprietary browser stuff or Java is something like this.
You have to use a java applet.
Javascript has no access to the file system for security reason.
Every page would be able to see the files on your local machine and might display: "According to the files on your disk you might be interested in some of our special movies ;)"
Incidentally, there are custom extensions in IE and Firefox that let you load and save files; it's the reason TiddlyWiki can work as it does. It does degrade a Java applet for other browsers.
A new jQuery plugin has been extracted out of TiddlyWiki to give Javascript authors the ability to load and save, and it's portable across all browsers:
twFile - http://jquery.tiddlywiki.org/twFile.html
It's quite possibly not what you're after as it will only work off a file:/// URL.

Categories