Support basic ad blocking (maybe through @cliqz/adblocker-electron, or another lib, or homebrew)

[MakuSensei]

Description

Hello, you could block some websites advertising

Steps to Reproduce Issue

Specifications

• Version of Nativefier (run $ nativefier --version): v6.13.0
• Version of Node.js (run $ node --version): v4.4.0
• OS: windows 10
• Architecture x64
• Stack trace from the error message (if any)

<Stack trace here>

[jiahaog]

This might be possible with an injected script, as mentioned in #3. Would you like to work on a pull request?

[eladnava]

@jiahaog I'd love to give it a try if that's okay with you. =)

[jiahaog]

Sorry for the late reply! Sure, that'll be great!

[eladnava]

@jiahaog Do you have any pointers on how this should work? It doesn't look like Electron supports adding non-DevTools extensions (such as Adblock).

[jiahaog]

Would it be possible to inject some sort of javascript adblocker prior to loading the page? How about trying to first using --inject to test the adblock functionality prior to integrating it to the app itself?

[eladnava]

I looked all over the interwebs for a JavaScript AdBlocker that can be embedded - I couldn't find such a beast. They only exist as extensions, because what site is going to include an AdBlocker for its own ads?

It appears the only available course of action is to port one of the extensions for use with Electron because they all heavily rely on the chrome.* extension APIs. They need to be able to block web requests based on filter patterns and other stuff that might not be possible to achieve with plain old browser JS.

It appears Electron implements some of the functionality offered to Chrome extensions, but via a slightly different API interface.

AdBlock Plus for Chrome is open source and seems like a good candidate for porting:
https://github.com/adblockplus/adblockpluschrome

I'm not sure I'll have the time to work on it, though -- it's a pretty big project, actually. Anyone else willing to give it a shot?

[jiahaog]

@eladnava You're right, it's probably going to involve porting the chrome extension to electron, and will take alot of work.

Apparently it is possible to add chrome dev extensions to electron. I'm not too sure, but would that be a solution for this?

[eladnava]

@jiahaog Unfortunately, that won't be enough, because Adblock relies on the chrome.* extension APIs, which are simply not implemented in Electron (yet):
electron/electron#1498 (comment)

Chrome Dev Extensions work because they might not rely on those APIs. For example, AdBlock needs to intercept all requests and run rule-checking logic on them to see if they're ad-related. That isn't possible in Electron, at least not via the APIs that AdBlock expects.

[matthewdias]

could do something like this maybe http://www.javascriptsource.com/cookies/remove-ads.html

[eladnava]

@matthewdias unfortunately that script needs to be configured with each advertisement's URL in order to work. It's for websites that want to reward the user for clicking a specific ad by hiding it in the future.

[eladnava]

A manageable workaround is to just block ad networks using the /etc/hosts file.

Since a nativefied website will typically serve ads from the same ad network(s), it shouldn't be too hard to detect and add their hostnames to the hosts file.

And if that isn't enough, you can always inject JavaScript into the page using webContents.executeJavascript to block or prevent ads on the page from displaying by deleting their DOM elements / intercepting their XHR requests.

[ronjouch]

Closing this as electron "don't have any plan to support Chrome extension APIs". Workarounds don't seem very satisfactory :-/ , but as @eladnava mentioned, system-wide blocking via hosts file (e.g. Dan Pollock's hosts file) can be a workaround. ¯_(ツ)_/¯

[remusao]

Hi @jiahaog, @ronjouch,

I just stumbled upon this issue and thought I would mention this JavaScript adblocker library which I am maintaining. It has first-class support for electron and can be integrated with only a few lines of code.

The only challenge I see is that to get full blocking capabilities (like adblocker extensions), it needs to register a preload script and I'm not sure how that would work with electron-packager. I guess it might require to copy the preload script at build-time so that it's available (otherwise it will still perform network filtering, which is usually enough to block most ads).

Best,
Rémi

[ronjouch]

I just stumbled upon this issue and thought I would mention this JavaScript adblocker library which I am maintaining. It has first-class support for electron and can be integrated with only a few lines of code.

The only challenge I see is that to get full blocking capabilities (like adblocker extensions), it needs to register a preload script and I'm not sure how that would work with electron-packager. I guess it might require to copy the preload script at build-time so that it's available (otherwise it will still perform network filtering, which is usually enough to block most ads).

@remusao cool! PR welcome, and I don't have the bandwidth to help, but I'm reopening this issue (I closed it because Electron doesn't support Chrome extension APIs, but what you offer would be a nice alternative) to help give it visibility, maybe others will be able to help 🙂.

I also see @cliqz/adblocker-electron might be helpful.

[remusao]

Thanks for the super fast answer @ronjouch. I actually can make a simple POC of this if that helps. I would still need help though, to package the custom preload script with the app. Not sure how that could work?

[My6UoT9]

@remusao should be easy now to preload js, https://github.com/jiahaog/nativefier/blob/master/docs/api.md#inject

[remusao]

@My6UoT9 Thanks for the suggestion, let's maybe have a look again once the refactor to TypeScript by @ronjouch is merged?

[TheCleric]

After I get done with my PR for issue #29 I will be moving on to work on this.

I am thinking about following along the path laid out in this thread:

https://discuss.atom.io/t/resolved-adblock-for-electron-app/39396/6

And possibly using this node library mentioned therein:

https://www.npmjs.com/package/abp-filter-parser

Let me know if anyone has any questions/comments or would be willing to help.

[remusao]

Hey @TheCleric,

As mentioned in my previous comment here, I would be willing to help. I want to point out that the adb-filter-parser library is not maintained anymore (no update in 4 years).

Best,

[TheCleric]

@remusao thanks for pointing that out about that library. I missed that. When I'm ready to do some work on this I'll research some newer options, and ping you again. Thanks!

[garywu520]

Please refer to this project, I have completed the basic test, welcome to improve it together. https://github.com/garywu520/webapps-ads-removal/blob/main/README.md

[auronpl315]

I'm new, how do I add Terminal to Adblock (nativefier Electron)?

[cwlovecs]

We can use --inject ad.css

ad.css

.some-ad {
	display: none
}