diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index e63227d..0db7dcf 100644 --- a/app/_locales/en/messages.json +++ b/app/_locales/en/messages.json @@ -27,6 +27,15 @@ "titleShowCalmText": { "message": "Show \"Calm\" next to the logo" }, + "titleIsFollowerNumberHidden": { + "message": "Hide number of followers" + }, + "titleIsReactionNumberAlwaysHidden": { + "message": "Hide numbers of replies, retweets, and likes when mouse cursor is hovered" + }, + "titleAdditionalSettings": { + "message": "Additional settings" + }, "textCalm": { "message": "Calm" } diff --git a/app/_locales/ja/messages.json b/app/_locales/ja/messages.json index abd564a..c8c8c1a 100644 --- a/app/_locales/ja/messages.json +++ b/app/_locales/ja/messages.json @@ -18,11 +18,20 @@ "message": "おすすめトレンド、ユーザーを隠す" }, "titleIsReactionNumberHidden": { - "message": "ツイートへのリプライ、リツイート、いいね数を隠す" + "message": "ツイートへのリプライ数、リツイート数、いいね数を隠す" }, "titleShowCalmText": { "message": "ロゴの隣に「おだやか」を表示する" }, + "titleIsFollowerNumberHidden": { + "message": "フォロワー数を隠す" + }, + "titleIsReactionNumberAlwaysHidden": { + "message": "カーソルをツイートにのせてもリプライ数、リツイート数、いいね数を隠す" + }, + "titleAdditionalSettings": { + "message": "追加設定" + }, "textCalm": { "message": "おだやか" } diff --git a/app/manifest.json b/app/manifest.json index 97a7d83..62ef2f8 100644 --- a/app/manifest.json +++ b/app/manifest.json @@ -2,7 +2,7 @@ "name": "__MSG_appName__", "short_name": "__MSG_appShortName__", "description": "__MSG_appDescription__", - "version": "1.0.1", + "version": "1.0.2", "manifest_version": 2, "default_locale": "en", "icons": { @@ -30,7 +30,6 @@ "run_at": "document_end" }], "permissions": [ - "tabs", "storage" ] -} \ No newline at end of file +} diff --git a/app/pages/popup.html b/app/pages/popup.html index c98e380..872a836 100644 --- a/app/pages/popup.html +++ b/app/pages/popup.html @@ -23,6 +23,15 @@

__MSG_appName__

__MSG_titleShowCalmText__ - +

__MSG_titleAdditionalSettings__

