Source Code

The source code is available on Github ↗

Star Fork Watch Download Issue

How does it work?

After installation the extension runs in the browser tab whenever user navigates to twitter.com. In-tab content script, AutoBlocker, observes the timeline and looks for patterns matching a Twitter handle. When it has discovered a sufficient number of handles, it requests bios for the discovered handles from Twitter API server.

The extension has to obtain sufficient credentials before any API requests can be made. This is achieved by Tokens module, which runs in the background context. Tokens module has two tasks:

  1. It listens to API call headers whenever browser sends requests to Twitter API. From there it captures the authentication headers for the current user. These are not persisted anywhere but kept in memory (see listening headers, capturing credentials).

  2. When Tokens module receives a message from content script requesting tokens, it sends these captured credentials back to content script (see implementation).

This exchange of tokens enables running the extension fully on client without needing to create a Twitter app and asking the user to authenticate. Further it removes the need for a developer-owned server.

system diagram

Once the content script has the necessary credentials, it will proceed to make an API call to get bios for the discovered handles. This is 1 batch request to lookup up to 100 handles with a single request. Twitter API server returns a list of bios for all requested handles.

Next the bios are checked for flagged keywords that user has set in user preferences. If a matching keyword is found in a bio, the content script will make a subsequent API call to block such douchy user. The blocking can be automatic or require confirmation from user, depending on user preference.

Modules

The extension is built with modules, each performing their individual task.

Module Description
AutoBlocker Looks for handles and initiates blocking
BlockerState Manages blocker state while browsing
BrowserAction Handle extension icon click
OnInstall Handle extension install event
Storage Module for persisting data
Tabs Broadcast preference changes
Tokens Capture authentication credentials
TwitterApi Makes API calls

Explore modules here

Extension HTML pages/UIs are all under src/options. These pages are used for configuring user settings and other internal views.

Running locally

This guide will explain how to build this extension from source.

You will need Node.js to build this extension. Next do the following:


Step 1. Get the source code

Clone the repository with git:

git clone https://github.com/MobileFirstLLC/doucheblock.git

If you do not have git download the latest source from here.


Step 2. Install dependencies

Open the source code in your favorite web editor. Then in the terminal, run:

npm install

this will install all dependencies needed to build the application.


Step 3. Debug

To debug the extension run:

npm run start

How to debug Chrome extensions

  1. Go to chrome://extensions
  2. Enable developer mode
  3. Click load unpacked
  4. Navigate to the extension source and choose dist directory

Step 4. Build release

When ready to build a release, run:

npm run build

This extension was created with Extension CLI. Learn more about the available commands here →