Initial Commit

.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    ["env", {
+      "targets": {
+        "browsers": "last 2 versions"
+      },
+      "useBuiltIns": true,
+      "debug": false
+    }]
+  ],
+  "ignore": ["node_modules"]
+}

.editorconfig

@@ -0,0 +1,12 @@
+# http://editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.gitattributes

@@ -0,0 +1 @@
+* text=auto

.gitignore

@@ -0,0 +1,8 @@
+
+.DS_Store
+
+node_modules
+npm-debug.log
+
+dist/
+packages/

README.md

@@ -0,0 +1,76 @@
+# odayaka-twitter
+
+The plugin that hides trending information to make your twitter timeline calm.
+
+## Installation
+
+	$ npm install
+
+## Usage
+
+Run `$ gulp --watch` and load the `dist`-directory into chrome.
+
+## Entryfiles (bundles)
+
+There are two kinds of entryfiles that create bundles.
+
+1. All ts-files in the root of the `./app/scripts` directory
+2. All css-,scss- and less-files in the root of the `./app/styles` directory
+
+## Tasks
+
+### Build
+
+    $ gulp
+
+
+| Option         | Description                                                                                                                                           |
+|----------------|-------------------------------------------------------------------------------------------------------------------------------------------------------|
+| `--watch`      | Starts a livereload server and watches all assets. <br>To reload the extension on change include `livereload.js` in your bundle.                      |
+| `--production` | Minifies all assets                                                                                                                                   |
+| `--verbose`    | Log additional data to the console.                                                                                                                   |
+| `--vendor`     | Compile the extension for different vendors (chrome, firefox, opera, edge)  Default: chrome                                                                 |
+| `--sourcemaps` | Force the creation of sourcemaps. Default: !production                                                                                                |
+
+
+### pack
+
+Zips your `dist` directory and saves it in the `packages` directory.
+
+    $ gulp pack --vendor=firefox
+
+### Version
+
+Increments version number of `manifest.json` and `package.json`,
+commits the change to git and adds a git tag.
+
+
+    $ gulp patch      // => 0.0.X
+
+or
+
+    $ gulp feature    // => 0.X.0
+
+or
+
+    $ gulp release    // => X.0.0
+
+
+## Globals
+
+The build tool also defines a variable named `process.env.NODE_ENV` in your scripts. It will be set to `development` unless you use the `--production` option.
+
+
+**Example:** `./app/background.ts`
+
+```typescript
+if(process.env.NODE_ENV === 'development'){
+  console.log('We are in development mode!');
+}
+```
+
+
+
+
+
+

app/_locales/en/messages.json

@@ -0,0 +1,33 @@
+{
+  "appName": {
+    "message": "Calm Twitter",
+    "description": "The name of the application"
+  },
+  "appShortName": {
+    "message": "calm-twitter",
+    "description": "The short_name (maximum of 12 characters recommended) is a short version of the app's name."
+  },
+  "appDescription": {
+    "message": "This extension hides trending information from twitter timelines to make your mind calm.",
+    "description": "The description of the application"
+  },
+  "browserActionTitle": {
+    "message": "Calm Twitter",
+    "description": "The title of the browser action button"
+  },
+  "titleIsExploreHidden": {
+    "message": "Hide explore tab"
+  },
+  "titleIsTrendsHidden": {
+    "message": "Hide trends and who to follow from right column"
+  },
+  "titleIsReactionNumberHidden": {
+    "message": "Hide numbers of replies, retweets, and likes"
+  },
+  "titleShowCalmText": {
+    "message": "Show \"Calm\" next to the logo"
+  },
+  "textCalm": {
+    "message": "Calm"
+  }
+}

app/_locales/ja/messages.json

