Twitter client based on mobile.twitter.com in menu bar
OTHER License
Twitter client based on https://mobile.twitter.com in menu bar.
Features
All links outside https://mobile.twitter.com in tweets are opened in an external browser.
When you want to make a new tweet, press n
(it can be changed in config).
Even if you use menubar window, you can enter/leave fullscreen mode via menu item (View -> Enter/Leave FullScreen). In fullscreen mode, app behaves like as normal window. Fullscreen mode is especially useful on macOS with split view.
Download archived file for your environment from release page. Please follow the instruction in the release page.
Or available as npm package.
$ npm install --global tuitter
If you installed this app from the release page, start this app by executing the binary.
If you installed this app via npm, start from command line.
$ tuitter
Almost all usage is the same as original https://mobile.twitter.com . You can use various key shortcuts to operate the page (focusing on tweet, make new tweet, see image, open link in browser, and so on). And you can use themes or plugins to extend this app (or even you can create one by yourself). You can always access to this app via hot key.
this application can be in 3 modes:
To show DevTools, set the environment variable. There will be two DevTools window.
One is for renderer process of native window. Another is for <webview>
which actually renders https://mobile.twitter.com.
$ NODE_ENV=development tuitter
Tui has a directory for application data. The path depends on your OS.
~/Library/Application\ Support/Tui
for macOS~/.config/Tui
for Linux%APPDATA%\Tui
for Windows.There is an icon in menu bar. You can toggle application window by clicking it. And you can notice that there are notifications or direct messages by the color of it.
Normally icon in menu bar is black (or white).
When there are some unread notifications in 'Notifications' tab, icon will be blue.
When there are unread direct messages, icon will be red.
Configuration is written in JSON file in application directory. Please edit it with your favorite editor. If you want to reset configuration, please simply remove the JSON file and restart application.
$ $EDITOR {app dir}/config.json
To know type of values of each keys, please see type definition.
Define keymaps of this application as JSON object. The key is a key sequence and the value is an action name.
For example, "mod+shift+j": "next-tweet"
assigns next-tweet
action to key sequence Cmd+Shift+J
(or Ctrl+Shift+J
on other OS).
mod
means Cmd
in macOS and Ctrl
in other OS.
The key sequence format is mousetrap. Note that this format is different from hot_key
above.
Action Name | Description | Default Key |
---|---|---|
next-tweet |
Scroll down window per one tweet | j |
previous-tweet |
Scroll up window per one tweet | k |
unfocus-tweet |
Unfocus current focus on tweet. It can cancel editing tweet | esc |
scroll-down-page |
Scroll down window per page | f |
scroll-up-page |
Scroll up window per page | b |
scroll-up-to-top |
Scroll to newest tweet when 'New Tweet' popup is displayed | t |
scroll-down-to-bottom |
Scroll to the bottom of timeline | N/A |
switch-home-timeline |
Switch to 'Home Timeline' tab | 1 |
switch-notifications |
Switch to 'Notifications' tab | 2 |
switch-direct-messages |
Switch to 'Direct Messages' tab | 3 |
switch-search |
Switch to 'Search' tab | 4 |
new-tweet |
Start editing a new tweet | n |
send-tweet |
Send current editing tweet | ctrl+enter |
reply-tweet |
Reply to the focused tweet | enter |
retweet-tweet |
Retweet the focused tweet | R |
quote-tweet |
Retweet with quoting the focused tweet | Q |
like-tweet |
Like with quoting the focused tweet | L |
open-images |
Open image or video in the focused tweet | i |
open-images-in-browser |
Open image or video in focused tweet with external browser | I |
open-tweet |
Open tweet page for the focused tweet | o |
open-links |
Open links contained in the focused tweet with browser | l |
show-user |
Open user page of the focused tweet's author | u |
browser-go-back |
Navigate to go back like a browser | backspace |
browser-go-forward |
Navigate to go forward like a browser | N/A |
browser-reload |
Navigate to reload like a browser | N/A |
zoom-in |
Zoom font size by 10% | mod+plus |
zoom-out |
Zoom font size by -10% | mod+- |
last-account |
Switch account to most recently used one | mod+shift+l |
next-account |
Switch account to next one in accounts list | mod+shift+n |
previous-account |
Switch account to previous one in accounts list | mod+shift+p |
quit-app |
Quit application | N/A |
open-devtools |
Open DevTools for current page | N/A |
When this value is set to true
, application will be launched as a normal window application.
If menu bar behavior does not work for you, please use set this value to true
to avoid it.
Default value is false
on macOS or Linux, true
on Windows because window position is broken in some version of Windows.
hot_key
is a key sequence to toggle application window. The shortcut key is defined globally.
The format is a Electron's accelerator. Please see the document to know how to configure this value.
Default value is "CmdOrCtrl+Shift+S"
. If you want to disable, please set empty string or null
.
String array of paths to your plugins. As described below, plugin is loaded with Node.js's require()
.
So it can be a single file path or npm package directory path.
You can specify both absolute path and relative path to application directory.
For example, when you have {app dir}/some_plugin.js
, you can specify ["some_plugin.js"]
as the value.
These paths can contain glob. For example, plugins/*.js
will load all JavaScript files in {app dir}/plugins
directory.
Default value is []
.
accounts
is a list of your accounts. Items should be @screen_name
.
When this value is set, you can switch account via menu item
This value is not set by default (null
).
{
"accounts": [
"@main_account",
"@sub_account"
]
}
If this value is set to true
, Tui will refresh its web contents at PC suspending when it consumes much memory.
The threshold which detemines the refresh occur or not is up to refresh_threshold_memory_mb
config.
Default value is true
.
Integer value (defaults to 500
). If <webview>
's current memory usage exceeds this value, app will refresh <webview>
on PC suspending.
The unit is mega bytes. By default, when <webview>
consuming more than 500MB, it will be refreshed at suspending.
Please see above refresh_on_sleep
config also.
Color of icon in menu bar. "white"
or "black"
is available. In macOS, it's depending on the system is dark mode or not.
In other platforms, default value is or "black"
.
When this value is set to true
, the window won't be hidden if it loses a focus. Default value is false
.
Font zoom factor in application. It should be positive number. For example, 0.7
means 70%
font zooming.
Default font size is a bit bigger because https://mobile.twitter.com is originally for mobile devices. So default value is 0.9
.
Home URL loaded when application starts. If you see a list or something instead of home timeline, please modify this URL.
Default value is "https://mobile.twitter.com"
.
When this value is set to false
, notification will be disabled and icon won't be changed even if new mentions or direct messages arrive. Default value is true
.
When you set accounts
value in your config.json
, you can switch among your accounts via menu item.
When application has a focus, you can see 'Accounts' menu item in menu bar.
By clicking the item, you can see current one and switch to other.
If you use Windows, you can show menu bar by pressing Alt key.
Tui can load your JavaScript plugin and you can hook some points in application. Plugin paths can be specified in config.json
(see above).
Each paths will be loaded with Node.js's require()
. So you can create a plugin as a single JavaScript or npm package structure directory.
Plugin must export one object which (may) contains hooks as property. Current supported hooks are:
onStart(ctx)
: When application startedonTweetStatus(tw, ctx)
: When a tweet appears in application's timeline. tw
is a DOM element which represents a tweet.onKeymap
: An object value whose keys are keymap name and values are the corresponding process.The ctx
parameter is an instance of AppContext
class.
Interface definition is described in TypeScript code.
Plugins are loaded in https://mobile.twitter.com context. So you can modify DOM element directly and freely.
As member of AppContext
instance, there are many useful CSS selectors to choose proper element.
Below is a super simple plugin to filter f*ck words.
const FWORDS = [
'Fuck',
'fuck',
];
module.exports = {
onTweetStatus(tw, ctx) {
const textElement = tw.querySelector(ctx.selectors.tweetTextBody);
if (textElement === null) {
return;
}
const text = textElement.innerText;
for (const w of FWORDS) {
if (text.indexOf(w) >= 0) {
tw.style.display = 'none';
break;
}
}
}
};
You can also create your original keymap with this. The ctx
parameter is the same as above (AppContext
instance), and
the event
parameter is a KeyboardEvent
on the keydown event. Note that event.preventDefault()
is already called.
And keymap is not invoked when <input>
or <textarea>
is focused. So you need not to take care about them.
module.exports = {
onKeymap: {
'show-my-cool-list': (ctx, event) => {
// Note that all external links outside https://mobile.twitter.com are opened in a browser.
href.location = 'https://mobile.twitter.com/Linda_pp/lists/my-cool-list';
}
}
};
// And add your original keymap in config.json
// "keymaps": {
// "mod+l": "show-my-cool-list"
// },
To see the log, it's easy way to specify environment variable NODE_ENV=development
. It opens DevTools at app starting.
Or there is a keymap to open DevTools (it's not assigned to any key by default).
Note that hooks are called with blocking. Please do not execute heavy process or consider to use setTimeout()
to defer heavy process.
When you put user.css
in application directory, Tui automatically loads it and applies to underlying https://mobile.twitter.com.
You can create a theme for https://mobile.twitter.com and hide some elements by display: none
.
This is one example of user.css
.
You can also put theme.css
in application directory. It's also applied on loading https://mobile.twitter.com.
This CSS file intends to be used for changing colors in the page. theme.css
is always loaded before loading user.css
.
So you can override theme styles in user.css
without modifying theme.css
.
Below is a list of themes provided:
You can also put user.js
in application directory. It will be loaded when loading https://mobile.twitter.com at first.
Please do not assume that it's loaded deterministically. It will be loaded while loading https://mobile.twitter.com.
DOM may not be ready yet. In that case, you need to wait load
event.
$ git clone https://github.com/rhysd/Tui.git && cd Tui
# Install all dependencies into node_modules/
$ npm install
# Build app (it's written in TypeScript)
$ npm run build
# Run app in debug mode
$ npm run debug
# Apply tslint and stylelint to codes
$ npm run lint