prateek3255 / scrroll-in Goto Github PK

The options page currently shows all the pages whose scroll positions have been saved.

It can be improved to show the amount of the page that is completed in form of percentage or progress bar.

For this, you'll need to store the total scrollable length of the page as well while storing the scroll position as well.

Adding proper documentation and contributing guidelines

The project is not properly documented in terms of

• PULL REQUEST TEMPLATE
• CONTRIBUTING GUIDELINES
• ISSUE TEMPLATE

I would like to work on this issue and solve all the documentation issues!

Describe the bug
The bug is regarding the dropdown menu.
So, when we click on dot elements on a particular link container and again when we click on dot elements on another link container we see that the delete option of first container should hide but its not hiding.

To Reproduce
Steps to reproduce the behavior:

1. Go to Chrome Extension.
2. Click on Settings Icon so option.html page will be displayed.
3. Click on dot elements on link container 1.
4. Now, you can see the 'Delete' option.
5. Now, again click on dot elemets on link container 2,3,4, and so on....
6. You will see Delete option on each and every container.
7. Ideally, It should only get displayed on the container which was clicked latest.

Expected behavior
Ideally, the Delete option should only get displayed on the container which was clicked latest rather than seeing in each and every container.

Screenshots

Desktop (please complete the following information):

• OS: Windows 10
• Browser Google Chrome
• Version 85.0.4183.121

Additional context
So, it looks somewhat wrong to see Delete option on each and every container as seen in Screenshot.

I would surely like to work on this issue?
@prateek3255

Describe the bug
I noticed even when the extension hasn't been touched at all in the current session, nor any sites that use it, it still acquires a good bit of CPU time (Chrome Task Manager). Upon inspecting the background page, it seems it perpetually fetches icons, non-stop.

To Reproduce
Steps to reproduce the behavior:

1. I always see it

Expected behavior
No idle CPU usage.

Screenshots

Desktop (please complete the following information):
Scrroll In 3.0
Chrome Version 91.0.4472.69 / Win 10

Design and add a new icon for the extension.

Please post the suggestions on this issue first.

We'll be needing an active and inactive state icon of the following dimensions -
16x16, 32x32, 48x48, 128x128 and 256x256

Here's the current active icon -
https://github.com/devfolioco/scrroll-in/blob/master/images/favicon-384x384.png

and the inactive icon -
https://github.com/devfolioco/scrroll-in/blob/master/images/favicon-inactive-384x384.png

Also for promotional tiles and og images, we'll be needing images of the following dimensions -

The codebase should be updated to use ES6 features. The current codebase is mixed with ES5 and ES6 syntax and practices.
The following needs to done

1. Change all usages of 'var' keyword with 'let' or 'const'.
2. Using promises instead of callbacks.

The extension has been updated since the first video was uploaded. A new video needs to be created, which demonstrates all the current and new functionalities of the extension.

Resources -

• You can use the old video as a reference while creating the new video. Feel free to experiment but keep in mind that the quality of the new video should be at least greater than or equal to the previous one.
• Upload the video on youtube and paste the link in this issue.

Describe the bug
Investigate why the extension is unable to save the scroll position of some URLs like - https://www.theguardian.com/technology/2008/mar/09/blogs

To Reproduce
Steps to reproduce the behavior:

1. Go to https://www.theguardian.com/technology/2008/mar/09/blogs
2. Click on the extension icon and save scroll
3. Click on the extension icon again
4. The scroll position is not saved.

Additional context
Investigate the issue here.

Since we can only save one scrroll for any particular page right now, we received a few requests from the users for having the ability to save multiple scrrolls.

A few things that you need to keep in mind while building this are -

• When the user clicks on the save/add more a prompt should ask the name of the scrroll

• You will need to modify the existing saving data structure so that it doesn't break any previously saved scrrolls.

• The user can select the scrroll from the saved scrrolls (the selected scrroll is the blue one) and modify, the "Fetch Scrroll", "Update" and "Delete" would work in respect to that scrroll

• The latest scrroll should be selected by default when the user opens the popup.

You can find the Figma design file here

Is your feature request related to a problem? Please describe.
A test suite for the project would be nice. I am learning to write tests, so this would be a great experience.

Describe the solution you'd like
A test suite written in one of the popular frameworks like mocha, chai

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Document a detailed readme for this repository describing how to use this extension and how does it work internally.

You can use the chrome webstore description as a reference.

For the internal working part, you can describe it by pointing out specific functions and files explaining their roles.

