Build up rules in your private xBlocker Extension

If you, like me, have been fed up with websites that prompt you to log in or open them on apps when you want to browse a post and even some programming websites that don't allow you to copy code, this extension is for you exactly.

Before I started to create this extension, I researched some extensions (such as Absolute Enable Right Click & Copy, SuperCopy) and some scripts on UserScript. The problems with these were:

• Many of the features didn't work on many pages anymore (e.g.scripts in UserScript), because the frequency of content changing on target pages far exceeds the frequency of one person as an author to change code.
• The interaction was not user-friendly or aesthetically pleasing.
• The blocking rules easily became outdated, and users could not fix them themselves - User-defined rules were not supported.
• Some pages' functionality was achieved due to the author's specific ticky logic for that website - it was too customized and easily became broken.

this extension implements the following functions and makes up for the shortcomings of the above tools:

• Automatically hides certain elements on a webpage, such as a login account pop-up or the download App pop-up that always pops up when browsing certain posts up and down.
• Automatically clicks on certain elements on the page, such as the button which displays "the link that is going to navigate is not verified".
• Removes the unselectable and uncopyable restrictions on some document pages.

Instructions

Since there are no built-in rules, you need to create rules ahead before you can use them. This strategy is based on the following two considerations:

• Everyone's browsing habits are different. If everyone uses the same rules, the rules will be too comprehensive and most of them will be redundant for a specific individual, resulting in a lot of useless logic when executed.
• Provide a subscription mode to encourage users to create their own set of rules, and independent rules, and publish them as subscription links. Also allow others to subscribe to the subscription they need, combining all of the subscriptions and rules they create themselves into a set of rules that best suits their own needs.

"Use subscription rules to address common needs, plus your own personalized rules" - this combo constitutes a set of rules that fully meets your own needs, creating a fresh, efficient online surfing experience.

Create rules

The extension itself is a tool and platform with no built-in rules. You need to add them yourself in the following two ways:

• Create your own rules. Right-click on the element you want to operate on or click on the toolbar in the upper right corner. Select Create Rule from the Popup function menu that appears and follow the prompts to modify and save it to take effect. This rule is completely customized for your own needs and is highly adaptable. If you know programming to HTML, you can create very efficient rules. You can also share your rules with others and let them subscribe.
• Subscribe to rules created by others. There are some rule samples and rules created by others on github's issues page. You can directly select other user's rules and add them to your subscription list. You can also enable and disable them easily.

Steps to create a rule

There are two different ways to create:

• Select "Generate Rule (beta)" from the right-click menu.

• Select "Manually Create Rule (beta)" from the icon in the upper right corner toolbar.

How to choose between these two methods?

• The right-click mode is suitable for selecting large-size elements, such as pictures or top banners. The operation steps are quick, but if the web page disables the default right-click functionality, it will not be possible to do so; or if it is difficult to locate the element you intend to select by right-click action. Users also need to test whether the automatically generated "selector" meets expectations.
• After clicking on the toolbar, you can manually create rules in the menu. This can be used on any page, including pages where the right-click has been customized and blocked the default behavior of context menu. However, it requires a few more steps to select elements by mouse moving around. The advantage is that all interfaces can be used.

Rule field description

1. Webpage address rule

Refers to the websites where the rule takes effect. Currently, only "*" is supported, which can be used as a prefix or suffix. If you are not sure whether it is correct, you can go to the settings page to test it.

Generally, you can use the rule <domain>/* to enable it on the whole site, such as

dev.to/*

If users want to achieve more precise and fine-grained rules, you can set certain pages on this domain to be enabled, such as

dev.to/view/*

1. Matching selector

Supports all CSS3 selectors and custom content selectors

:contains('content')

When using "Create Rule Manually", the selector will be automatically generated. If the selector is too long, you need to edit it manually for a shorter selector, delete some less important selectors, and click "Test Selector" to see if it is correct.

If you are a user who has the skill of mastering CSS, you can amend the selector yourself to make it more efficient and general. For example, Assuming that the automatically generated content is #dd_banner_35, you can change it to div[id^=dd_banner_] yourself, which can match multiple elements, such as #dd_banner_8, etc.

1. Operation type

Refers to the operation to be performed after matching the element. Currently, be able to:

• Automatically hide certain elements, such as subscription pop-ups and activity overlays.
• Automatically click on certain elements, such as the pop-up to confirm acceptance of cookies.
• Automatically redirect to certain links, such as some websites that prompt "Going to visit an unsafe website" purely to evade their responsibility and then create a temporary page to annoy users.
• Automatically inject styles. Commonly used to remove text restrictions to select and copy text. It is not recommended to inject a lot of styles to drastically beautify web pages;
• Injecting JS scripts is not supported because it is too dangerous and uncontrollable, both for the users and the web pages.

How to choose between "Click on certain elements" and "Auto-hide certain elements"?

For some full-screen pop-ups, selecting "Auto-hide" can hide the full-screen pop-up, however, sometimes the page cannot be scrolled. So it is more appropriate to select "Auto-click" certain elements to close pop-ups.

1. Rule name

Although the current page title will be filled in as the rule name when the rule is automatically generated, it is much more recommended to describe the intention of this rule. Commonly used as follows:

• close the forced login pop-up
• Skip prompt page for security check to an external link
• Automatic check-in script
• Automatically expand collapsed content

This name can be filled in at your will, but if the name is different even if the rules have the same data and type value, it is considered a different rule.

Key interface

In addition to the most important settings center, the hints in the upper left corner and the "Currently Active Rules" list in the toolbar menu are also very important.

Top left hint

This hint prompts the rules that are currently active on the current page, avoiding the situation where something happens on the page but you don't know what happened, giving the user the right to know.

You can modify whether the prompt is displayed and the display duration in the settings.

Here, you can selectively enable only some rules for a specific page, without having to go to the settings center to delete the rules for this page.

re-enable copy text

Some web pages pursue higher UV/PV, so they will block the "Copy" functionality in the right-click menu or even the ability to select text. Using the "Extract Text by Force" functionality in the upper right corner grants users the power to copy text freely.

Click "Extract Text by Force" to enter the selection interface to copy the target content.

Step 1: Select the content to be exported.

Move the mouse, and the candidate elements will be highlighted with a red border. If the mouse you are using has a middle scroll wheel, you can use the front and back scrolling to quickly navigate between the parent node and the first child node.

Select content in this overlay to copy.

Subscription rules

In addition to creating your own rules, you can also subscribe to rules shared by others. Find the rules you are interested in in the extension's rule list, copy the link, and add the subscription address on the settings page.

Share your own rules

The extension itself does not have any built-in rules. Users can share the rules they have created on GitHub for people with the same knowledge field to subscribe to. Especially for expert users who master CSS to contribute their set of rules to users who do not know about Web development.

The recommended approach is to decompose your rules into a combination of multiple rules according to category and purpose, such as:

• Rules to remove subscription and activity promotion pop-ups
• Rules to remove unselectable restrictions
• Rules for "blabla" pages

The subscribed rules will be saved locally once they are downloaded. If the remote rules are changed, they can re-download again by clicking Update from Remote Url.

You need to have a GitHub account to share rules.

Download

Go to the extension store in each browser, search for AccessHappily

1. Chrome Store

2. Firefox Add-ons

In addition, if you, the reader, have any good ideas, please leave a message here and discuss them.