{md};
5 | }
6 |
7 | function isElement(el) {
8 | return el instanceof HTMLElement || el instanceof Text;
9 | }
10 |
11 | function splitTextReducer(frag, text, index) {
12 | if (index % 2 && text.length >= 1) {
13 | // Code is always in odd positions
14 | frag.append(styleInlineCode(text));
15 | } else if (text.length > 0) {
16 | frag.append(text);
17 | }
18 |
19 | return frag;
20 | }
21 |
22 | export default function () {
23 | const splittingRegex = /`(.*?)`/g;
24 | const styledClassName = 'refined-twitter_monospaced-styled';
25 |
26 | $('.tweet-text').each((i, el) => {
27 | if ($(el).hasClass(styledClassName)) {
28 | return;
29 | }
30 |
31 | // Get everything in tweet
32 | const contents = Object.values($(el).contents());
33 | const text = contents.map(node => node.nodeValue || node);
34 | text.splice(-2); // Remove extraneous elements
35 |
36 | const frag = text.map(val => {
37 | // Style the single backticks while ignoring the already styled multiline code blocks
38 | if (isElement(val)) {
39 | return val;
40 | }
41 |
42 | return val
43 | .split(splittingRegex)
44 | .reduce(splitTextReducer, new DocumentFragment());
45 | });
46 |
47 | const flattened = Array.prototype.concat.apply([], frag);
48 | $(el).html(flattened);
49 | $(el).addClass(styledClassName);
50 | });
51 | }
52 |
--------------------------------------------------------------------------------
/source/features/keyboard-shortcuts.js:
--------------------------------------------------------------------------------
1 | const toggleNightMode = () => {
2 | const nightmodeToggle = document.querySelector('.nightmode-toggle');
3 | if (nightmodeToggle) {
4 | nightmodeToggle.click();
5 | }
6 | };
7 |
8 | export default () => {
9 | const customShortcuts = [
10 | {
11 | name: 'Actions',
12 | description: 'Shortcuts for common actions.',
13 | shortcuts: [
14 | {
15 | keys: [
16 | 'Alt',
17 | 'm'
18 | ],
19 | description: 'Toggle Night Mode'
20 | }
21 | ]
22 | },
23 | {
24 | name: 'Navigation',
25 | description: 'Shortcuts for navigating between items in timelines.',
26 | shortcuts: []
27 | },
28 | {
29 | name: 'Timelines',
30 | description: 'Shortcuts for navigating to different timelines or pages.',
31 | shortcuts: []
32 | }
33 | ];
34 |
35 | document.addEventListener('keydown', event => {
36 | const keyName = event.key;
37 | switch (keyName) {
38 | case 'µ': {
39 | toggleNightMode();
40 | break;
41 | }
42 |
43 | case 'm': {
44 | if (event.altKey) {
45 | toggleNightMode();
46 | }
47 |
48 | break;
49 | }
50 |
51 | default:
52 | break;
53 | }
54 | });
55 |
56 | const initDataElement = document.querySelector('#init-data');
57 | if (initDataElement) {
58 | const initData = JSON.parse(initDataElement.value);
59 | const updatedShortcuts = [...initData.keyboardShortcuts];
60 | for (const [i, item] of updatedShortcuts.entries()) {
61 | item.shortcuts = item.shortcuts.concat(customShortcuts[i].shortcuts);
62 | }
63 |
64 | initData.keyboardShortcuts = updatedShortcuts;
65 | initDataElement.value = JSON.stringify(initData);
66 | }
67 | };
68 |
--------------------------------------------------------------------------------
/source/features/inline-instagram-photos.js:
--------------------------------------------------------------------------------
1 | import {h} from 'dom-chef';
2 |
3 | const instagramUrls = new Map();
4 |
5 | function createPhotoElement(imageUrl, postUrl) {
6 | return (
7 |
8 |
9 | 
10 |
11 |
12 | );
13 | }
14 |
15 | function createPhotoContainer() {
16 | return ;
17 | }
18 |
19 | async function getInstagramPhotoUrl(instagramPostUrl) {
20 | const imageRegex = /"display_url": ?"([^"]+)"/;
21 | const instagramSuffixRegex = /instagram\.com\/p\/([^/]+)/;
22 | const [, postID] = instagramSuffixRegex.exec(instagramPostUrl) || [];
23 | const instagramHTMLContent = await browser.runtime.sendMessage({
24 | contentScriptQuery: 'getInstagramPhotoUrl',
25 | postID
26 | });
27 | const [, instagramImageUrl] = imageRegex.exec(instagramHTMLContent) || [];
28 | return instagramImageUrl;
29 | }
30 |
31 | export default function () {
32 | $('.twitter-timeline-link[data-expanded-url*="//www.instagram.com/p/"]').each(async (idx, instagramAnchor) => {
33 | const tweetElement = $(instagramAnchor).parents('.js-tweet-text-container');
34 | const instagramPostUrl = instagramAnchor.dataset.expandedUrl;
35 | const shouldInlinePhoto = tweetElement.siblings('.AdaptiveMediaOuterContainer').length < 1;
36 |
37 | if (!shouldInlinePhoto) {
38 | return;
39 | }
40 |
41 | tweetElement.after(createPhotoContainer());
42 |
43 | let imageUrl = '';
44 |
45 | if (instagramUrls.has(instagramPostUrl)) {
46 | imageUrl = instagramUrls.get(instagramPostUrl);
47 | } else {
48 | imageUrl = await getInstagramPhotoUrl(instagramPostUrl);
49 | instagramUrls.set(instagramPostUrl, imageUrl);
50 | }
51 |
52 | const photoElement = createPhotoElement(imageUrl, instagramPostUrl);
53 | tweetElement.siblings('.AdaptiveMediaOuterContainer').html(photoElement);
54 | });
55 | }
56 |
--------------------------------------------------------------------------------
/source/features/image-alternatives.js:
--------------------------------------------------------------------------------
1 | export default function () {
2 | const imgContainers = document.querySelectorAll('.AdaptiveMedia-photoContainer, .Gallery-media');
3 | const imgAvatar = document.querySelector('.ProfileAvatar-image');
4 |
5 | for (const imgContainer of imgContainers) {
6 | // Exit if it already exists
7 | // Test on content because a same container can be reused (Gallery)
8 | if (imgContainer.querySelector('.refined-twitter_image-alt')) {
9 | continue;
10 | }
11 |
12 | const imgs = imgContainer.querySelectorAll('img');
13 | for (const img of imgs) {
14 | const imgAlt = img.getAttribute('alt');
15 |
16 | if (!imgAlt) {
17 | continue;
18 | }
19 |
20 | imgContainer.classList.add('refined-twitter_image-alt_container');
21 |
22 | // Current image equals the avatar on the current page
23 | if (imgAvatar && img.src === imgAvatar.src) {
24 | imgContainer.classList.add('refined-twitter_image-alt_profile-container');
25 | } else {
26 | // Remove previouly added classname if container is not for the profile avatar
27 | imgContainer.classList.remove('refined-twitter_image-alt_profile-container');
28 | }
29 |
30 | if (imgContainer.classList.contains('AdaptiveMedia-photoContainer')) {
31 | const ancestor1 = imgContainer.parentNode;
32 | ancestor1.classList.add('refined-twitter_image-alt_photocontainer');
33 | if (ancestor1.parentNode.classList.contains('AdaptiveMedia-container')) {
34 | const ancestor2 = ancestor1.parentNode;
35 | if (ancestor2.parentNode.classList.contains('is-square')) {
36 | ancestor2.parentNode.classList.add('refined-twitter_image-alt_ancestor-not-square');
37 | }
38 | }
39 | }
40 |
41 | const altDiv = document.createElement('div');
42 | altDiv.textContent = imgAlt;
43 |
44 | if (imgContainer.classList.contains('Gallery-media')) {
45 | altDiv.className = 'refined-twitter_image-alt refined-twitter_image-alt_top';
46 | img.parentNode.prepend(altDiv);
47 | } else {
48 | altDiv.className = 'refined-twitter_image-alt refined-twitter_image-alt_bottom';
49 | img.parentNode.append(altDiv);
50 | }
51 |
52 | img.classList.add('refined-twitter_image-alt_img');
53 | }
54 | }
55 | }
56 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "scripts": {
3 | "lint": "xo && stylelint source/**/*.css",
4 | "test": "npm run lint && ava && npm run build",
5 | "build": "webpack --mode=production",
6 | "watch": "webpack --mode=development --watch",
7 | "release:cws": "cd distribution && webstore upload --auto-publish",
8 | "release": "run-s build update-version release:cws",
9 | "update-version": "VERSION=$(utc-version); echo $VERSION; dot-json distribution/manifest.json version $VERSION"
10 | },
11 | "dependencies": {
12 | "ajv": "^6.10.0",
13 | "dom-chef": "^3.6.0",
14 | "dom-loaded": "^1.2.0",
15 | "dompurify": "^1.0.10",
16 | "element-ready": "^3.0.0",
17 | "jquery": "^3.4.1",
18 | "lodash.debounce": "^4.0.8",
19 | "lodash.groupby": "^4.6.0",
20 | "lodash.pick": "^4.4.0",
21 | "lodash.sortby": "^4.7.0",
22 | "prismjs": "^1.16.0",
23 | "select-dom": "^5.1.0",
24 | "webext-options-sync": "^0.16.0",
25 | "webextension-polyfill": "^0.4.0"
26 | },
27 | "devDependencies": {
28 | "@babel/core": "^7.4.5",
29 | "@babel/plugin-transform-react-jsx": "^7.3.0",
30 | "@babel/register": "^7.4.4",
31 | "ava": "^1.4.1",
32 | "babel-eslint": "^10.0.1",
33 | "babel-loader": "^8.0.6",
34 | "chrome-webstore-upload-cli": "^1.1.1",
35 | "copy-webpack-plugin": "^5.0.3",
36 | "dot-json": "^1.1.0",
37 | "npm-run-all": "^4.1.1",
38 | "size-plugin": "^1.2.0",
39 | "stylelint": "^10.0.1",
40 | "stylelint-config-xo": "^0.15.0",
41 | "utc-version": "^1.0.0",
42 | "webpack": "^4.32.2",
43 | "webpack-cli": "^3.3.2",
44 | "xo": "^0.24.0"
45 | },
46 | "xo": {
47 | "parser": "babel-eslint",
48 | "envs": [
49 | "browser",
50 | "jquery"
51 | ],
52 | "rules": {
53 | "import/no-unassigned-import": 0,
54 | "no-unused-vars": [
55 | 2,
56 | {
57 | "varsIgnorePattern": "^h$"
58 | }
59 | ]
60 | },
61 | "globals": [
62 | "browser"
63 | ]
64 | },
65 | "ava": {
66 | "files": [
67 | "test/*.js"
68 | ],
69 | "require": [
70 | "@babel/register"
71 | ]
72 | },
73 | "babel": {
74 | "plugins": [
75 | [
76 | "@babel/plugin-transform-react-jsx",
77 | {
78 | "pragma": "h",
79 | "useBuiltIns": true
80 | }
81 | ]
82 | ]
83 | },
84 | "stylelint": {
85 | "extends": "stylelint-config-xo",
86 | "rules": {
87 | "declaration-no-important": null,
88 | "selector-class-pattern": null
89 | }
90 | }
91 | }
92 |
--------------------------------------------------------------------------------
/source/features/code-highlight.js:
--------------------------------------------------------------------------------
1 | import {h} from 'dom-chef';
2 | import prism from 'prismjs';
3 | import {domify} from '../libs/utils';
4 | import 'prismjs/components/prism-jsx';
5 | import 'prismjs/components/prism-bash';
6 | import 'prismjs/components/prism-git';
7 | import 'prismjs/components/prism-typescript';
8 | import 'prismjs/components/prism-scss';
9 | import 'prismjs/components/prism-diff';
10 | import 'prismjs/components/prism-ruby';
11 | import 'prismjs/components/prism-rust';
12 | import 'prismjs/components/prism-swift';
13 | import 'prismjs/components/prism-java';
14 | import 'prismjs/components/prism-python';
15 | import 'prismjs/components/prism-r';
16 |
17 | const aliases = new Map([
18 | ['js', 'javascript'],
19 | ['shell', 'bash'],
20 | ['sh', 'bash'],
21 | ['zsh', 'bash'],
22 | ['py', 'python']
23 | ]);
24 |
25 | function pickLanguage(lang) {
26 | return aliases.get(lang) || lang;
27 | }
28 |
29 | function highlightCode(md) {
30 | const codeBlockRegex = /```(\w*)([\s\S]+)```/g;
31 | const [, lang, code] = codeBlockRegex.exec(md) || [];
32 | if (!code) {
33 | return md;
34 | }
35 |
36 | const selectedLang = pickLanguage(lang.toLowerCase());
37 | if (!selectedLang) {
38 | return (
39 |
40 |
41 | {code.trim()}
42 |
43 |
44 | );
45 | }
46 |
47 | const highlightedCode = prism.highlight(code.trim(), prism.languages[selectedLang]);
48 |
49 | return (
50 |
51 |
57 | );
58 | }
59 |
60 | function splitTextReducer(frag, text, index) {
61 | if (index % 2) { // Code is always in odd positions
62 | frag.append(highlightCode(text));
63 | } else if (text.length > 0) {
64 | frag.append(text);
65 | }
66 |
67 | return frag;
68 | }
69 |
70 | export default function () {
71 | // Regex needs to be non-capturing ?: and to have the extra () to work with .split
72 | const splittingRegex = /((?:```\w*[\s\S]+```\n?))/g;
73 | $('.tweet-text').each((i, el) => {
74 | const tweetWithCode = el.textContent.split(splittingRegex);
75 | if (tweetWithCode.length === 1) {
76 | return;
77 | }
78 |
79 | const frag = tweetWithCode.reduce(splitTextReducer, new DocumentFragment());
80 | $(el).html(frag);
81 | });
82 | }
83 |
--------------------------------------------------------------------------------
/source/style/code-highlight.css:
--------------------------------------------------------------------------------
1 | /* PrismJS 1.9.0
2 | http://prismjs.com/download.html?themes=prism-okaidia&languages=markup+css+clike+javascript+bash+ruby+diff+go+graphql+java+json+php+powershell+pug+python+jsx+rust+scss+scala+swift+typescript */
3 | /**
4 | * okaidia theme for JavaScript, CSS and HTML
5 | * Loosely based on Monokai textmate theme by http://www.monokai.nl/
6 | * @author ocodia
7 | */
8 |
9 | code[class*='language-'],
10 | pre[class*='language-'] {
11 | color: #c5c8c6;
12 | text-shadow: 0 1px rgba(0, 0, 0, 0.3);
13 | font-family: Inconsolata, Monaco, Consolas, 'Courier New', Courier, monospace;
14 | direction: ltr;
15 | text-align: left;
16 | white-space: pre;
17 | word-spacing: normal;
18 | word-break: normal;
19 | line-height: 1.5;
20 | position: relative;
21 | tab-size: 4;
22 | hyphens: none;
23 | }
24 |
25 | /* Code blocks */
26 | pre[class*='language-'] {
27 | padding: 1em;
28 | overflow: auto;
29 | border-radius: 0.3em;
30 | line-height: 0;
31 | }
32 |
33 | :not(pre) > code[class*='language-'],
34 | pre[class*='language-'] {
35 | background: #1d1f21;
36 | }
37 |
38 | /* Inline code */
39 | :not(pre) > code[class*='language-'] {
40 | padding: 0.1em;
41 | border-radius: 0.3em;
42 | }
43 |
44 | .token.comment,
45 | .token.prolog,
46 | .token.doctype,
47 | .token.cdata {
48 | color: #7c7c7c;
49 | }
50 |
51 | .token.punctuation {
52 | color: #c5c8c6;
53 | }
54 |
55 | .namespace {
56 | opacity: 0.7;
57 | }
58 |
59 | .token.property,
60 | .token.keyword,
61 | .token.tag {
62 | color: #96cbfe;
63 | }
64 |
65 | .token.class-name {
66 | color: #ffffb6;
67 | text-decoration: underline;
68 | }
69 |
70 | .token.boolean,
71 | .token.constant {
72 | color: #9c9;
73 | }
74 |
75 | .token.symbol,
76 | .token.deleted {
77 | color: #f92672;
78 | }
79 |
80 | .token.number {
81 | color: #ff73fd;
82 | }
83 |
84 | .token.selector,
85 | .token.attr-name,
86 | .token.string,
87 | .token.char,
88 | .token.builtin,
89 | .token.inserted {
90 | color: #a8ff60;
91 | }
92 |
93 | .token.variable {
94 | color: #c6c5fe;
95 | }
96 |
97 | .token.operator {
98 | color: #ededed;
99 | }
100 |
101 | .token.entity {
102 | color: #ffffb6;
103 | cursor: help;
104 | /* text-decoration: underline; */
105 | }
106 |
107 | .token.url {
108 | color: #96cbfe;
109 | }
110 |
111 | .language-css .token.string,
112 | .style .token.string {
113 | color: #87c38a;
114 | }
115 |
116 | .token.atrule,
117 | .token.attr-value {
118 | color: #f9ee98;
119 | }
120 |
121 | .token.function {
122 | color: #dad085;
123 | }
124 |
125 | .token.regex {
126 | color: #e9c062;
127 | }
128 |
129 | .token.important {
130 | color: #fd971f;
131 | }
132 |
133 | .token.important,
134 | .token.bold {
135 | font-weight: bold;
136 | }
137 |
138 | .token.italic {
139 | font-style: italic;
140 | }
141 |
142 | .refined-twitter_highlight {
143 | position: relative;
144 | border-radius: 0.3em;
145 | overflow: hidden;
146 | font-size: 14px;
147 | }
148 |
--------------------------------------------------------------------------------
/source/content.js:
--------------------------------------------------------------------------------
1 | import domLoaded from 'dom-loaded';
2 |
3 | import {
4 | enableFeature,
5 | observeEl,
6 | safeElementReady
7 | } from './libs/utils';
8 |
9 | import {autoInitFeatures, features} from './features';
10 |
11 | async function init() {
12 | await safeElementReady('body');
13 |
14 | if (document.body.classList.contains('logged-out')) {
15 | return;
16 | }
17 |
18 | document.documentElement.classList.add('refined-twitter');
19 |
20 | for (const feature of autoInitFeatures) {
21 | enableFeature(Object.assign({}, feature, {fn: feature.fn || (() => {})}));
22 | }
23 |
24 | await domLoaded;
25 | onDomReady();
26 | }
27 |
28 | function onRouteChange(cb) {
29 | observeEl('#doc', cb, {attributes: true});
30 | }
31 |
32 | function onNewTweets(cb) {
33 | observeEl('#stream-items-id', cb);
34 | }
35 |
36 | function onSingleTweetOpen(cb) {
37 | observeEl('body', mutations => {
38 | for (const mutation of mutations) {
39 | const {classList} = mutation.target;
40 | if (classList.contains('overlay-enabled')) {
41 | observeEl('#permalink-overlay', cb, {attributes: true, subtree: true});
42 | break;
43 | } else if (classList.contains('modal-enabled')) {
44 | observeEl('#global-tweet-dialog', cb, {attributes: true, subtree: true});
45 | break;
46 | }
47 | }
48 | }, {attributes: true});
49 | }
50 |
51 | function onGalleryItemOpen(cb) {
52 | observeEl('body', mutations => {
53 | for (const mutation of mutations) {
54 | if (mutation.target.classList.contains('gallery-enabled')) {
55 | observeEl('.Gallery-media', cb, {attributes: true, subtree: true});
56 | break;
57 | }
58 | }
59 | }, {attributes: true});
60 | }
61 |
62 | function onDomReady() {
63 | enableFeature(features.cleanNavbarDropdown);
64 | enableFeature(features.keyboardShortcuts);
65 | enableFeature(features.preserveTextMessages);
66 |
67 | onRouteChange(() => {
68 | enableFeature(features.autoLoadNewTweets);
69 | enableFeature(features.disableCustomColors);
70 | enableFeature(features.hideProfileHeader);
71 | enableFeature(features.hideTrendsAndWhoToFollowCards);
72 |
73 | onNewTweets(() => {
74 | enableFeature(features.codeHighlight);
75 | enableFeature(features.mentionHighlight);
76 | enableFeature(features.hideFollowTweets);
77 | enableFeature(features.hideLikeTweets);
78 | enableFeature(features.hideRetweets);
79 | enableFeature(features.hideRetweetButtons);
80 | enableFeature(features.hideNotificationsInCaseYouMissed);
81 | enableFeature(features.inlineInstagramPhotos);
82 | enableFeature(features.hidePromotedTweets);
83 | enableFeature(features.renderInlineCode);
84 | enableFeature(features.imageAlternatives);
85 | });
86 | });
87 |
88 | onSingleTweetOpen(() => {
89 | enableFeature(features.codeHighlight);
90 | enableFeature(features.mentionHighlight);
91 | enableFeature(features.inlineInstagramPhotos);
92 | enableFeature(features.renderInlineCode);
93 | enableFeature(features.imageAlternatives);
94 | enableFeature(features.hideRetweetButtons);
95 | });
96 |
97 | onGalleryItemOpen(() => {
98 | enableFeature(features.imageAlternatives);
99 | });
100 | }
101 |
102 | init();
103 |
--------------------------------------------------------------------------------
/source/libs/utils.js:
--------------------------------------------------------------------------------
1 | import {h} from 'dom-chef';
2 | import select from 'select-dom';
3 | import elementReady from 'element-ready';
4 | import domLoaded from 'dom-loaded';
5 | import OptionsSync from 'webext-options-sync';
6 |
7 | let options;
8 | const optionsPromise = new OptionsSync().getAll();
9 |
10 | /**
11 | * Enable toggling each feature via options.
12 | * Prevent fn's errors from blocking the remaining tasks.
13 | * https://github.com/sindresorhus/refined-github/issues/678
14 | */
15 | export const enableFeature = async ({fn, id: _featureId = fn.name}) => {
16 | if (!options) {
17 | options = await optionsPromise;
18 | }
19 |
20 | const {logging = false} = options;
21 | const log = logging ? console.log : () => {};
22 |
23 | const featureId = _featureId.replace(/_/g, '-');
24 | if (/^$|^anonymous$/.test(featureId)) {
25 | console.warn('This feature is nameless', fn);
26 | } else if (options[featureId] === false) {
27 | $('html').removeClass(featureId);
28 | log('↩️', 'Skipping', featureId);
29 | return;
30 | }
31 |
32 | try {
33 | $('html').addClass(featureId);
34 | await fn();
35 | log('✅', featureId);
36 | } catch (error) {
37 | console.log('❌', featureId);
38 | console.error(error);
39 | }
40 | };
41 |
42 | /**
43 | * Automatically stops checking for an element to appear once the DOM is ready.
44 | */
45 | export const safeElementReady = selector => {
46 | const waiting = elementReady(selector);
47 |
48 | // Don't check ad-infinitum
49 | domLoaded.then(() => requestAnimationFrame(() => waiting.cancel()));
50 |
51 | // If cancelled, return null like a regular select() would
52 | return waiting.catch(() => null);
53 | };
54 |
55 | export const observeEl = (el, listener, options = {childList: true}) => {
56 | if (typeof el === 'string') {
57 | el = select(el);
58 | }
59 |
60 | if (!el) {
61 | return;
62 | }
63 |
64 | // Run first
65 | listener([]);
66 |
67 | // Run on updates
68 | const observer = new MutationObserver(listener);
69 | observer.observe(el, options);
70 | return observer;
71 | };
72 |
73 | export const domify = html => {
74 | const div = document.createElement('div');
75 | div.innerHTML = html;
76 | return div;
77 | };
78 |
79 | export const getUsername = () => document.querySelector('.DashUserDropdown-userInfo .username > b').textContent;
80 |
81 | export const isModalOpen = () => {
82 | const hasPermalinkOverlay = $('#permalink-overlay').is(':visible');
83 | const isDMModalOpen = $('.modal').is(':visible');
84 | return hasPermalinkOverlay || isDMModalOpen;
85 | };
86 |
87 | export const isProfilePage = () => document.body.classList.contains('ProfilePage');
88 |
89 | export const isOwnProfilePage = () => isProfilePage() && document.body.classList.contains(`user-style-${getUsername()}`);
90 |
91 | export const getFromLocalStorage = value => {
92 | try {
93 | return browser.storage.local.get(value);
94 | } catch (error) {
95 | console.error(`Error while fetching ${value ? JSON.stringify(value, null, '\t') : 'everything'}: ${error}`);
96 | }
97 | };
98 |
99 | export const setToLocalStorage = async value => {
100 | try {
101 | await browser.storage.local.set(value);
102 | } catch (error) {
103 | console.error(`Error in storing ${JSON.stringify(value, null, '\t')} to local storage: ${error}`);
104 | }
105 | };
106 |
--------------------------------------------------------------------------------
/source/features/preserve-text-messages.js:
--------------------------------------------------------------------------------
1 | import pick from 'lodash.pick';
2 | import debounce from 'lodash.debounce';
3 | import DOMPurify from 'dompurify';
4 | import {
5 | getFromLocalStorage,
6 | setToLocalStorage,
7 | observeEl
8 | } from '../libs/utils';
9 |
10 | let isDMModalOpen = false;
11 |
12 | export default function () {
13 | onDMModalOpenAndClose(
14 | handleConversationOpen,
15 | handleDMModalClose
16 | );
17 |
18 | // When the user deletes a conversation remove it from local storage
19 | onMessageDelete(() => removeMessages(idsOfNotDeletedMsgs));
20 | }
21 |
22 | function onMessageDelete(cb) {
23 | const messageDelMutatioOptions = {
24 | childList: true,
25 | subtree: true,
26 | attributes: true
27 | };
28 |
29 | observeEl('body', mutations => {
30 | for (const mutation of mutations) {
31 | if (mutation.target.id === 'confirm_dialog') {
32 | const deleteButton = $('#confirm_dialog_submit_button');
33 |
34 | const onDeleteButtonClick = () => {
35 | cb();
36 | deleteButton.off('click');
37 | };
38 |
39 | deleteButton.on('click', onDeleteButtonClick);
40 | break;
41 | }
42 | }
43 | }, messageDelMutatioOptions);
44 | }
45 |
46 | function onDMModalOpenAndClose(handleConversationOpen, handleDMModalClose) {
47 | observeEl('#dm_dialog', mutations => {
48 | for (const mutation of mutations) {
49 | if (mutation.target.style.display === 'none') {
50 | isDMModalOpen = false;
51 |
52 | handleDMModalClose();
53 | break;
54 | } else {
55 | isDMModalOpen = true;
56 |
57 | observeEl('.DMConversation', mutations => {
58 | for (const mutation of mutations) {
59 | if (mutation.target.classList.contains('DMActivity--open')) {
60 | handleConversationOpen();
61 | break;
62 | }
63 | }
64 | }, {attributes: true, attributeFilter: ['class']});
65 |
66 | break;
67 | }
68 | }
69 | }, {attributes: true});
70 | }
71 |
72 | function handleDMModalClose() {
73 | removeMessages(idsOfNonEmptyMsgs);
74 | }
75 |
76 | function onMessageChange(cb) {
77 | const msgChangeMutationOptions = {
78 | childList: true,
79 | subtree: true,
80 | characterData: true
81 | };
82 |
83 | observeEl('#tweet-box-dm-conversation', debounce(() => {
84 | cb();
85 | }, 150), msgChangeMutationOptions);
86 | }
87 |
88 | function handleConversationOpen() {
89 | restoreSavedMessage();
90 |
91 | onMessageChange(() => handleMessageChange());
92 | }
93 |
94 | async function removeMessages(refinedMsgIdsMaker) {
95 | const {messages: savedMessages} = await getFromLocalStorage('messages');
96 |
97 | if (!savedMessages) {
98 | return;
99 | }
100 |
101 | const idsOfMsgToReSave = refinedMsgIdsMaker(savedMessages);
102 |
103 | const updatedMessages = {
104 | messages: pick(savedMessages, idsOfMsgToReSave)
105 | };
106 |
107 | setToLocalStorage(updatedMessages);
108 | }
109 |
110 | function idsOfNonEmptyMsgs(savedMessages) {
111 | return Object.keys(savedMessages)
112 | .filter(id => !isEmptyMsgInput(savedMessages[id]));
113 | }
114 |
115 | function idsOfNotDeletedMsgs(savedMessages) {
116 | return Object.keys(savedMessages)
117 | .filter(id => id !== getConversationId());
118 | }
119 |
120 | // See: https://gist.github.com/al3x-edge/1010364
121 | function setCursorToEnd(contentEditableElement) {
122 | window.requestAnimationFrame(() => {
123 | const range = document.createRange();
124 | const selection = window.getSelection();
125 | range.selectNodeContents(contentEditableElement);
126 | range.collapse(false);
127 | selection.removeAllRanges();
128 | selection.addRange(range);
129 | });
130 | }
131 |
132 | function getConversationId() {
133 | return document.querySelector('.DMConversation').dataset.threadId;
134 | }
135 |
136 | function getMessageContainer() {
137 | return $('#tweet-box-dm-conversation');
138 | }
139 |
140 | function isEmptyMsgInput(message) {
141 | const messageEl = document.createElement('div');
142 | messageEl.innerHTML = DOMPurify.sanitize(message);
143 | return messageEl.textContent === '';
144 | }
145 |
146 | async function restoreSavedMessage() {
147 | const conversationId = getConversationId();
148 | const messageContainer = getMessageContainer();
149 | if (conversationId) {
150 | const {messages: savedMessages} = await getFromLocalStorage('messages');
151 |
152 | if (!savedMessages) {
153 | return;
154 | }
155 |
156 | const {[conversationId]: savedMessage} = savedMessages;
157 |
158 | if (savedMessage && !isEmptyMsgInput(savedMessage)) {
159 | console.log('prefilling contentEditableElement with savedMessage');
160 | fillContainerWithMessage(messageContainer, savedMessage);
161 | }
162 | }
163 | }
164 |
165 | async function handleMessageChange() {
166 | const conversationId = getConversationId();
167 | const currentMessage = getMessageContainer().html();
168 | const {messages: savedMessages} = await getFromLocalStorage('messages');
169 |
170 | const updatedMessages = {
171 | messages: Object.assign((savedMessages || {}), {[conversationId]: currentMessage})
172 | };
173 |
174 | // We need to check if DM Modal is open because
175 | // twitter unsets the message when DMModal closes.
176 | // Hence we need a way to tell handleMessageChange
177 | // to not store empty message (which happens when DMModal closes)
178 | if (isDMModalOpen) {
179 | setToLocalStorage(updatedMessages);
180 | }
181 | }
182 |
183 | function fillContainerWithMessage(messageContainer, savedMessage) {
184 | messageContainer.empty();
185 | messageContainer.append(savedMessage);
186 | setCursorToEnd(messageContainer[0]);
187 | }
188 |
--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
1 | #
52 |
53 | {domify(highlightedCode)}
54 |
55 |
56 | 
Refined Twitter
2 |
3 | > Browser extension that simplifies the Twitter interface and adds useful features
4 |
5 | **This project is not maintained anymore. Twitter rewrote their website and completely broke this extension, and it's much harder to reliably modify the new website. I also don't have time to fix these things and no one has stepped up to do so either. It had a great run. Thanks for all the love.**
6 |
7 | We use Twitter a lot and notice many dumb annoyances we'd like to fix. So here be dragons.
8 |
9 | ## Install
10 |
11 | - [**Chrome** extension](https://chrome.google.com/webstore/detail/refined-twitter/nlfgmdembofgodcemomfeimamihoknip)
12 | - **Opera** extension: Use [this](https://addons.opera.com/en/extensions/details/download-chrome-extension-9/) to enable installing Chrome extensions and then install [Refined Twitter](https://chrome.google.com/webstore/detail/refined-twitter/nlfgmdembofgodcemomfeimamihoknip)
13 |
14 | *Note: You **must** be logged in for this extension to work.*
15 |
16 | ## Highlights
17 |
18 | *You can configure many of these features in the extension settings.*
19 |
20 | - Simplified and improved UI.
21 | - Hides promoted tweets.
22 | - Auto-loads new tweets in the stream if you're scrolled to the top. No more clicking `See 3 new Tweets`!
23 | - Fixes the file extension when saving images in tweets. No more `foo.jpg_large`!
24 | - Uses the system font.
25 | - [Embeds the photo from Instagram links directly in the tweet.](https://user-images.githubusercontent.com/170270/34315380-12d52994-e77f-11e7-8e23-27b76aee4df2.png)
26 | - Improves performance. [1](https://github.com/sindresorhus/refined-twitter/pull/14) [2](https://github.com/sindresorhus/refined-twitter/commit/23897e251d2bc8d59526129ce54c7a5bf1ef884c)
27 | - Hides "Liked" tweets in the stream.
28 | - [Hides "And others follow" tweets in the stream.](https://user-images.githubusercontent.com/5341072/39945031-cc81125a-5560-11e8-8334-ea310a9dfdad.png)
29 | - [Syntax highlighting in code blocks.](https://github.com/sindresorhus/refined-twitter/issues/37)
30 | - [Adds Markdown-like styling of `text wrapped in backticks`.](https://user-images.githubusercontent.com/12901172/38168571-d9bd82ea-351d-11e8-9858-0d7c8993cdd3.png)
31 | - Uses the original image in tweet image galleries instead of a downsized version.
32 | - [Removes the annoying suggestions in the search popover.](https://user-images.githubusercontent.com/170270/33800304-70198358-dd3d-11e7-9870-477a44f74f4d.png)
33 | - Hides "Notifications" activity for new followers and being added to a list.
34 | - Preserves unsent text in the Messages modal when it closes.
35 | - Highlight your mentions in the stream.
36 | - [Adds a `Likes` button to the main navbar.](https://user-images.githubusercontent.com/14620121/35988497-ace9f93e-0ce5-11e8-8675-17e6ee38cd99.png)
37 | - Keyboard shortcut to toggle Night Mode (Altm).
38 | - Uses your personal color theme on all profiles.
39 | - Hides the header image on profile pages.
40 | - [Shows alternative image text below images when available.](https://user-images.githubusercontent.com/170270/40556400-b46c292c-6076-11e8-8241-f5c4e1a7a161.png)
41 |
42 | Tip: Twitter has a native [dark mode](https://github.com/sindresorhus/refined-twitter/issues/10) and you can toggle it using Altm. And press Shift ? to see all keyboard shortcuts.
43 |
44 | 
45 |
46 | ## Customization
47 |
48 | See the extension settings for what can be configured.
49 |
50 | 
51 |
52 | We're happy to receive suggestions and contributions, but be aware this is an opinionated project. There's a high bar for adding options.
53 |
54 | This doesn't necessarily limit you from manually disabling functionality that is not useful for you. Options include:
55 |
56 | 1. *(CSS Only)* Use a Chrome extension that allows injecting custom styles into sites, based on a URL pattern. [Stylus](https://add0n.com/stylus.html) is one such tool. [Example](https://github.com/sindresorhus/refined-github/issues/136#issuecomment-204072018)
57 |
58 | 2. Clone the repository, make the adjustments you need, and [load the unpacked extension in Chrome](https://developer.chrome.com/extensions/getstarted#unpacked), rather than installing from the Chrome Store.
59 |
60 | ## Contribute
61 |
62 | Suggestions and pull requests are highly encouraged!
63 |
64 | In order to make modifications to the extension you'd need to run it locally.
65 |
66 | Please follow the below steps:
67 |
68 | ```sh
69 | git clone https://github.com/sindresorhus/refined-twitter
70 | cd refined-twitter
71 | npm install # Install dev dependencies
72 | npm run build # Build the extension code so it's ready for the browser
73 | npm run watch # Listen for file changes and automatically rebuild
74 | ```
75 |
76 | Once built, load it in the browser of your choice:
77 |
78 | | Chrome | 81 |Firefox | 82 |
|---|---|
85 |
|
92 |
93 |
|
99 |