Skip to content
This repository was archived by the owner on Dec 12, 2023. It is now read-only.

Plugins꞉ 5. Browser window

Jump to bottom
Daniel Chýlek edited this page Aug 18, 2018 · 2 revisions

Here is a collection of useful features and tips for browser.js.

Theme 1.8.1 & Font Size 1.10.2

You can easily detect the current TweetDeck theme and font size from attributes on the <html> element, which are primarily intended to be used in CSS selectors.

  • The data-td-theme attribute is one of light, dark
  • The data-td-font attribute is one of smallest, small, medium, large, largest

Example CSS

html[data-td-theme='light'] .stream-item:not(:hover) .js-user-actions-menu {
  color: #000;
  border-color: #000;
}

html[data-td-theme='dark'] .stream-item:not(:hover) .js-user-actions-menu {
  color: #fff;
  border-color: #fff;
}

html[data-td-font='smallest'] .sprite-verified-mini {
  width: 13px !important;
  height: 13px !important;
}

Example JS

Keep in mind that the attribute will only be available after TweetDeck has loaded, so only use this inside the ready() method.

const currentTheme = document.documentElement.getAttribute("data-td-theme");
const currentFont = document.documentElement.getAttribute("data-td-font");

Column Types 1.13.4

Another useful feature is the data-td-icon on the .column elements, which can be used to identify column types in CSS selectors. In JavaScript, use window.TDPF_getColumnName() instead.

.column[data-td-icon='icon-message'] .column-header-links {
  min-width: 110px !important;
}

.column[data-td-icon='icon-schedule'] .td-clear-column-shortcut {
  display: none;
}

Screenshot Exclusion 1.7

If your plugin adds new elements to tweets and you want to exclude them from screenshots, add the td-screenshot-remove class to the parent element. For example:

<div class="td-screenshot-remove">
  <p>My Advanced Tweet Functionality</p>
  <p><a href="#" onclick="...">Do Awesome Stuff</a></p>
</div>

CSS Selector Priority 1.11.1

The <html> element has an ID #tduck, which can be used at the start of CSS selectors when !important is not sufficient.
App   Documentation 1. User interface | 2. Notifications | 3. Plugins | 4. Advanced
Plugin   Development 1. The basics | 2. Global functions | 3. Bridge object | 4. Remote functions |
5. Browser window | 6. Notification window
Miscellaneous Send anonymous data | Supported systems | Troubleshooting
Clone this wiki locally