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:
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).
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.
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.
The extension is built with modules, each performing their individual task.
|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|
Extension HTML pages/UIs are all under
These pages are used for configuring user settings and other internal views.
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:
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
- Go to
- Enable developer mode
- Navigate to the extension source and choose
Step 4. Build release
When ready to build a release, run:
npm run build