Is your feature request related to a problem? Please describe.
Currently if you go to say example.com and save your scroll position. Next time you go to example.com?utm_param=something, then also the page should scroll to the saved position.

Since we are using window.location.href, the key generated with and without query params will be different.

Describe the solution you'd like
A clear and concise description of what you want to happen.

Additional context
Useful when you opened a URL which has bunch of tracking parameters.

@prateek3255 I'd love to work on this, if you think this is legit.

Is your feature request related to a problem? Please describe.
Currently we're dont have any means to prettify the entire code. However, we can use Husky and lint-staged to automatically format those files which are staged into Git, making it more convenient.

Describe the solution you'd like
We add Husky (which is a git hooks implementation for javascript projects) to execute our commands after pre-commit. We use lint-staged to filter out files which are in our staging area, and run our Prettify commands there. This automation will massively increase code-maintenance in the future.

Describe alternatives you've considered
This is the best solution to the above problem.

Additional context

• husky
• lint-staged
• prettier

@prateek3255 I'd love to implement this myself. Please let me know if its okay.

As the extension is using LocalStorage API of Browser If a user reset all settings or uninstall a browser most likely all the saved scrolls and pages will be lost. So there will be no way he can get back his data back.

I would like to propose the this as Solution

• Let user Import and Export all the saved scrolls to as a JSON file which he can later import to another browser he can import and have all the scrolls which he added in past.

• An alternative would be using some kind of authentication and save the scrolls in Database once the same user logs in he can have all the Scrolls back in the Browser.

We have logos in the images folder. Would love to see that logo on top of the readme.
Assign this issue to me if we plan to go ahead with it.

Is your feature request related to a problem? Please describe.
1)Whenever we are studying for a topic and read a particular part of it, we save it in the scrroll. Then, a lot of scrrolls are added in the collections in localStorage.
2)So, when we want to search for a particular tag or keyword related to the page we have saved in the scroll.
3)We need to manually find out what was the link or remember the page, which is very tedious and frustrating.

Describe the solution you'd like
1)I have proposed a solution to this problem.
2)We can add a search functionality that searches the page with the help of the keyword or tag entered.
3)So, when the user enters the keyword or tag, we search it in the localstorage if some part of title matches the keyword.
4)If the keyword matches , results are filtered and displayed.

Additional context
Suppose we only want to search pages with "devfolio" as the keyword.But we need to search manually each and every page.
So, it is tedious when we have lot of scrrolls.

@prateek3255
I would surely like to work on this?

Describe the bug
Some links are broken in README.md

To Reproduce

1. Go to 'README.md '
2. Scroll down
3. See error

Expected behavior
Scrroll logo should appear

Screenshots

I have already opened issues for the things that I think can be improved in this extension, and most of them are either closed or are in process.

So here's what you can do, go to chrome webstore and download the production version of this extension and try using it as your daily driver while reading articles.

Then if you find something while using it that can be improved, post a comment here, and if we find it relevant enough, I'll open a separate issue for it.

The current options page shows all the URLs whose scroll positions have been saved. It currently looks like this -

You can find the HTML, CSS and JavaScript files for options page in options.html, options.css and options.js respectively.

Redesign the popup sheet to make it look something like this -

The settings button would redirect the user to the options page similar to the current options button.

Resources

• Use this mockup for detailed styles.
• Get the settings icon from here

Is your feature request related to a problem? Please describe.
Yes, this is the innovative feature that I have found.
The core functionality of scrroll is to save the scrrolls of the web page and land the user to that scroll when surfing that page again.
But there is a slight catch.
Suppose the user saves the scrrolls of 20-30 pages every day so there is a very high possibility that the user can forget the context which he/she was thinking when surfing for the first time.
Scroll will only land the user to a particular part of the page but it will not give any context where the user had left before.

Describe the solution you'd like
I have designed a solution to this problem.
Whenever the user wants to save the scrroll of a page, he/she also be given the option to save the context or add some tags regarding the thought process of that particular topic.
So, when user lands to that page again we will show the context which he/she had left before.
This will help user recollect the thought process again.
This will be a great feature for this extension.

Additional context
Add any other context or screenshots about the feature request here.

So,
@prateek3255
I will surely work on this feature.

Is your feature request related to a problem? Please describe.
Lately if you check the options page, you will notice all the the URLs stored and displayed are in chronological order, with respect to the URL of the saved/updated page. For example, if you save several pages of, say, www.github.com, they will be saved together in a group rather than been separated in other convenient order as per they were saved.

