Tutorial

Let's get started!
Install EmoGuard from the following stores for your device.

Block keywords

Let's hide the keywords for a test.
Look at the following fruit list.

Open EmoGuard on this page and add your keyword by typing Apples in the Enter any Keyword text field.
Congratulations! The top item containing Apples should now be hidden with an emoji.

That's all there is to basic usage.
You can hide text or elements you don't want to see on almost any site without any additional configuration.

Customize how to hide

Remove the Apples you just added to the keyword list.
The hidden text should appear.

Now let's look again at the previous fruit list.

The only keyword specified was Apples, but even the unspecified are red were hidden.
This is because the target hiding mode is "Hide elements".

Some people may want to hide only Apples.
Don't worry, EmoGuard allows you to customize how you hide!

Now you have changed the hiding mode from Hide elements to Hide text!
If you go back to the fruit list, you will see that only the part of the keyword you specified is hidden.

You can flexibly adjust the hiding mode in this way.

Add CSS selectors

Sometimes elements are not well hidden even after adding keywords.
Open EmoGuard and add Grapes to the keyword list.

Perhaps there was no response of any kind.
Why is that?

<span>
  <foo>🍇 Grapes are purple</foo>
</span>

If you look at the HTML, it is obvious that the uncommon HTML tag <foo> was used here.
EmoGuard supports a CSS selector called "Default CSS Selector" by default.
The Default CSS Selector supports the <span> tag, but not the special tag <foo>.

Solution

There are several solutions, but let's try the former first.

Congratulations! This time it was well hidden.

There are a wide variety of websites in the world.
You may encounter pages that cannot be handled by EmoGuard's default settings.

Don't worry. You can add CSS selectors to deal with it.

Customize the keyword search range

Remember the previous solution.

Now let's try the latter approach.

Next we want to hide Oranges.
For the sake of the tutorial, we have prepared a special tag called <bar>.

Open EmoGuard and add Oranges to the keyword list.

<span>
  <bar>🍊 Oranges are orange</bar>
</span>

It is still not well hidden. (That's the intent)

Earlier we added a new CSS selector, which was simple and straightforward.
Why do we need another method?

HTML has an incredibly nested element structure.
You may try to add bar to the CSS selector list as before, but what if the following new HTML appears?

<span>
  <bar>
    <baz>🍈 Melons are green</baz>
  </bar>
</span>

What a mess!
You have just added bar and now you have to add baz as well.
Soon after, you will realize that there is no end to this struggle.

To be able to block keywords as you wish, you will have to confront this HTML nesting structure.

Rest assured, we have a way.
EmoGuard provides two modes for keyword searching: Shallow search and Deep search.

The reason Oranges was not hidden earlier was because the target CSS selector was set to Shallow search.
Shallow search targets only the text directly below the element, but directly below the <span> tag is the <bar> tag, not the text 🍊 Oranges are orange.

Deep search that searches through all descendant elements would likely find Oranges successfully.

Congratulations! This time it worked.

Now nested elements are no longer a problem.

Good work!

This concludes the tutorial.
We recommend that you reset the Default CSS Selector on the Options page to restore the settings you changed in this tutorial.

🎉Happy internet life!🎉