Privacybadger: Add more widgets for the widget replacement system

[cowlicks]

Currently we replace some common social media buttons like "tweet" and "like" buttons. The data for those is here. New widgets can be added by following the examples of others.

These were pulled from "ShareMeNot" in this PR. However maintenance of ShareMeNot was discontinued when these were included. So we can't pull updates from upstream.

Some examples, which should be pretty easy to add:

• twitter follow buttons
• facebook share buttons
• reddit buttons

In the links above you can also find documentation for the other socialmedia widgets from those companies.

[cowlicks]

It would also be nice to test the our functionality by visiting the sharemenot test page here.

[cowlicks]

Hi @froeschele do you have any tips on adapting new widgets? Or even better, existing documentation?

[froeschele]

I am now really wishing my past self had produced better documentation :) I'll spend some time soon-ish reminding myself, and then I'll write up something more future-proof. Thanks for asking!

[cowlicks]

@froeschele that'd be great, thanks!

[froeschele]

Gosh, I'm sorry this took me so long -- at long last, here are some notes about the format of the socialwidgets.json file. Please let me know if I can clarify anything more, and/or if I should put these notes directly into the repo somewhere.

--

Explanation of privacybadger/src/data/socialwidgets.json file format:

Buttons are specified as follows:

_domain_ = the domain (including subdomain) from which the button is loaded
_buttonSelectors_ = CSS selectors for finding buttons to replace
_replacementButton_:
_details_ = URL to which to make a request/iframe when replacement button is pressed (for button types 0&1) or HTML needed to render the replacement button (for button type 2)
_unblockDomains_ = URLs to which third-party requests must be permitted when the replacement button is pressed (may be a superset of the “details” URL if loading that first request triggers additional requests)
_imagePath_ = filename of local replacement button image
_type_ = 0, 1, 2, or 3 (see below)

Depending on their implementations, different buttons need to be handled differently when users click on the replacement button. The “types” (0, 1, 2, or 3) in the button specification distinguish these. (This naming could/should ideally be more self-explanatory…). See also the switch statement in privacybadger/src/js/contentscripts/socialwidgets.js.

• _type 0_: When replacement button is clicked, just load the “details” URL to make click request.
• _type 1_: When replacement button is clicked, need to replace the local version of the button with iframe of real button (e.g., Facebook Like button). User will have to click the real button again.
• _type 2_: When the replacement button is clicked, replace the local version of the button with HTML specified in the “details” item. Users will have to click the real button again.
• _type 3_: Not 100% sure about this one, may be new?

[sta55en]

I've just created https://github.com/EFForg/privacybadger/pull/2486 to update the social media widgets to be more standardized. If anyone wants to add items to the socialwidgets.json file and needs standard buttons, please let me know. I have a Sketch file which allows me to quickly create them for you.

[ghostwords]

At this point, we've got a number of replacements for third-party widgets such as Vimeo, YouTube, Google reCAPTCHA, and Disqus. Our most recent widgets improvement was to add an "always allow on this site" button (#2653).

We now also have tests for a number of widget replacement scenarios.

For a history of Privacy Badger's widget replacement updates thus far, see pull requests with the "widgets" label. For an overview of outstanding widget bugs and suggestions, see issues with the "widgets" label.