Logi-Search

Inspiration

We wanted to think of a simple solution that would solve a repetitive/redundant task anyone is faced when researching/surfing the net/exploring. Additionally we were inspired by Logitech's mouse, and wanted incorporate and cater a solution for the mouse so that it could "shine" in the end result.

What it does

We have built a google chrome extension that has predominantly two features. The first is for when you search something in Google, there is an option to "shift" + "scroll" (preferably using the mouse) in order to "focus" and hover over each link without having to hover them with your mouse. Then if you would like to access that particular link, you would simply have to press on the scroll button, which would open a new tab for you with the link. However, you will continue in the Google search page in case you wanted to open more links. The second feature is a Find Feature; usually when you're looking for information and find an article/web-page that could offer you information, the quick and easy way to navigate to the information relevant to you is a "Control"+"Find". What our extension does is pre-find and highlight the words that were in your search, and you could simply navigate through the page with the same "shift"+"scroll" mechanism.

How we built it

We built this extension by using the Chrome Extension Developer tool, and linking a Pack extension. We used Javascript/CSS for this extension to build the functionalities behind each feature.

For the first feature, we managed to do the "focus" for the listed links, as well as the auto-scroll. We prevented a regular scroll when activating this extension with pressing on "shift", and managed to scroll through the links and "focus" on them. We also managed to click and open them with the scroll button itself, as well as open them in new tabs, and stay on the current search tab.

For the second feature, we created a rudimentary protocol to communicate the searched words between the search page and the navigated page. That's done through a background service (acting as the middle man). Then, once the navigated page is loaded, it requests the search query and then performs a traversal of the DOM () to find and highlight the occurrences of the words in the search query. We apply the same scrolling mechanism as the first feature.

Challenges we ran into

For our second said feature, the communication and traversal of the DOM to highlight the correct words was a challenge. It was difficult because we were searching for multiple words at the same time, and there is no standard API to do that (we cannot simply use "Control"+"Find"). Furthermore, when finding the words, we have to scroll in such a way to show the order they are shown in the website, and not word by word as that would make the experience jumpy.

Debugging across multiple tabs was also a challenge, more so because it was something new to us. It was hard to know the root of a problem because it wasn't so clear as to what it was. Therefore there was a bit of the "trial and error" approach when doing so.

Accomplishments that we're proud of

Generally, we are quite proud of the idea and usability behind this final product. We believe that this is a simple, yet effective and efficient extension for the everyday use. It was one of those "why didn't I think of this before" moments when brainstorming, and we are satisfied with it.

We are also proud of the execution, managing to pull off two concrete and demonstrable features for our final product.

What we learned

We learned how to navigate between tabs, as well as how to communicate between them. We've learned how to "focus" on links and make this visible for the end-user. We learnt more about web-domains and how they work (their limits, security, possibilities).

We also learned how to look at things through a marketing standpoint, and try to incorporate our application to be catered for a physical hardware.

Finally, we learnt that small ideas can turn out to be a great product. Going simple is fun, and seeing your project come to live for submission is a very satisfying feeling.

What's next for Logi-Search

As said in our one-line description, we see Logi-Search to be that extension that you didn't know you needed. We see it being used as that extension for things that the average developer/end-user would find annoying or redundant to do, but wouldn't think of creating a custom extension for themselves. Additionally, we also want to embrace the power of the mouse for this extension, and really play around with the different possibilities of making navigation easier, more ergonomic and comfortable for the end-user.

Built With

• chrome
• css
• extension
• javascript