1. Progress thus far

Since my last post on ScreenLike, I have focused mainly on another project. However, I have made some progress:

• I refactored my code away from using browser.confirm() towards using a dialog box. This required learning a lot more about async functions and await statements!
  • Initially, I added the <dialog> element directly to the html of the page. However, this had the downside that the style of the box was not consistent between pages. So I created a shadow DOM and learned how to inject CSS into the html code.
  • I added some basic styling on size and background blur, but have more I would like to do.
• I fixed a bug where opening a link in a new tab did not trigger the extension.
  • This ended up being a simple fix. I had been injecting my content script into the active tab, but I needed to inject it into the tabId of the browser navigation event.
• I laid the groundwork for making a settings page. It currently has very barebones html and is non-functional, but it exists!

2. What are the essential features I need to make before distribution?

• I need to add the ability for certain types of browser navigation to not trigger the popup.
  • I am undecided whether browser searching should be queried. On the one hand, it is a classic means of distraction. On the other hand, it is quite annoying to have to click through every time to make a search. At the moment, I am going to default to browser searches being triggered, but adding an option in settings to turn that off.
  • More generally, I need to create an interface to custom ignore certain websites, based on the url. [Or links within certain types of domains]
  • Third, I would like certain types of navigation to be ignored.
    • If I reload a page, for instance, I do not want to be queried again on the same page.
    • However, this needs to be done in such a way that I cannot avoid doing the query by loading the page
  • Finally, I'd like the ability to toggle what % of searches are queried.
• As part of adding the non-triggers, I need to make a working settings page. This will mean refactoring my browser local storage!
• A couple of changes to the dialog box:
  • I need to highlight one element of the dialog box as the default response
  • I need to be able to catch the escape key

3. Other functionality I would like to add

• Other things with the dialog box:

  • I would like to add a slight delay before one can respond to the dialog box, to prompt thinking. This delay should be customizable, in tenths of seconds. With a default value

  • Adding keyboard responses, so that you don't have to click!

  • Styling the dialog box more, especially with a grid format! I learned about css grids recently, so I might apply that here!

• More styling everywhere

  • I'd like to create a general style for the extension, so will have to figure that out.

4. What's the roadmap from here?

Essentially, all I need to do is implement the changes in Section 2, and then distribute the extension. I'm sure that I will have a large number of changes to make once I have a persistent version¹, so I want to prioritize getting there.

The code is at ScreenLike GitHub; let me know below if you have any suggestions!