💡Smart-Highlight💡: Highlight keywords from top.document.URL

[dnknn]

PLEASE NOTE: This will be a brand new feature, different from the current highlighting logic.

• Have you ever thought of such a scene where keywords are automatically highlighted?:
  Users do not need to set specific keywords.
  Instead, it extracts URL-specific matching rules as highlighted keywords.
  Please see this screenshot demo

Obviously, this is also a very practical scenario requirement!!! And it's easy to do 🙂😁❗❣

📝 Implementation plan/draft:

• Added a new option to the current UI interface: match keywords on URLs.
  1️⃣ add UI: ⬜/✅ URL-keyword matcher ( title='tooltip: Extract keywords from URL' )
  2️⃣ The user fills in the keyword/regular to match the URL
  3️⃣ In other words, the logic at this time will extract the rule from the URL to become the keyword of the current logic.
  4️⃣ Below is a simple code demonstration:

For example:
https://community.bitwarden.com/search?q=password

Then we want to automatically highlight the keyword rules after search?q= on the domain URL, That is, we want to automatically highlight the keyword password from the URL.

	const _URL_ = decodeURIComponent(top.location.href); // top.document.URL
	const URL_Keyword = _URL_.match(`q=(.+)`)?.[1];
// or 👇
	const URL_Keyword = _URL_.split(`q=`)[1];
// or 👇
	const URL_Keyword = _URL_.replace(/.+search\?q=(.+)/i ,`$1`);

if (URL_Keyword )	{
	Keywords for the current version = URL_Keyword; // 😁
}

At this point, we can all get the keyword of the password rule on the URL.
That is to say, extract a fixed string of URL or a non-fixed string of regular rules to automatically generate a keyword.
Finally, according to the current logic to highlight the keyword password

---

Of course, the above is the extraction of URL keywords at the code level,
Instead of extracting URL rules from the user UI, I think it should be a regular find/replace method.

• what page to apply to ?
  It is still the current version, exactly the same. Then the difference is: ↴

When the user click 👇 to Check/Enable, 2 input boxes will appear:

• ✅ URL-keyword matcher
Find : fill in .+search\?q=(.+)
replace : fill in $1

The resulting $1 will be highlighted as a keyword similar to the current version.

// DOM demo
	const Find_str = document.getElementById(`find`).value;
	const replace_str = document.getElementById(`replace`).value;
	const URL_Keyword = _URL_.replace(Find_str, replace_str);

---

In short, there should be many ways to easily implement it, and the above are all examples/demo purposes. I think you should be able to understand this function.

There are many search result pages of websites that list a lot of irrelevant items. If there is this function, it can automatically highlight the precise keywords carried by the URL.
So, I think this new feature will be very useful and hope to be adopted.
Because it is easy to implement, it is only necessary to add a logic to obtain keywords from URLs in the current version.