DEV Community: harry

[Chrome Extension Tutorial] How to mute noise on Twitter

harry — Thu, 09 Jul 2020 16:51:35 +0000

Intro

This tutorial provides you with a step-by-step guide to create a custom Chrome Extension which mutes noise on Twitter.

Of course, you can customize this tutorial code so that you learn more things. The best way for you to learn new things is to get motivated by yourself. If you use Facebook, Tiktok or another SNS, then just try to mute what you want.

Here are the files that you'll create during the tutorial:

$ tree .
muteTwitterNoise/
├── contentBlock.css
└── manifest.json

You can also find code at my git repo.

Test Environment

OS: macOS Catalina v10.15.5
Browser: Chrome Version 83.0.4103.116 (Official Build) (64-bit) (Jun 22, 2020 Released)

Getting Started

Many social media want to catch eyes as much as possible and they want us to read much content on Twitter, Facebook, TikTok, etc. I personally don't like to see too much info except for what I really want to know.

As I know there are some people on Twitter who are sensitive about an increase/a decrease in the number of followers. I am such a person so I want to mute that. I also want to mute "Trends" and "Who to follow" since I have no interest in those.

What to do?

There are mainly two ways to block content:

Use Javascript
Use CSS

I realize that using javascript is a bit difficult for beginners since it requires some advanced DOM knowledge, so I decided to explain the CSS way.

Create a Chrome Extension

1. Manifest file

manifest.json is the very first file that a Chrome extension will load. You can describe name, version, description and where & which code you want to perform.

Create a folder, in this tutorial, I use muteTwitterNoise.
Create the manifest.json below under the folder:

{
    "name": "muteTwitterNoise",
    "version": "1.0.0",
    "manifest_version": 2,
    "description": "mute twitter noise",
    "content_scripts": [{
    "matches"    : [ "*://twitter.com/*" ],
    "run_at"     : "document_end",
    "css"        : ["contentBlock.css"]
    }]
}

Tips:

Q. Which patterns can I use in the matches?
A. https://developer.chrome.com/extensions/content_scripts#declaratively

Q. What is run_at: "document_end"?:
A. https://developer.chrome.com/extensions/content_scripts#run_time

2. CSS file

Since the step above, you specify "css: contentBlock.css" in the code, you can load a custom css. Here is my example code:

Create the contentBlock.css under the same folder before:

/***
 * Mute followers
 */
div[data-testid="primaryColumn"] > div > div > div > div > div > div > div > div > a[href$="/followers"] {
    display:none !important;
}

/***
 * Mute everything except for the first element (it's usually Search)
 */
div[data-testid="sidebarColumn"] > div > div > div > div > div > div:not(:nth-child(1)) {
    display:none !important;
}

Tips:

Q. What is the nth-child?
A. https://css-tricks.com/useful-nth-child-recipies/

Q. What is the !important?
A. Overriding the CSS properties using another CSS rule.

Q. What is the a[href$="/followers"]
A. https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

Load the Extension on your browser

Great news, you've almost done! But of course, you need to load the extension to activate that :)

Access your extension management page: chrome://extensions
Make sure that the "Developer mode" is turned on.
Click the "Load unpacked" and choose the muteTwitterNoise folder.
Make sure the extension is loaded.

Check Twitter!

Everything is done, so let's access Twitter :)

Home
Notifications
Profile

It is very easy, isn't it?

Some of you may not be familiar with CSS Selector so here is an optional guide to explain how to identify a path of CSS.

Identify the CSS Path of Followers on Twitter

Each HTML element has its path. Before hiding some content on websites, you need to identify where you want to apply a change.

Access to your twitter profile page. Open the right-click menu on the followers and select "Inspect".
Click "Copy → Copy XPath" on the Elements tab.
You should see such a path below.

//*[@id="react-root"]/div/div/div[2]/main/div/div/div/div/div/div/div/div/div[1]/div/div[5]/div[2]/a/span[2]/span

On the Elements tab, you can just scroll up a bit and try to find a specific element. I found the (2) div[data-testid="primaryColumn"] which also includes the element of Followers at (1). So I copied the XPath.

//*[@id="react-root"]/div/div/div[2]/main/div/div/div/div

Compare both XPaths.

//*[@id="react-root"]/div/div/div[2]/main/div/div/div/div/div/div/div/div/div[1]/div/div[5]/div[2]/a/span[2]/span
//*[@id="react-root"]/div/div/div[2]/main/div/div/div/div

You may realize there are 8 div elements from the div[data-testid="primaryColumn"] to the <a> element of Followers. So in this case, you can specify the CSS path as the path below:

div[data-testid="primaryColumn"] > div > div > div > div > div > div > div > div > a[href$="/followers"] {
    display:none !important;
}

There might be more effective techniques to identify CSS paths so any comments & opinions are welcome.

Summary

I thought it would be hard to create a Chrome extension but it's not. Lots of room remain for improvement and future work though, done is better than perfect 😉

If you have something to share, please leave your comment and let me know!

See you next!

Incorrect string value issue during migration database in Jira.

harry — Fri, 04 Jan 2019 20:09:40 +0000

Problem

I was using H2 database (embedded database) for Jira but this caused a performance problem which consumes a lot of CPU.

the embedded database can fail any time, it's not as secure as MySQL. It's just a basic DB for testing purposes. When your Jira instance grows you'll experience performance problems as well.

Quoted from: So whats wrong with the embedded database?

When I tried to migrate Jira database from H2 to MySQL, I got an error, 'Incorrect string value: '\xF0\x9F\x98\x96...' due to multibyte problems.

My environment

$ lsb_release -a: Ubuntu 14.04.5 LTS
$ mysqld -V: Ver 5.5.62-0ubuntu0.14.04.1
Jira v7.12.1

Cause

MySQL seems not to handle well multibyte characters.

Resolution

Use PostgreSQL instead MySQL. That's because you will have less multibyte problem by using PostgreSQL.¹ The easiest way to migrate to PostgreSQL is the followings:

Create an export of your data as an XML backup. See Backing up data for details.

Create a new database on your new database server to house JIRA's data. See the appropriate database configuration guide in the Connecting JIRA to a database section for the database creation instructions.

Shut down your JIRA server.

Make a backup of your JIRA home directory and JIRA installation directory.

Delete the dbconfig.xml file in your JIRA home directory.

Restart JIRA and you should see the first step of the JIRA setup wizard for configuring your database connection.

Configure JIRA's connection to your new database (created in step 2 above) and click the 'Next' button.

On the 'Application Properties' setup page, click the 'import your existing data' link and restore your data from the XML backup created in step 1 above.

Quoted from: Migrating JIRA's data to a different type of database server

Reference

I spent many hours on multibyte things, but many people recommend to convert your data's char-code into a specific char-code during import of Jira's data. I tried everything but all the approaches did not fix the problem in my case. ↩

strongSwan has established connections but some of them don't work.

harry — Fri, 04 Jan 2019 13:41:06 +0000

Liquid syntax error: 'raw' tag was never closed

How to run Jira application over https?

harry — Wed, 04 Jul 2018 13:50:56 +0000

Liquid syntax error: 'raw' tag was never closed

How to validate cloudformation templates on your computer?

harry — Mon, 02 Jul 2018 14:46:19 +0000

Liquid syntax error: 'raw' tag was never closed