@@ -0,0 +1,29 @@
+{
+  "appName": {
+    "message": "おだやかTwitter",
+    "description": "The name of the application"
+  },
+  "appDescription": {
+    "message": "この拡張機能はTwitterのタイムラインからトレンド情報を隠して、あなたの心を穏やかにしてくれます。",
+    "description": "The description of the application"
+  },
+  "browserActionTitle": {
+    "message": "おだやかTwitter",
+    "description": "The title of the browser action button"
+  },
+  "titleIsExploreHidden": {
+    "message": "話題を検索タブを隠す"
+  },
+  "titleIsTrendsHidden": {
+    "message": "おすすめトレンド、ユーザーを隠す"
+  },
+  "titleIsReactionNumberHidden": {
+    "message": "ツイートへのリプライ、リツイート、いいね数を隠す"
+  },
+  "titleShowCalmText": {
+    "message": "ロゴの隣に「おだやか」を表示する"
+  },
+  "textCalm": {
+    "message": "おだやか"
+  }
+}

app/manifest.json

@@ -0,0 +1,36 @@
+{
+  "name": "__MSG_appName__",
+  "short_name": "__MSG_appShortName__",
+  "description": "__MSG_appDescription__",
+  "version": "1.0.0",
+  "manifest_version": 2,
+  "default_locale": "en",
+  "icons": {
+    "16": "images/icon-16.png",
+    "128": "images/icon-128.png"
+  },
+  "background": {
+    "scripts": [
+      "scripts/background.js"
+    ],
+    "persistent": true
+  },
+  "page_action": {
+    "default_icon": {
+      "19": "images/icon-19.png",
+      "38": "images/icon-38.png"
+    },
+    "default_title": "__MSG_browserActionTitle__",
+    "default_popup": "pages/popup.html"
+  },
+  "content_scripts": [{
+    "matches": ["https://twitter.com/*"],
+    "js": ["scripts/contentscript.js"],
+    "css": ["styles/contentscript.css"],
+    "run_at": "document_end"
+  }],
+  "permissions": [
+    "tabs",
+    "storage"
+  ]
+}

app/pages/popup.html

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <title>__MSG_appName__</title>
+    <link rel="stylesheet" type="text/css" href="../styles/popup.css">
+</head>
+<body>
+    <h1>__MSG_appName__</h1>
+    <label class="check">
+        <input type="checkbox" id="isExploreHidden" checked>
+        <span>__MSG_titleIsExploreHidden__</span>
+    </label>
+    <label class="check">
+        <input type="checkbox" id="isTrendsHidden" checked>
+        <span>__MSG_titleIsTrendsHidden__</span>
+    </label>
+    <label class="check">
+        <input type="checkbox" id="isReactionNumberHidden" checked>
+        <span>__MSG_titleIsReactionNumberHidden__</span>
+    </label>
+    <label class="check">
+        <input type="checkbox" id="showCalmText" checked>
+        <span>__MSG_titleShowCalmText__</span>
+    </label>
+    <script src="../scripts/popup.js"></script>
+</body>
+</html>

app/scripts/background.ts

@@ -0,0 +1,9 @@
+chrome.runtime.onInstalled.addListener((details) => {
+    console.log('previousVersion', details.previousVersion);
+});
+
+chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
+    if (tab.url!.includes('https://twitter.com/')) {
+        chrome.pageAction.show(tabId);
+    }
+});

app/scripts/contentscript.ts

@@ -0,0 +1,33 @@
+toggleClass(["isExploreHidden", "isTrendsHidden", "isReactionNumberHidden", "showCalmText"]);
+addCalmTitle();
+
+function toggleClass(keys: string[]) {
+    chrome.storage.local.get(keys, function(data) {
+        keys.forEach(key => {
+            if (typeof data[key] === "undefined") {
+                data[key] = true;
+            }        
+            let body = document.getElementsByTagName('body')[0];
+
+            if (data[key]) {
+                body.classList.add(key);
+            } else {
+                body.classList.remove(key);
+            }
+        });
+    });
+}
+
+chrome.runtime.onMessage.addListener(function(request, sender, sendResponse){
+    toggleClass([request.key]);
+});
+
+function addCalmTitle() {
+    let calmText = chrome.i18n.getMessage("textCalm");
+    let css = "body.showCalmText header[role=\"banner\"] h1[role=\"heading\"]::after { content:\"" + calmText +  "\"; }";
+    let head = document.head || document.getElementsByTagName('head')[0];
+    let style = document.createElement('style');
+    head.appendChild(style);
+    style.type = 'text/css';
+    style.appendChild(document.createTextNode(css));
+}

app/scripts/popup.ts

@@ -0,0 +1,54 @@
+localize();
+initValues(["isExploreHidden", "isTrendsHidden", "isReactionNumberHidden", "showCalmText"]);
+
+function localize() {
+    var objects = document.getElementsByTagName('html');
+    for (var j = 0; j < objects.length; j++)
+    {
+        var obj = objects[j];
+
+        var valStrH = obj.innerHTML.toString();
+        var valNewH = valStrH.replace(/__MSG_(\w+)__/g, function(match, v1)
+        {
+            return v1 ? chrome.i18n.getMessage(v1) : "";
+        });
+
+        if(valNewH != valStrH)
+        {
+            obj.innerHTML = valNewH;
+        }
+    }
+}
+
+function addClickEventListeners(keys: string[]) {
+    keys.forEach(key => {
+        var input = document.getElementById(key);
+        input!.addEventListener('click', function(event) {
+            var checkbox = event.target as HTMLInputElement;
+            chrome.storage.local.set({[key] : checkbox!.checked}, function () {});
+
+            chrome.tabs.query( {active: true, currentWindow: true}, function(tabs){
+                let tabId = tabs[0].id;
+                chrome.tabs.sendMessage(tabId!, {key: key}, function(){});
+            });
+        }, false);
+    });
+}
+
+function toggleChecked(keys: string[]) {
+    chrome.storage.local.get(keys, function(data) {
+        keys.forEach(key => {
+            console.log(key + ": " + data[key]);
+            if (typeof data[key] === "undefined") {
+                data[key] = true;
+            }
+            var input = document.getElementById(key) as HTMLInputElement;
+            input!.checked = data[key];
+        });
+    });
+}
+
+function initValues(keys: string[]) {
+    toggleChecked(keys);
+    addClickEventListeners(keys);
+}

app/styles/contentscript.scss

@@ -0,0 +1,50 @@
+body {
+    &.isExploreHidden {
+        a[data-testid="AppTabBar_Explore_Link"] {
+            display: none !important;
+        }
+    }
+
+    &.isTrendsHidden {
+        div[data-testid="sidebarColumn"] div.css-1dbjc4n.r-1l5qxre.r-m611by > div:not(:first-child):not(:last-child) {
+            display: none !important;
+        }
+        div[data-testid="sidebarColumn"] div.css-1dbjc4n.r-1l5qxre.r-m611by > div:last-child {
+            margin-top: 60px !important;
+        }
+    }
+
+    &.isReactionNumberHidden {
+        div[data-testid="primaryColumn"] article div.r-1mdbhws span.r-1n0xq6e {
+            opacity: 0 !important;
+            transition-property: transform, opacity !important;
+        }
+        div[data-testid="primaryColumn"] article:hover div.r-1mdbhws span.r-1n0xq6e {
+            opacity: 1 !important;
+        }
+    }
+
+    &.showCalmText {
+        header[role="banner"] h1[role="heading"] {
+            &::after {
+                position: absolute;
+                left: 56px;
+                top: 15px;
+                display: inline-block;
+                width: 120px;
+                font-weight: 700;
+                color: rgb(29, 161, 242);
+                cursor: default;
+
+                @media screen and (max-width:1279px) { 
+                    margin-top: -0.5em;
+                    position: relative;
+                    width: auto;
+                    left: unset;
+                    top: unset;
+                    font-size: 10px;
+                }
+            }
+        }
+    }
+}