Describe the solution you'd like
What really is needed, for better user convenience, is that the URLs should be saved in an order as per the time they were saved/updated. Where the list is sorted in ascending order of the time, rather than the chronological order of the URL.

Describe alternatives you've considered
Primarily, I feel that this could be sorted in the save.js file, where you create a new Date() object for every new URL saved.

Additional context
Here is the screenshot with the URLs been displayed for better understanding, please note that all these pages were saved over a different span of time. The user would be more interested in the most recent articles rather than the chronologically arranged articles, that's why this issue has been opened.

Is your feature request related to a problem? Please describe.
I like this extension, but often I forget to actually save the scroll position.

Describe the solution you'd like
An option to automatically save the scroll position, to go along the automatic fetching of the scroll position. This would make the plugin fully automatic.

Describe alternatives you've considered
Can't think of any.

Describe the bug
The extension icon doesn't appear in the chrome extension menu

To Reproduce
Steps to reproduce the behavior:

1. Go to chrome://extensions
2. The extension icon is not visible in the menu

Screenshots

Redesign the extension popup sheet. It currently looks something like this in the unsaved and saved state respectively -

You can find the HTML and CSS for it in popup.js and popup.css

Create an options page to view all the pages whose scroll positions have been saved.

Internally this extension uses the key scroll-mark as the key to store the URLs with their saved scroll position in the form of an object.

Where URL is the key, and the scroll position is the value. Something like this -

scroll-mark: {
    "something.com/nothing":1440,
    ...
}

So you can read this object from the chrome's local storage and display all the saved URLs on the options page.

Is your feature request related to a problem? Please describe.
The new extension has a settings icon which on clicking takes to the saved scrolls. Suggestion from my side if the icon is changed to some other icon which shows that there are saved scrolls then that would be good for users.

Describe the solution you'd like
The settings icon can be changed to a Saved icon.

Additional context

Settings icon

Saved icon

@prateek3255 Tell me if its a valid change or not. I would like to work on this issue

The extension is using a combination of ES6 in a lot of places, and some old browsers (chrome 51 and below) don't support ES6.
So, create a setup to transform ES6 to ES5 using babel and minify these files by running uglify some uglify tasks using gulp or grunt.

Add issue labeller action to add relevant labels to the issues once created.

Add GitHub action to greet a first-time contributor for an issue or a PR.

Update License section in Readme file.

• Steps to reproduce the issue:

Currently, there is no 'License' section. This can be reformed into a correct structure for License showcasing like other substantial projects.

• Relevant error messages and/or screenshots:

Check the current Readme file.

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is.
Whenever we see the links page in settings, we see that the link containers are arranged in any order irrespective of their dates which becomes difficult to locate when we want to know which page we had saved in past.
Example:-Suppose we are finding some online resources during exams regarding some subjects like OS.
So, what we will do is we will move on to information sites like tutorialpoint,javapoint etc. and read some part and save it in scrroll and move onto another.But when we come back to read that part and see it in scrroll links so we can see that the links are scattered and we need to find manually.

Describe the solution you'd like
A clear and concise description of what you want to happen.
So, I propose a solution to give a sort functionality to users by which they can sort the links based on date so it will be easy to find the resources marked on a single day.

Additional context
Add any other context or screenshots about the feature request here.
So, in this screenshot, the links are scattered irrespective of date.

So,
@prateek3255
I will surely like to work on this?

Is your feature request related to a problem? Please describe.
Options page doesn't give freedom to delete a specific saved page(scrroll). User need to open the page and then delete the scrroll from the extension popup. That's a little long process.

Describe the solution you'd like
Need an options to delete any saved page in the options page itself and an option to clear all the saved urls.

Describe alternatives you've considered

• op1
  -- a dedicate button on each card to delete that saved entry.

• op2
  -- a three dot menu on right top corner of each card clicking on which opens a little popup to delete that entry(card).

• op3
  -- a select option in the header then >> checkbox appears on every card to select >> remove selected in the header.

• A clear all option to delete all entries.

Is your feature request related to a problem? Please describe.
It would be great if we have a function that will direct us to the about us page.

Describe the solution you'd like
I have tried doing the about us function by creating an icon in the corner of the pop-up that will direct users to the About Us page of scrroll-in. The About Us page contains some description, version of our extension, Github link for contributions, and twitter link for any doubts.

Additional context
I implemented the idea and came up with something like this: