Code Monkey home page Code Monkey logo

web-search-navigator's Introduction

Logo Web Search Navigator

Chrome Web Store Mozilla Add-on CodeFactor CodeQL Linters

Browser extension that adds configurable keyboard shortcuts to Google search, YouTube, Startpage, Brave Search, Google Scholar, Github, Gitlab, and Amazon.

Demo flow

Table of contents

Features

  • Lightweight
  • Supports Chrome, Firefox, and Edge
  • Extensive Google keyboard shortcuts including:
    • Selecting results
    • Opening results in the background or foreground
    • Navigating to other sections (maps/news/videos/etc)
    • Navigating to the next/previous result page
    • Changing time restrictions
  • Support for navigating cards such as Top Stories, Twitter, and videos
  • All keyboard shortcuts can be changed
  • Settings are synched between devices with the same browser profile
  • Supports both key combos and key sequences
  • Custom CSS rules to control the look of highlighted results
  • Experimental and optional support for YouTube, Startpage, Brave Search, Google Scholar, Github, Gitlab, and Amazon (needs to be enabled in the options). Note that the extension does not have permissions for these optional websites unless you explicitly enable them.

Installation

Chrome

Install from the Chrome Web Store.

See below for downloading a release and installing it manually (not recommended since you won't get updates automatically).

Installing from a release

  1. Download the latest release from https://github.com/infokiller/web-search-navigator/releases
  2. Extract the zip file to any directory you'd like, though you need to make sure the directory is not deleted while you want to use the extension
  3. Go to extensions page in Chrome (URL: chrome://extensions)
  4. Enable developer mode if needed
  5. Disable other existing instances of Web Search Navigator (from the store or from loading another unpacked version)
  6. Click "Load Unpacked" and select the directory you extracted the release zip into

Firefox

Install from the Add-ons for Firefox.

Edge

Install from Microsoft Edge Add-ons.

Safari (experimental)

NOTE: Safari is supported on a best-effort basis and isn't packaged yet.

Follow these steps.

Keybindings

NOTE:

  • Shortcuts for navigation to tabs (images, news, etc.) only work when the tab is visible.
  • All shortcuts can be customized to your liking via options
Shortcuts Action
/j Select next search result
/k Select previous search result
//Escape Focus on input search box
Enter/Space Navigate to selected result
Ctrl + Enter/ + Enter/Ctrl + Space Open selected result in background tab
Ctrl + Shift + Enter/ + Shift + Enter/Ctrl + Shift + Space Open selected result in new window/tab
/h Navigate to previous search result page
/l Navigate to next search result page
a/s Navigate to All tab (= default search tab)
i Navigate to images tab
v Navigate to videos tab
m Navigate to maps tab
n Navigate to news tab
Alt + s Navigate to shopping tab
b Navigate to books tab
Alt + l Navigate to flights tab
f Navigate to financial tab
z + h Filter results by past hour
z + d Filter results by past 24 hours (day)
z + w Filter results by past week
z + m Filter results by past month
z + y Filter results by past year
z + z Turn off filter (show all results)
z + s Toggle sort by date/relevance (only when filtering)

Development

Coding style

To check the code for linting and formatting errors, run yarn run check. We use a Javascript coding style based on Google's. We use the following tools to lint the code enforce a consistent style:

  • Javascript: eslint for both linting and formatting
  • CSS: Stylelint for linting and Prettier for formatting
  • Markdown: Markdownlint for linting and Prettier for formatting
  • Bash: Shellcheck for linting and shfmt for formatting. shfmt doesn't run in yarn run check because it can't be installed using yarn install.

Please try to write your code in a similar style, and run yarn run check before sending a pull request.

Commit messages

Starting from 2020-07-19, this project uses Conventional Commits. Please write all you commit messages in this style.

Building for development

We use yarn package manager for dependency management and gulp for building. To build the extension for development run:

yarn install && yarn build

The extension will be deployed directly to the src directory.

The easiest way to run the built extension is to use web-ext which will run a separate it in a separate browser profile and reload it automatically on changes to the source files. From the project root directory:

# Replace '--target chromium' with "--target firefox-desktop" for Firefox.
yarn run web-ext run --source-dir src --target chromium \
  --start-url 'https://www.google.com/search?q=whatever'

Alternatively, you can load this directory as an unpacked extensions to your browser.

It would be better to deploy for example to build/deploy and add gulp-watch to update the deployed files automatically. However when done so the Chrome's auto-reload extension gets broken and one has to reload the extension manually on every change. Hence the src directory is used for the convenience.

Building a release

To build a bundle consumable by the browser with minified dependencies:

# Replace make-chrome.sh with make-firefox.sh for Firefox
yarn install && yarn build --env production && ./tools/make-chrome.sh

Then, upload the bundle to the browser store from ./build/chrome/package.zip/./build/firefox/package.zip.

Adding a new search engine

See a reference commit with minimal changes for amazon.com. Specific steps:

  • Add the required URLs to the optional_permissions key in src/manifest.json
  • Add a checkbox for enabling it to src/options_page.html (copy an existing one and modify it)
  • Add code to src/options_page.js for handling the permission request
  • Add a new class to src/search_engines.js with the required properties. See the documentation at the top of the file and use the other search engines classes in that file as a reference.
  • Add a class instance to searchEngines.

Troubleshooting

Before reporting a bug, please check and answer the following:

  • Does it happen when you disable other extensions?
  • Does it happen only in Chrome, only in Firefox, or both?

In addition, please try to reproduce the bug in a clean browser profile with no other extensions. The easiest way to do it is to clone the repo and use web-ext:

git clone https://github.com/infokiller/web-search-navigator
cd web-search-navigator
yarn install && yarn build
# Replace chromium with firefox-desktop for firefox
yarn run web-ext run --source-dir src --target chromium

This will open a clean browser instance with no other extensions. Note that this browser instance will have the default extension options (including permissions for alternative search engines), so you may need to modify the option.

Privacy policy

See PRIVACY_POLICY.md.

Trademarks notice

This project is not affiliated with Google LLC.

©2023 Google LLC All rights reserved. Google™ search is a trademark of Google LLC.

web-search-navigator's People

Contributors

alexbarrett avatar anteus avatar bastiankubaile avatar beracira avatar bulutfatih avatar dependabot-preview[bot] avatar dependabot-support avatar dependabot[bot] avatar dninomiya avatar edibegovic avatar furimako avatar gazorby avatar gilhanan avatar hristo2612 avatar infokiller avatar jayoh-dev avatar kodiakhq[bot] avatar mahdinazemi avatar mancze avatar mauforonda avatar mikez avatar nsrcodes avatar olsonpm avatar psygo avatar rik-smeets avatar tkroll avatar yuanleemidori avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

web-search-navigator's Issues

Enhance search result highlighting

Is it advantegeous to have the focused result highlighted similarly to what DuckDuckGo does, i.e. with a background light colour (very light!) on the entire result filed, rather than having just the result title highlighted?

Broken navigation with Tab/Shift+Tab hotkeys

If set up TAB for next search result (and Shift-Tab for previous, but I suspect any combination with TAB doesn't work properly), navigation seems to be broken.

capture

Here is the result after TAB is pressed one time. Further TAB strokes moves only filled triangle. If at the same time other hotkeys are configured (like j/k and arrows) then pressing them after TAB moves both angular bracket and triangle at the same time.

Btw, thank's for an awesome plugin! saves my life after google disabled native keyboard navigation :(

ctrl+enter opens tab two times!

Since 0.2.8 on Chrome Version: 66.0.3359.139 (Official Build) (64-bit),
when I hit ctrl+center to open a new page it opens in two new tabs, from which one comes to foreground.
This behavior makes google-search-navigator for me unusable.
Someone else having the same problem?

Switch to images, Maps and the other "tabs"

At the top of google there are these "tabs", don't know how you call them.
It would be awesome to switch from the search results to the images page from a shortcut, keeping the search input. So for example searching for "flowers" yield the (normal) list of webpages, hitting ctrl+right and turning to the images page, would display pictures of flowers.
The shortcuts "ctrl+right" and "ctrl+left" are the ones I propose as default for switching between these "tabs".
Info: this feature is implemented in the DuckDuckGo search, altough only with "right" and "left" as keyboard shortcuts.

Migrate to TypeScript

NOTE: feedback is welcome from everyone, but I especially want to get @mancze opinion on this as the main contributor to this project.

I'd like to propose to migrate the code of the extension to TypeScript and use its tooling (mainly via gts) to automatically lint and format the code (preferably enforced using commit hooks).

Pros:

  • Reducing the likelihood of bugs via static analysis done by the TypeScript compiler and linter
  • Better developer experience- TypeScript has better support for autocompletion, refactoring, etc.

Cons:

  • Less developers are familiar with the TypeScript language and tooling
  • Browsers generally don't support running TypeScript natively which forces the use of a compilation step

Overall I still believe this change to be worthwhile. @mancze what do you think?

Safari support

This extension is available for Chrome, Firefox, and Edge. Excellent, but what about Safari? ;)

Proposal: generalize extension to search in other websites

The idea is to support other search engines such as Bing, Amazon, Github, etc.
I envision the code structured in a way that adding basic support for a new website only involves specifying things like the search results selectors, search box selector, etc.
Some of the current features are very specific to Google, and my intention is to keep supporting and enhancing them. This will also need to be reflected in the user options, which will include general navigation options (such as keybinding for next/previous search result and getting back to the search box), and options specific to a website.

@alexbarrett @mancze @rik-smeets
I'm curious to hear your thoughts.

Spacebar should not be remapped

I love this extension. It's made me much happier when I use Google. However, I have one request.

Please leave the spacebar alone. There is already a way to open links: press the ENTER key. Some people, like me, prefer to keep their hands on the keyboard "home row" (hence the 'vi' keys). We use the spacebar all the time to scroll down a page and it's very aggravating to have it suddenly opening links.

Thanks.

Scroll down pages is not fluid

Please add a shortcut "f" for google finance (https://finance.google.com/finance)

Scrolling down search results is not fluid, as when a result at the bottom of the page is marked, the URL address and the google description basically lay on the page below. Page snapping should be improved.

Good job anyway!

Numbers 1-0 mapped to results pages 1-10

Having numbers 1,2,3,...,9,0 mapped to result pages 1,2,3,...,9,10 would be a useful feature.

Or mapping them to focus on results 1-10, with control-(1,2,3,...,9,0) mapped to results pages.

Perhaps even adding an option to have the results numbered left of the navigator arrow would be a nice option, with the ability to turn this on and off.

I just downloaded the extension and I love it but I figured this may be a solution to having to press j over and over again to focus on lower results in page.

Let me know what you think! Thank you!

Refactor core to more command-based pattern

Current core functionality of the extension is attached as direct handlers of the keymaster events. This causes me problems when debugging/fiddling around with the extension. For example it is not easy to invoke "navigate to the next result" command directly from the developer console.

I would like to refactor the main script of the extension to be more "object" oriented. I think it will provide many benefits aside from what I mentioned. I imagine the core somewhat like:

const extension = {
  options: { },

  init: function() {
    // ...
  },

  commands: {
    focusNextResult: function() {
      // ...
    },
    focusPreviousResult: function() {
      // ...
    },
  }
};

extension.init();

What do you think about this? I would implement that but I want to discuss it first.

Picking up search results embedded in "People also ask"

image

The results are included in the navigation even when the questions are collapsed, so you have to press down several times to get to the first real result. The HTML structure of these embedded results on this particular page is similar to the main search results. I have come across other "People also ask" boxes that were not included in the navigable result set.

Unable to load extension

I'm getting this error when I attempt to load the unpacked extension.
I use the src directory since before it was not even finding the manifest.
I'm on Windows 64-bit

Failed to load extension
File
~\Documents\web-search-navigator-master\src
Error
Could not load javascript 'keymaster.js' for content script.
Could not load manifest.

Wrongly focus on "Next Page" link and scroll to page bottom on Google Shopping in Firefox

Hello Michal,

It is latest FireFox 61.0.2 (64-bit) on Windows 7 SP1. When you make a search on google.com and click on Shopping tab, this extension will automatically focus on the "Next Page" of Shopping page and automatically scroll down to shopping page's very bottom. You have to scroll up every time.

We cannot find this issue on all other google pages.

Could you please fix this bug?

Thank you for your great extension! We love it!
Brian C.

filter search by year,month

filter search by year,month not working sine few days
was working previously
other keyboard shortcuts are working

Support selecting and navigating to "sub-result links"

Selection can be done by using tab (via regular focus change in the browser), but when trying to navigate (via the extension keybindings), the navigation is done to the top level result instead of the sub-result.

Original email I got which triggered this issue:

Hello,

I wanted to both thank you for your great work on this chrome plugin as well as provide some feedback.

When going through searches it is great if one wants the main result for each result box. But sometimes one result box has kind of like sub-result links at the bottom as seen below. This is especially comun when the result is from an online forum or reddit. The thing is when I use the arrow keys to move through results I can then use tab to move to the sub-results below it and but when I click enter the link it opens is the link with the arrow not the selection box. So there is no way of selecting a subresult with the keyboard shortcuts of the plugin.

Below are 2 images the first one is with the main result selected (with the box). The second image shows the sub-result selected. But on both these images hitting the enter key opens the main result link indicated by the arrow. It would be helpful to change so that the squared link is the one selected.

image
sub-result "Some search engine tests" selected (reached by tabbing)

image

Aside from that, great job on the plugin I couldn't believe when google got rid of the instant search functionality that was so helpful. Keep up the good work.

Cheers

Proposal: Add option for Image Size

Maybe it's just me, but I'm often looking for high resolution images and find myself going to Tools - Size - Larger than - 2MP / 4MP etc. A keyboard shortcut would be very helpful (as is this extension in general, thank you!).

image

Add option for "Time" (default "t")

Restricting search to time is something many users do (especially for news, etc.).

May I propose a quick shortcut?

  1. Add an option for "Time" (default "t")

  2. This opens this dialog (if possible)

image

  1. The focus should go there (this is important), so that with the TAB the user can navigate the options and press enter (or ESC to quit).
    Even better, we could have the proposed letter shortcuts (see screenshot) for fast selection of the time period.

What do you think?

Search results page broken down

Plugin was working great till today. After search, results page is scrolled down to the very bottom, and "next page" link at the bottom is focused.

Search results are not matched by the selector

Ran into a problem where google.com changed the html structure of the results page slightly.

[document.querySelectorAll('h3.r a'), (n) => n.parentElement.parentElement]

In extension.js was not picking up the new links. I added

[document.querySelectorAll('h3.LC20lb'), (n) => n.parentElement.parentElement.parentElement.parentElement]

to the SearchResultsCollection to fix the issue. Not sure if this is a temporary, or beta change by google, but I wanted to leave a record of my fix.

Thanks.

Edit: It doesn't seem "Open in a new tab" works with this fix.

Ctrl+Return opens two tabs on the side

When I use the shortcut CtrlReturn, two tabs instead of one are opened on the side. This bug doesn't happen when I use CtrlSpace.

Firefox 59.0.1, Windows 10 64 bit

Support jumping to more tabs (or more urls)

It'd be nice to support all tabs, including shopping, books, flights, etc.

More generally, maybe support customizing the url to jump, using the current query word. Now this could be debatable since it is similar to what browser is sort of doing, e.g. chrome://settings/searchEngines. But it'd be really nice to have this search google first then go to other sites workflow.

Anyway really appreciate this work, did what google should be doing for decades.

Extension unavailable for Edge due to content infringement complaint

Yesterday, I received a content infringement complaint from Google regarding the extension for Microsoft Edge. It regards to the usage of the stylized Google 'G' which is used in the logo of the extension.

Because of this, I had to remove the extension from the Microsoft Store and it is therefore no longer discoverable / downloadable.

I'm wondering: @infokiller, @mancze : did you receive similar complaints for for Chrome / Firefox? Maybe we should change the logo either way? After doing that, I can apply for re-submission of the extension in Edge.

Different title required for Microsoft Store

The extension for Edge unfortunately did not pass certification for the Microsoft Store. The name of the extension is not compliant with Microsoft Store's policies. Because it complements the functionality of Google Search, the title of the extension has to indicate this relationship. For example, if you have an extension/app containing Word templates, it should be called: Templates for Microsoft Word to be compliant.

So I would like to propose to name the extension Keyboard shortcuts for Google Search. This would apply only for Microsoft Edge and I will do this when packaging the extension, so no changes to this repository will be necessary.

Please let me know @infokiller if you agree with this.

Navigate to other tab

The readme.md says there are shortcuts for switching to the image/video tab.

That doesn't work yet.

How to go to the next page?

With the keyboard shortcuts, I can't reach the next page or the following pages.
Maybe right (next) and left (previous) should switch between the pages?

Unfortunately, it is also not working with these Extensions.

Restore the focused item when using back

  1. User does a search.
  2. User browses the search results and navigates to non-first hit.
  3. Finds out that the result wasn't what they was looking for. Uses the back button to return to the results.

Expected behaviour:
One would like to continue traversing the results so the focus should be on the result before navigating out.

Actual behaviour:
The first item is focused instead (this actually depends on the setting "focus first search result").

Don't scroll to first result when there is a google card

When there is a google cards like when you search 'weather' or 'define ' the page is automatically scrolled down to the first google results after the ads. This makes I can't even see that google info. In case of google's cards lets don't scroll it down.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.