Browser Extension - tattle-made/Uli GitHub Wiki

Browser Extension

Glossary

Content Script

Background Service Worker

Options Page

Tweet Control UI

How does the plugin work

When you visit a URL of the form http://twitter.com/*, Uli injects a content script into page. This script is located at browser extension/plugin/src/content-script.js. This is the entry point for all Uli features.

The control flow is as follows :

β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”                  β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”
β”‚ set MutationObserver  β”œβ”€β”€β”€β”€onMutation───►│  check if added node  β”‚       β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”
β”‚ on the <main> element β”‚                  β”‚  is <section>         β”œβ”€β”€No──►│ Drop It β”‚
β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜                  β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”¬β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜       β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜
                                                       β”‚
                                                      Yes
                                                       β”‚
β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”                              β–Ό
β”‚ set Message Listener  β”‚                    β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”
β”‚ on Chrome Runtime     β”œβ”€β”€β”€β”€β”€onUrlChange───── hande new page    β”‚
β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜                    β””β”€β”¬β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜
                                               β”‚
                                               β”‚  β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”
                                          β”Œβ”€β”€β”€β”€β”Όβ”€β–Ίβ”‚ process existing nodes β”‚
                                          β”‚    β”‚  β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜
                                          β”‚    β”‚
                                          β”‚    β”‚  β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”
                                          β”‚    └─►│set listener for new nodes β”‚
                                          β”‚       β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”¬β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜
                                          β”‚                 β”‚
                                          └─onNewNodeβ”€β”€β”€β”€β”€β”€β”€β”˜

Listening for URL changes

Prerequisite :

  • a background service worker(background.js) that runs in the background all the time and sends a 'URL_CHANGED' message to the content script
  • a chrome.runtime.onMessage listener configured in the content-script.js which processes the page whenever url changes

If anything breaks in this setup, the tweet control UI will work inconsistently. You will see that it is injected into the twitter UI correctly the first time you load a twitter page but if you click on any links within that page and arrive at a new page, it won't be injected on that page.

Debugging Parser Logic

Every page has its getTimeline function defined in src/twitter/pages Try copy pasting it in your Browser's dev console

Wishlist

Contributing

⚠️ **GitHub.com Fallback** ⚠️