# Focused Browsing Dev Journal

###### tags: `Focused Browsing`

[Figma Link](https://www.figma.com/file/2gSU3IRPFTSquJg8RrRhMK/?node-id=1299%3A2224)

**March 22, 2021:**
For each website, we will have to identify aria labels

We will also have to define a testing scheme

Definitely LinkedIn and Twitter

Other suggestions are YT, FB, etc

Probably currentURL -> Strategy Design Pattern based on currentURL

https://hackmd.io/@grey-software/focused-browsing-

https://next.quasar.dev/quasar-cli/developing-browser-extensions/introduction#introduction

**Current Focus Experience:**
* Have two seperate focus chrome extension for Twitter and Linkedin
* Have two seperate focus chrome extension for Twitter and Linkedin
* They have about the same functionality where the content scripts for each of the extension hides specific HTML data to have a more focused experience in the app (primarily hiding the feeds of the app)
- Currently the extenion is activated through a basic button click on the extension icon
- If the app is on focused mode, a button click would get out of focus mode and vice versa

**New Focused Experience Plan:**
* Instead of having seperate extensions, the idea is to develop one extension that is going to allow users to have a focused browser experience overall
* Want to elaborate on the UI of the extension to give a smoother user experience to give more control and more notice as to when they want to a have focused envirnoment while using Twitter or LinkedIn
- Thinking of eventually extending focused browsing to Facebook and Youtube
- We have thought of ideas where:
- We could have a pop up open up on a button click and having a detailed UI to give the choice of focusing and un-focusing
- Another idea is to add onto the UI of Twitter and Linkedin somehow which would give a more intimate experience of using the extension
- Exploring using Quasar to do this, they go step by step in their process of how to set up a Quasar BEX

**March 23, 2021:**
**Architecture Diagram Of Chrome Extension:**
* Here are the essential components of our chrome extension:
* manifest.json:
* This file contains the configuration of the chrome extension, from the name,permissions,icons, etc
* content script:
* Js file that runs in the context of the web page where we run our extension
* Helps us interact with the webpage accordingly, and make changes (in our case we are hiding aria-labels in classes in our content scripts to have a more focused experience on Twitter and LinkedIn)
* Configured in our manifest file


* The attribute matches under content_script, indicates the browser to inject the content script (focus.js in this case) for those web pages visited.
* We can also add additional js files that our content script needs, in this case we kept our quotes in a seperate file

* background script
* Script that is running behind the process that uses the chrome browser api's to listen for event triggers (such as click the extension icon)
* As it is listening for these event triggers, it communicates with the content script to pass information that is needed for it to make the changes on the DOM
* Configured in our manifest file as well


* The persistent attribute indicates if we want our application persistent, that means it will keep running until the browser is closed, and our data will be storied as well. We made this true because we want to enter the mode that was last enable the next time we open our browser on Twitter or LinkedIn accoridngly

* browser action files
* Establishes title,icon, popup page of the extension
* Pop-up pages know nothing about the content page, but can get the URL of the current tab (use tabs framework)
* Currently for our focus applictions, we don't have a pop up page because our background script is listening for browser action (it has the ability to do so)

**High Level Overview of Focused Browsing:**
* Currently for Twitter Focus, we have implemented a strategy design pattern for the specific uses cases that we wanted to accomplish
- Focus mode for the home page hides the feed and what's happening pannel, whereas the other pages only hide the what's happening pannel
* Simililary for Focused Browsing we want to do the same thing where our background script records the url of the current browsing experience, and sends the content script the specific strategy that needs to be used to enable focused/unfocused mode
* Here are some things we need to evaluate before jumping to creating a solution:
- What are the Focus use cases for Twitter and Linkedin accordingly? (study HTML code of both apps)
- Will we be rendering different HTML code for Twitter and Linkedin if we wanted to have our focus enabler/disabler on the DOM
- To add on, do we want to have a pop-up at all or we want all of our code to be rendered on the DOM?
- If we decide to use Quasar/Vue, we need to figure out a way to communicate between background and content scripts, is it the same way as it was before where we have a listener in our content script that is listening for messaging coming from our background script?
- More so, what is the correct way of storing the state of our extension?

**March 24, 2021**

**Tech Stack:**
* Will require regular HTML/JS/CSS just like Twitter and LinkedIn Focus
* **VueJS** for the popup page
* Using **web-extension-polyfill** library
* Will help us create communication between our content,background, and popup files
* We use web-extension-polyfill because Focused Browsing is going to be a cross-browsing extension both used on Chrome and FireFox
* Will also be used to store state in local storage
* May look into Quasar very soon, as sugessted by Arsala

**Design BrainStorm**:

* The diagram above shows how the different componenets would talk to each other
* Here is a run down of the ideas I have had with regards to how our extension will run:
* When we first click on the extension icon, a popup will show up (have to think of design) and will give us some option to either focus or not focus
* If we choose focus, our Vue code will have some method that will make an API call using web-extension-polyfill library to tell the content script to hide the distraction off the browser page
* If we choose unfocus, it is the exact opposite where it will tell content script to make distractions visible
* Our Vue code will be able to access the url of the browser through using the polyfill library, which will be sent to our content script along with state that is enabled
* Once the content script gets the messages from our Popup script, our content script then will act very similarliy how it does now, where it will make the distractions visible/invisible, and inserting the Grey software Card on the Feed

* Suppose we close our browser, and it was on focus mode last, when we re-open the page with the extension still running, our background script will query local storage for the state along with the URL of the page, and send to the content script to hide the distractions accoridngly.
https://developer.chrome.com/docs/extensions/reference/storage/

**March 25, 2021**

### Questions from Arsala

1. Have we looked into having a configuration page like Facebook news eradicator?
**Answer From Avi:**
* I am personally not a big fan of this because I don't think it is as clean. Have another tab open and then check boxes the app seems a bit more inconvient to me, where as having a little toggle popup might be a bit better.
* However, the config has one advantage where it gives the user a choice to make on which app's are selected to eradicate the news feed. I think that could be some source of inspiration
3. What if the first interaction a user has with the extension is that the configuration page pops up and ask them what options they would like to configure for each website?
**Answer From Avi:**
* This would be like the news eradicator app, this could be something we could get some inspiration from.

### Answers from Arsala

_Will we be rendering different HTML code for Twitter and Linkedin if we wanted to have our focus enabler/disabler on the DOM_

I think we can find a safe area on the dom where we can put a hovering focused browsing menu like Visbug. Ours will probably be much smaller

_To add on, do we want to have a pop-up at all or we want all of our code to be rendered on the DOM?_

Depends. If we go the Visbug approach we can safely avoid the popup. I think it requires some thought and design prototypes

_If we decide to use Quasar/Vue, we need to figure out a way to communicate between background and content scripts, is it the same way as it was before where we have a listener in our content script that is listening for messaging coming from our background script?_

https://quasar.dev/quasar-cli/developing-browser-extensions/bex-communication

https://quasar.dev/quasar-cli/developing-browser-extensions/background-hooks


_More so, what is the correct way of storing the state of our extension?_

Since Quasar coomes with VueX, a redux-like solution to state management, we may be able to simply code the state management as Vue would and then communicate over the bridge :rocket:

**April 1, 2021:**
- Today's research will be a bit of a reset and will re-evaluate the approach to Focused Browsing
- Last week I jumped in to the architecutre but it is important to set the intention of what Focused Browsing is going to do and what story it is telling to the world.
- We want to create an app that is modern and convient for users that want to be in control of their social media experience
- What tends to happen is users do get lost through the news feed because the scrolling mechanism is designed to get us hooked to these apps that benefit these corporations (twitter, facebook, instagram, etc)

- There are many apps out there that have tackled this problem and have very elegant solutions, but it seems like they are a bit out of date with their overall design
- News Feed Eradicator opens up a new tab and has a check box list to give users options for which apps they want the news feed to be eradicated
- It works but the design and the experience itself is outdated. There should be no tabs opening up, everything should be happening with the DOM of the social media pages
- Currently I have explored options where we design a popup page in Vue and have it communicate the content script that will make changes on the DOM
- This was good exploration, but the user experience of the extension visbug is something that is another source of inspiration to helps us with manifesting the vision of Focused Browsing

- After studying some of the VisBug code, it looks like they have injected a VisBug component right under the body.
- What I found interesting is the fact that when I inspected the page, it showed up as a VisBug element in the HTML (visbug)
- I want to look more into this for FocusedBrowsing

**April 4, 2021:**

- Here is a proposal of the new design of Focused Browsing
- Currently, we have a set of websites in the Focused Browsing Environment (for now it is Twitter and LinkedIn)
- Let's treat these as rooms in the Focused Browsing environment
- Just like a room, it has a switch to turn the lights on and off
- Similarily for each of the websites with feeds, we will have a custom designed switch (can talk about how it will look later), that renders on the dom and gives an option to enable/disable focus mode
- When we enable or disable, it will only be for that page, but the rest of the websites won't be affected by this action, just like a seperate room of a house

**April 5, 2021:**
- With the following approach that I came up with yesterday, there is a change in architecture because now we are trying to inject a vue component (the switch) on to the DOM

- There is a Stack Overflow post that addresses this concern : https://stackoverflow.com/questions/59816151/in-chrome-extension-how-to-use-content-script-to-inject-a-vue-page

**April 7, 2021:**
- The final decision is made, where we will be using Quasar Framework to build our extension
- The framework provides a way to build a broswer extension (called BEX)
- It is convient because it treats it like a regular Quasar Application that you would develop to build a website. This allows us to get into a headspace of doing the same but for Focused Browsing

- The architecture does change a bit because of the structure of how communication is acheived in our BEX

- Here is a high level overview of the architecture
- It is similar to what we had before using regular VUE but there is a bit more abstraction with regards to event listening in developing a Quasar BEX

- The components are similar in developing BEX, but one of the fundamnetal differences is the idea of having hook scripts for background and content scripts
- Here is the given defintion:
- In a Quasar BEX, you are provided with background-hook.js, content-hook.js and dom-hook.js. These files are designed to give you access to a bridge which closes the gap in communication with each layer of a BEX

**April 11, 2021:**
- Currently I have a implemented a very elementary Twitter Focus with using BEX

**April 17, 2021:**
- Here are a few things that are blockers in our pursuit to developing Focused Browsing
- We have a fairly good understanding how BEX works, however, there are issues regarding toggle functionality
- Right now Quasar app fails to toggle, as it seems like there are multiple messages coming from the background script
- We have informed the team at Quasar through posting on their forum on this post: https://github.com/quasarframework/quasar/discussions/8843

- Although this is an integral part of our app, we need to figure out the design of our app.
- Right now, I was thinking having a switch or a toggle that is rendered on the DOM.
- Would love to have a conversation with Raj to discuss further details

- Hope to resolve this issue with BEX very soon, but if it doesn't get resolved, we can try other ways to solve this issue.

## Brainstorming session April 18, 2021. Things are to be revisited.

### What is the story / drive behind Focused Browsing?

"We want users to be in control of the type of content they want to consume. Focused Browsing does that for you. It blocks away your feed so that you can focus on what you want to do rather than get distracted by the content it provides on the get go"

"The story of the app is that I made this extension to prevent me from being distracted by constant consumption of content on social networking platforms, hence re-inforcing the purpose as to why I use these apps in the first place."

### What is the vision or the end goal of Focused Browsing?

"End goal of focused browsing is to allow its users to be in control of the content and the amount they want to consume"

### What drives you to build Focused Browsing as a product?

"Personally, I feel like that a lot of these applications and websites control you in a way. They force feed you content that maybe you never wanted to consume in the first place but its not in your control. I also believe that a product should have a positive effect on the users who use them and not allow other people on the platforms to completely influence you
-*Avi* "

"My time spent on social networking platforms is being constantly bombared by feed pages. Making me feel out of control, I desire to create a tool that keeps me in the driver seat of my overall browsing experience."

### How do you visualize this product to be?

"Very simple and not complicated. Easy on your mind. Drive and vision is clear cut. Elegant and self explanatory"

### Who is going to use Focused Browsing?

"Anyone who uses the internet"

##### Note: This is asking about user personas

### Why would someone use Focused Browsing?

"To increase their productivity and not get distracted as often"

### Who are the competitors?

1. News Feed Eradicator
2. Distraction Free youtube
3. [Stay Focused](https://chrome.google.com/webstore/detail/stay-focused/nnlgodiccogbpcfnhmclaicljjgfmekd?hl=en)
4. [Focus Mode](https://github.com/Adri-7/Focus-Mode)

### Competitor Analysis :

" *Yet to analyze* "

### What is the MVP?

*Yet to define the timeline and the MVP*

## Keywords :

- 1
- 2
- 3
- 4
- 5

## Font selected : Inter

Random thought :
-Add a timer which blocks the content rather than a switch.
-We can do both : timer + switch

## Brainstorming session April 20, 2021 - Architecture
- Here is a diagram that gives an overview of our architecture. It is not the cleanest diagram but below this picture, I will be showing the steps of the process of how Focused Browsing will work


- Step 1: Intialize Vue Component
- When we open Twitter or LinkedIn's webpage, assuming we have our extension on, our content script will have an IIFE that will fire up to create our Vue Component
- Step 1.1: We will be rendering the component on the DOM by rendering an IFrame created by our content script, in which it's source will be index.html that will be provided in the package of our extension. This HTML will contain script tags that will render our Vue component accordingly. Of course initially we don't want anything to show up unless the Extension Icon is clicked, so we will set the dimensions of our IFrame to 0% width and height. The main idea of going through this process is to create our Vue Component which will create a level of communciation between the background script and content especially when we want to enter Focus/UnFocus mode.

- Step 2: When icon is clicked, background script is alerted through an onClick listener. Once it is alerted, it will send a message to the Vue App to toggle the tool bar to have our vue component visible on the DOM. However, there is some things needed to be done,
- Step 2.1: Check local storage for current state.
- If the state is empty or is UnFocus, background script will send a message to our Vue App, via a JSON message {state: "Un-Focus"}. If it is empty, we set it to Un-Focus

- If the state is is Focus, background script will send a message to our Vue App, via a JSON message {state: "Focus"}

- Step 3: Vue App get's message from the backgroundscript to toggle the tool bar
- Vue app will send a message to content script to activate our component. Our content script will have a listener to do so
- If message from background is {state: "Focus"}, our Vue App will send a message to our content script to enter Focus Mode
- If message from background is {state: "Un-Focus"}, doesn't send any additional message to our content script

- Step 4: Content Script Renders Vue Component on DOM and will make changes to web page if state is in Focus Mode
- Our content script have listeners that will be listening to messaging coming from our Vue App to make this possible.
- We have a listener called activateFocus, which will make modifcations to our IFrame to make our Vue Component visible on the web page.

- Focus listener will listen for messages when it needs to hide the feed of the page, where as un focus does the opposite, it listens for messages to make feed visible.
- These listeners will be listening for messages coming from button clicks, but in this step, our Focus listener will be listening to inital messages from our Vue App to activate the current state of our extension enviornment.

## April 23, 2021 - Arsala writes user persona story

Arsala is a busy remote technology worker who mainly uses LinkedIn and Twitter to network with individuals for business and mentorship. He values his focused time and feels strained when he is bombarded with attention-grabbing content during this time. Arsala wishes there was a way to regain sovereignty of his attention when visiting websites essential to his work.

Arsala currently uses News Feed Eradicator, but he does not trust that the individual OSS maintainer will indefinitely support the project. He wishes a stable company maintained an open-source solution so he can trust that updates will regularly be issued. He also hopes that the company maintainers can hear his requests regarding the future of the solution on open forums and add additional websites to the application by forking his local version or adding to the global open source solution.

### Raj's Questions

#### 1. Why would someone use focused browsing

Because they do not want to be constantly bombarded by attention-grabbing news feeds on websites that they need to do essential work on. They want to be put back in the driver's seat of their browsing experience.

The persona above explains in more detail!

#### 2. Is it necessary to block websites?

To clarify the idea, we would not be blocking the websites, but rather, certain web elements in the website distract a visitor's attention from their work.

#### 3. What are the use cases for focused browsing

The persona above can elaborate.

#### 4. How do we make users understand that they are wasting time on the Internet rather than get their work done when they're using the browser for actual work

There are many positive voices on the Internet spreading this message, but people still don't have tools like focus browsing to empower themselves to act more wisely with their time and attention.

Even if I understand that news feeds waste my time, I often catch myself having my attention grabbed to the news feed when I initially visited the website for some other essential work.

#### 5. What are your initial thoughts about the MVP

The extension should hide the problematic elements by default and allow me to unfocus using a simple button.

#### 6. Working timeline for the MVP (for example, design)

The goal is to have a barebones MVP ready by April 30th.

#### 7. What is attention grabbing content with respect to Twitter and LinkedIn? If u only follow the people u network with that means their content is valuable and hence you follow them. How does their content divert your focus?

You can often find sponsored content in between posts from people that you chose to follow. Furthermore, it is not only the newsfeeds itself, but also the mainstream news panels on the right. You have no control over what dominated the news cycle that day and it is shoved in your face with the most enticing headlines with no control to turn it off easily.

#### 8. How does the extension or the app helps him get his sovereignty back?

Twitter and LinkedIn do not give you options to customize your experience the way that you would want to, so this extension fills in the gap and gives back that sovereignty.

#### 9. Arsala is a user of the app/extension that helps him get his work done without distraction. Why does it matter whether the OSS maintainer supports the product i.e News Eradicator.

Because if Twitter or LinkedIn introduced breaking changes to the extension, and the maintainer does not have a complete commitment to owning this product, it will join the wasteland of open source products.

#### 10. How do we decide what content to block, if we are blocking by default?

Content that is specifically designed to grab your attention. At the bare minimum, this is all artificially intelligent update feeds, all mainstream news panels, and all advertising banners.

## April 22, 2021 - Brainstorming/Planning

After having a meeting with Arsala today,the design that I layed out a couple of days ago, there are going to be some changes. We are aligned on the new user flow for Focused Browsing.

The main vision of the extension is meant for the user to make an investment. We are trying help users have a focused experience and take control of how they want to use Twitter or LinkedIn.

Initially the user flow started with a user clicking on the extension icon for the Vue Component to be rendered. If we want Users to make that investment into Focused Browsing, we want them to have the option to enter focus mode as quick as possible, allowing them to take control of their experience. We have decided that we will render the UI on the DOM when the extension is activated and when the user enters a web page our extension is targetting. Furthermore our default mode will always be focus mode, and it is up to the user if they want to switch back to un focus mode.

For now we have decided to remove the onClick listener in the background script. Currently we are having issues with using BEX, because the onClick listener is sending multiple messages to content script for one click on the icon. I was initially trying to have some toggle functionality on the app, but it is viable to keep the vue component on the app at all times, and if the user chooses they don't want to have the Vue component on the DOM, they can simply disable the extension.

## April 25, 2021 - Planning For Next Week
[What is our MVP?](https://hackmd.io/@grey-software/BJVBJU7w_)

## April 26, 2021 - Morning Meeting With Raj
### Simple User Flow Steps
1. User downloads Focused Browsing from app store, this automatically activates our extension.
2. User opens up Twitter home page.
3. When Twitter loads, the feed and what's happening will be hidden, and simultaneously, our switch/toggle button will be rendered on Twitter.
- Things to consider with regards to styling of our Toggle:
- For a more cohesive design, we can set our toggle UI as the default styling as the options that Twitter provides on the side (Home, Explore, Notifications, etc)
- We want this to be looking like it is a part of Twitter, but also with a little bit of our own spice added to it
- We also want to have our design responsive to the change of mode on Twitter (dark and light mode)
- For a more incongruent design, we can have our custom design and styling accordingly.
5. Now we have left it up to the user to control their experience, if they want to have the normal Twitter UX, they can switch the toggle off, enabling un-focus mode.

### Ideas regarding User Interaction (Not nessicarily MVP):
- This is for later on, but it is a cool idea, instead of having the switch/toggle rendered on to screen, we can have a keyboard shortcut that enables the component to be rendered enabling the interaction with the user. (For the future not MVP)
- Arsala: This is not too difficult to implement
- The problem is we don't want the user to get caught up by the feed. Twitter users mainly go on the feed because they want to get news. For this use case, Raj had this idea where,
- It is unfocused by default for set amount of time
- After the time runs out, it automatically focuses and then it is up to the user to unfocus.

### Ideas of Switch Design

#### Simple Toggle

#### Using a light switch design

Reference link: https://vuejsexamples.com/a-customizable-rocker-switch-component-for-vue-js/

Demonstration of this switch: https://codesandbox.io/s/qvw4o1k24?file=/src/App.vue

## April 26, 2021 - Afternoon meeting with Arsala

Arsala and I decided to catch up on the morning meeting discussing ideas Raj and I went through with regards to the design and overall implementation of the app.

After having Arsala caught up with the morning Raj and I had, there are some things we have re-evaluated for Focused Browsing v0.9

### Things to reconsider for v0.9 and further versions
- Instead of having a toggle/switch button rendered on the DOM, we would like to implement a keyboard short cut to enable Focus/UnFocus mode
- We agreed that this may be a more convenient user experience than having a button
- We acknowledge that there may be some risk with going in this direction, we may want to have some sort of survey to ask users how they felt about this experience

- Our vision is to build discipline among the people that are being distracted by feeds on apps like Twitter and LinkedIn. We realize we have to have a hard approach in instilling that
- I have suggested that we have a timer on the focused mode before they have the choice to go back to unfocus mode
- This will be possibly for later versions of the app, but this idea instills the vision of what Focused Browsing means to us and what we want it to mean for the masses

## April 27, 2021 - Revist definiton of v0.9
After some lengthy discussion regarding what v0.9 will look like, we as a team have decided to target both LinkedIn Twitter, and Facebook for v0.9

There are some issues being faced while trying to listening for a new page being opened. The issues are:
- The tab listener starts malfunctioning when you enter a new tab, and it starts to listen to multiple messages for one tab change
- When enable focus mode on Twitter, it enables it on Linkedin sometimes

Here is the main chunk of code that is listening for the command.

I am confused why it is not working, because from what I understood writing this code is, we have one call back that executes once the keyboard short cut is listened too, then we have a nested call back that queries for the current URL of the page. Once we get the url, in the same call back, we send the message to the content script to hide the feed or make it visible. I may be missing something here because it looks like when I add this tabs portion, everything gets a bit strange.

## May 3, 2021 - Continuing Work on Focused Browsing v0.9

Currently, we are on our way to completing our MVP of Focused Browsing. We have completed the development of enabling focus mode from our command listener for both Linkedin and Twitter. We have also made our default mode as focus mode as well. There are two things that need to be done finish Focused Browsing v0.9:

1. Need to figure out how to add a tab listener to enable focus mode on page changes
- For example if I were on Twitter or Linkedin, and I was switching from the notifications page back to home, if home was previously on focus mode, we still want it to be on focus mode

2. Figure out a way to render the card and quote on page during Focus Mode
- We thought it may be wise to have this code in our Vue component and utulize quasar to inject the code this way

## May 5, 2021

Card might have:

1. Focused Browsing Insignia
2. Focused Browsing is Active,(reminds them of the current state)
3. Directions to exit Focus Mode (keyboard shortcut and button)
4. A reminder why they are using Focused Browsing (our quote)
5. Donation/Sponsor to Grey Software

Ideas for the future:
- Hiding content on the feed that is being propogated by LinkedIn and Twitter based on the user's you follow or even users you don't follow
- For example, we might want to hide posts that our friends/people we follow like/repost that end up showing up on our feed
- It's common for both LinkedIn, Twitter, and Facebook
- We can also block these posts but still have them show up on the feed. Their content will be blocked but will have a button that will allow them to show the content they possibly want to see

-