brookhong / Surfingkeys

Map your keys for web surfing, expand your browser with javascript and keyboard.
https://chrome.google.com/webstore/detail/surfingkeys/gfbliohnnapiefjpjlpjnehglfpaknnc
MIT License
5.39k stars 480 forks source link

Race condition when loading settings from URL #1901

Open b0o opened 1 year ago

b0o commented 1 year ago

When Surfingkeys is configured to load settings from a URL, if the settings load slower than the webpage, the settings won't be applied properly. I believe there must be some sort of race condition causing this.

I've created a repository to help reproduce this bug. Steps to reproduce:

  1. Clone the reproduction repository and install dependencies

    git clone https://github.com/b0o/surfingkeys-race-condition-repro
    cd surfingkeys-race-condition-repro
    npm install
  2. The index.js file contains an Express app that serves conf.js on port 8088.

    The server has a hard-coded delay before sending the conf.js file, 200ms by default. You can adjust the delay to test out different timings.

    The conf.js file sets the theme CSS to give all Surfingkeys elements a purple background, an easy way to see if the theme is being applied properly or not. It also adds a reddit search alias r with leader o to test out search alias, and a key mapping <Space>h which shows a popup.

  3. Run node ./index.js

  4. Configure Surfingkeys to load settings from http://localhost:8088

  5. Navigate to a web page that should load quickly, like https://google.com.

  6. Try to press o to get the Surfingkeys hints to pop up. What color is the background? If it's purple, that means the settings loaded faster than the webpage. If the background is black, that means the website loaded faster than the settings. Try re-loading the webpage a few times, sometimes the bug will happen, other times it won't.

    You can also test out the reddit searchAlias - when the bug occurs, hitting or will open the omnibar but the reddit search alias won't work at all.

  7. Adjust the delay up and down in index.js and re-start the server to test different timings, test a few different ones between 100 to 1000. Firefox seems to break with a lower delay, Chrome seems to need a higher delay. You can also test out different webpages that load slower.

b0o commented 1 year ago

P.s. I wonder if it's a good idea to load the settings URL every time the user loads a webpage. Perhaps it might be better to have a keybinding to re-load the settings?