+ + + diff --git a/app/scripts/background.ts b/app/scripts/background.ts index 155bf7c..c1dad57 100644 --- a/app/scripts/background.ts +++ b/app/scripts/background.ts @@ -1,9 +1,5 @@ -chrome.runtime.onInstalled.addListener((details) => { - console.log('previousVersion', details.previousVersion); +chrome.runtime.onMessage.addListener((request, sender) => { + if ((request.from === 'content') && (request.subject === 'showPageAction')) { + chrome.pageAction.show(sender.tab!.id!); + } }); - -chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => { - if (tab.url!.includes('https://twitter.com/')) { - chrome.pageAction.show(tabId); - } -}); \ No newline at end of file diff --git a/app/scripts/contentscript.ts b/app/scripts/contentscript.ts index 037e4ba..310dad3 100644 --- a/app/scripts/contentscript.ts +++ b/app/scripts/contentscript.ts @@ -1,33 +1,53 @@ -toggleClass(["isExploreHidden", "isTrendsHidden", "isReactionNumberHidden", "showCalmText"]); +toggleClass(["isExploreHidden", "isTrendsHidden", "isReactionNumberHidden", "showCalmText", "isReactionNumberAlwaysHidden", "isFollowerNumberHidden",]); addCalmTitle(); +setTimeout(changeCalmColor, 50); 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.storage.local.get(keys, function (data) { + keys.forEach(key => { + if (key === "isFollowerNumberHidden" || key === "isReactionNumberAlwaysHidden") { + if (typeof data[key] === "undefined") { + data[key] = false; + } + } else { + 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]); +chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) { + toggleClass([request.key]); }); +chrome.runtime.sendMessage({ from: 'content', subject: 'showPageAction' }); + function addCalmTitle() { - let calmText = chrome.i18n.getMessage("textCalm"); - let css = "body.showCalmText header[role=\"banner\"] h1[role=\"heading\"]::after { content:\"" + calmText + "\"; }"; + 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)); +} + +function changeCalmColor() { + let body = document.body || document.getElementsByTagName('body')[0]; + if (body.style.backgroundColor !== 'rgb(255, 255, 255)') { + let css = "body.showCalmText header[role=\"banner\"] h1[role=\"heading\"]::after { color: rgb(255, 255, 255);}"; 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)); -} \ No newline at end of file + } +} diff --git a/app/scripts/popup.ts b/app/scripts/popup.ts index daa3d4b..4bb4af2 100644 --- a/app/scripts/popup.ts +++ b/app/scripts/popup.ts @@ -1,54 +1,58 @@ localize(); -initValues(["isExploreHidden", "isTrendsHidden", "isReactionNumberHidden", "showCalmText"]); +initValues(["isExploreHidden", "isTrendsHidden", "isReactionNumberHidden", "isFollowerNumberHidden", "isReactionNumberAlwaysHidden", "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; - } + 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); - }); + 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]; - }); + chrome.storage.local.get(keys, function (data) { + keys.forEach(key => { + console.log(key + ": " + data[key]); + if (key === "isFollowerNumberHidden" || key === "isReactionNumberAlwaysHidden") { + if (typeof data[key] === "undefined") { + data[key] = false; + } + } else { + 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); -} \ No newline at end of file + toggleChecked(keys); + addClickEventListeners(keys); +} diff --git a/app/styles/contentscript.scss b/app/styles/contentscript.scss index 4651530..322eef8 100644 --- a/app/styles/contentscript.scss +++ b/app/styles/contentscript.scss @@ -1,50 +1,119 @@ body { - &.isExploreHidden { - a[data-testid="AppTabBar_Explore_Link"] { - display: none !important; - } + &.isExploreHidden { + a[data-testid="AppTabBar_Explore_Link"] { + display: none !important; } + } - &.isTrendsHidden { - div[data-testid="sidebarColumn"] > div > div > div > div > div.css-1dbjc4n > div:not(:first-child):not(:last-child) { - display: none !important; - } - div[data-testid="sidebarColumn"] > div > div > div > div > div.css-1dbjc4n > div:last-child { - margin-top: 60px !important; - } + &.isTrendsHidden { + div[data-testid="sidebarColumn"] + > div + > div + > div + > div + > div.css-1dbjc4n + > div:not(:first-child):not(:last-child):not(.r-1tlfku8):not(.r-18bvks7):not(.r-1kqtdi0) { + &:not(.r-195d4m8):not(.r-ahm1il):not(.r-1h3ijdo):not(.r-1mwlp6a):not(.r-1ninfw3) { + display: none !important; + } } + } - &.isReactionNumberHidden { - div[data-testid="primaryColumn"] article div[role="group"] div[role="button"] span { - opacity: 0 !important; - transition-property: transform, opacity !important; - } - div[data-testid="primaryColumn"] article:hover div[role="group"] div[role="button"] span { - opacity: 1 !important; - } + &.isReactionNumberHidden { + div[data-testid="primaryColumn"] + article + div[role="group"] + div[role="button"] + span { + opacity: 0 !important; + transition-property: transform, opacity !important; + } + div[data-testid="primaryColumn"] + article:hover + div[role="group"] + div[role="button"] + span { + opacity: 1 !important; } - &.showCalmText { - header[role="banner"] h1[role="heading"] { - &::after { - position: absolute; - left: 3.75em; - top: 1em; - display: inline-block; - width: 120px; - font-weight: 700; - color: rgb(29, 161, 242); - cursor: default; + &.isReactionNumberAlwaysHidden { + div[data-testid="primaryColumn"] + article:hover + div[role="group"] + div[role="button"] + span { + opacity: 0 !important; + transition-property: transform, opacity !important; + } + } + } - @media screen and (max-width:1279px) { - margin-top: -0.5em; - position: relative; - width: auto; - left: unset; - top: unset; - font-size: 10px; - } - } + &.showCalmText { + header[role="banner"] h1[role="heading"] { + &::after { + position: absolute; + left: 3.75em; + top: 1em; + display: inline-block; + width: 120px; + font-weight: 700; + color: rgb(29, 161, 242); + cursor: default; + font-family: sans-serif; + @media screen and (max-width: 1279px) { + margin-top: -0.5em; + position: relative; + width: auto; + left: unset; + top: unset; + font-size: 10px; } + } + } + } + + &.isFollowerNumberHidden { + div.r-u8s1d div.r-1upvrn0, + div.r-u8s1d div.r-xnswec, + div.r-u8s1d div.r-qo02w8 { + div.css-1dbjc4n.r-18u37iz.r-1w6e6rj > div:last-child > a > span.r-vw2c0b { + display: none !important; + } + } + + div[data-testid="primaryColumn"] > div > div > div > div > div { + & + > div.css-1dbjc4n.r-dr54s0 + > div.css-1dbjc4n.r-18u37iz.r-1w6e6rj + > div:last-child + > a + > span.r-vw2c0b, + & + > div.css-1dbjc4n.r-1cad53l + > div.css-1dbjc4n.r-18u37iz.r-1w6e6rj + > div:last-child + > a + > span.r-vw2c0b, + & + > div.css-1dbjc4n.r-ku1wi2 + > div.css-1dbjc4n.r-18u37iz.r-1w6e6rj + > div:last-child + > a + > span.r-vw2c0b, + & + > div.css-1dbjc4n.r-1ifxtd0 + > div.css-1dbjc4n.r-18u37iz.r-1w6e6rj + > div:last-child + > a + > span.r-vw2c0b, + & + > div.css-1dbjc4n.r-le4sbl + > div.css-1dbjc4n.r-18u37iz.r-1w6e6rj + > div:last-child + > a + > span.r-vw2c0b { + display: none !important; + } } -} \ No newline at end of file + } +} diff --git a/app/styles/popup.scss b/app/styles/popup.scss index 682f432..138f25a 100644 --- a/app/styles/popup.scss +++ b/app/styles/popup.scss @@ -1,35 +1,51 @@ html { - font-family: sans-serif; - font-size: 14px; + font-family: sans-serif; + font-size: 11px; } body { - overflow: hidden; - margin: 0px; - padding: 0px; - background: white; - width: 240px; + font-size: 1rem; +} + +body { + overflow: hidden; + margin: 0px; + padding: 0px; + background: white; + width: 240px; } h1 { - font-size: 1rem; - padding: 10px; - margin: 0; - line-height: 1em; - border-bottom: 1px solid #ddd; + font-size: 1.2rem; + padding: 20px 10px 10px; + margin: 0; + line-height: 1em; +} + +h2 { + font-size: 1rem; + padding: 20px 10px 10px; + margin: 0; + line-height: 1em; + border-top: 1px solid #ddd; } .check { - padding: 10px; - cursor: pointer; - display: block; + padding: 10px; + cursor: pointer; + display: block; } .check:hover { - background: #eee; + background: #eee; } * { - -webkit-user-select: none; - user-select: none; + -webkit-user-select: none; + user-select: none; +} +hr { + margin: 0; + border: none; + border-bottom: 1px solid #ddd; } diff --git a/design/Screenshot_02_ja.png b/design/Screenshot_02_ja.png index 1b7f1fd..c531fe6 100644 Binary files a/design/Screenshot_02_ja.png and b/design/Screenshot_02_ja.png differ diff --git a/design/Screenshot_03_en.png b/design/Screenshot_03_en.png new file mode 100644 index 0000000..23b0b7c Binary files /dev/null and b/design/Screenshot_03_en.png differ diff --git a/design/Screenshot_03_ja.png b/design/Screenshot_03_ja.png new file mode 100644 index 0000000..7996ed5 Binary files /dev/null and b/design/Screenshot_03_ja.png differ diff --git a/design/calm-twitter_design.sketch b/design/calm-twitter_design.sketch index 72b65af..e9a33a1 100644 Binary files a/design/calm-twitter_design.sketch and b/design/calm-twitter_design.sketch differ diff --git a/design/promotion_l.jpg b/design/promotion_l.jpg new file mode 100644 index 0000000..04f41f9 Binary files /dev/null and b/design/promotion_l.jpg differ diff --git a/design/promotion_markey.jpg b/design/promotion_markey.jpg new file mode 100644 index 0000000..5b5dbfe Binary files /dev/null and b/design/promotion_markey.jpg differ diff --git a/design/promotion_s.jpg b/design/promotion_s.jpg new file mode 100644 index 0000000..9329200 Binary files /dev/null and b/design/promotion_s.jpg differ diff --git a/package.json b/package.json index ef33a63..7dc6183 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "calm-twitter", "private": true, - "version": "1.0.1", + "version": "1.0.2", "description": "This extension hides trending information from twitter timelines to make your mind calm.", "scripts": { "start": "npm run dev:chrome",