Giter VIP home page Giter VIP logo

scrroll-in's Introduction

Scrroll In


All Contributors

Never forget where you left a page.

Scrroll In - An extension to save scroll position of any webpage | Product Hunt Embed Scrroll In - An extension to save scroll position of any webpage | Product Hunt Embed

Contribute to this project during hacktoberfest and get exclusive limited edition Devfolio schwag if your pull requests gets merged. Read more

Motivation ๐Ÿ’ก

You must have been in a situation wherein you are reading a long article, but you don't have enough time to finish it, so you close the tab, and the next time you open the article again, you have no idea where you left it.

So this extension lets you save the scroll position of the webpage, so you can continue from exactly where you left.

I know there are a few extensions that already serve this purpose, but most of them either didn't work correctly or lacked the features that I needed, so I ended up creating my own.

How it works? ๐Ÿค”

Under the hood, this extension uses the chrome localStorage API to store the scroll positions for different webpages. I avoided using sync storage due to its storage limitations (read more). This extension creates an object which stores the URL as keys and the scroll position as values.

The functions for adding or updating, reading and deleting are in the files save.js, get.js, update.js and delete.js respectively, which are executed as content scripts from popup whenever the respective button is clicked.

The background.js handles switching icon color whenever a tab is changed, or the URL is updated.

The popup sheet is a Svelte app in the popup folder that controls the UI and the behaviour of the extension popup.

Features ๐Ÿš€

  • You can save the scroll position of the page and then revisit the page at any time to continue where you left.
  • The extension also allows you to save multiple scrolls for the page.
  • You can fetch the last saved scroll.
  • If you dont want a scroll you can delete it.
  • Extension allows you to see all the saved scrolls arranged in the newly first order where you can delete any specific scroll or clear all the scrolls at once.
  • You can use update the scroll which will update the last saved scroll with the current one.
  • You can add customizable keyboard shortcuts to save, fetch or delete scrolls without having to open the extension popup.
  • The extension auto fetches the last saved scroll position on page load, if page has any saved scroll.

Development ๐Ÿ’ป

The JavaScript files in the extension are compiled using rollup, and as of now the extension popup is written with Svelte which is also compiled via rollup. To run the extension locally follow these steps:

  • Run yarn or npm install to install the dependencies.
  • Then run yarn dev or npm run dev to build the extension in watch mode, you'll see a build folder created with all the necessary files for the extension to run.
  • Visit chrome://extensions and turn on developer mode.
  • Click on Load unpacked at the top left and select the build folder that was created with the dev command.
  • Now you can go ahead and modify the js files and the Svelte app, the dev command would automatically build the updated files accordingly. You would be able to view the changes in the extension directly.
  • If you change something in background.js you'll need to reload the extension for the changes to appear. For other files like manifest.json you would need to restart the dev server as well so that a fresh copy can be created.

Contributing ๐ŸŒ

All you need to know for contributing to this project is basic JavaScript, HTML, and CSS.

You can visit the issues page to find some relevant issues to contribute to or feel free to open a new issue for something that you think can be improved.

Also, if you have any doubts regarding any of the concepts or how to get started, feel free to drop me a message on Twitter or the Devfolio community Telegram group.

License

NPM

Contributors โœจ

Thanks goes to these wonderful people (emoji key):


Prateek Surana

๐Ÿ’ป ๐ŸŽจ ๐Ÿ–‹ ๐Ÿ“–

Layla Hedges

๐Ÿ’ป

shikharsaxena98

๐Ÿ’ป

Aditya Ketkar

๐ŸŽจ

DEBSUBHRA ROY

๐ŸŽจ

Aashis kumar

๐Ÿ’ป

Rohit Kaushal

๐Ÿ’ป ๐ŸŽจ

Aditya Agarwal

๐Ÿ’ป

Mitch Moore

๐Ÿ’ป

Anuj Singh

๐Ÿ’ป

Gabe

๐Ÿ’ป

alucard17

๐Ÿ’ป

Sharvari Raut

๐Ÿ“–

Samiran Konwar

๐Ÿ’ป

Parshwa52

๐Ÿ’ป

Biswajeet Sahoo

๐Ÿ”ง

This project follows the all-contributors specification. Contributions of any kind are welcome!

scrroll-in's People

Contributors

prateek3255 avatar allcontributors[bot] avatar rohitkaushal7 avatar dependabot[bot] avatar sharur7 avatar aesher9o1 avatar itaditya avatar alaq avatar underscoreanuj avatar bislara avatar roseg43 avatar gribesh avatar n7layla avatar ferdox2 avatar mitchmo avatar nikhilanu avatar parikshit-hooda avatar parshwa52 avatar abstrekt avatar two-ticks avatar michizhou avatar shikharsaxena98 avatar

Stargazers

UฤŸur Erdem Seyfi avatar Yoon Hee-Ku avatar Kory Becker avatar Liam Gray avatar ์ตœ์˜ˆ์ฐฌ avatar  avatar rusty kay avatar MightGuy avatar Smarthug avatar Tanay Kamath avatar Dheeraj Lalwani avatar Ali Saberi Movahed avatar Rick Torres Jr. avatar Edgar Guzman avatar ROHIT RANJAN SINGH avatar mly avatar  avatar srijan avatar Taylor D. Edmiston avatar Chris Grieser avatar  avatar maanc avatar Tenvi avatar ooookai avatar frankfanslc avatar  avatar  avatar  avatar Ezequiel Primaz avatar  avatar Subhan Bakh avatar Ryan Ferris avatar eggp avatar rohit sohlot avatar Md. Pial Ahamed avatar  avatar Chayan Sharma avatar Shivani Sorte avatar ACRON avatar  avatar Tanmoy Sen Gupta avatar Akash avatar  avatar devELIOper avatar Preet Parekh avatar MONISHA MANDAL avatar  avatar  avatar Jai Kumar Dewani avatar Varun j avatar Ankita Mandal avatar Gajraj Singh Chouhan avatar Ajim Pathan avatar Shreya Dhir avatar Sampada Kathar avatar Garima Singh avatar Jonathan T L Lee avatar  avatar Sanfer Noronha avatar  avatar Fangzhou Li avatar Juri Grabowski avatar Ramiz Wachtler avatar Harshit avatar Tiago Danin avatar  avatar

Watchers

James Cloos avatar Juri Grabowski avatar Shakti Goap avatar Nash Vail avatar Utkarsh Verma avatar  avatar  avatar Harshit avatar

scrroll-in's Issues

Create a new extension demo video

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.

Update the extension icon

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 -
image

Update project documentation

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.

Saving/Updating a page is saved chronologically

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.
Screenshot 2019-10-12 at 3 59 24 PM

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.

Use babel for converting ES6 to ES5 and minify files

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.

Improve the popup sheet

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

image image

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

Delete option in Dropdown appearing in every container

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
screencast-nimbus-capture-2020 10 11-18_09_23

2020-10-11 (3)

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

Improve project documentation

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.

Add percentage completion in the options page

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

image

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.

Suggestion to change settings icon

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

Suggest what can be improved in the extension

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.

Non-stop icon fetching

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
image

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

Context Saving functionality be given to users to recollect back

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.
image

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

Add an options page to view all the saved pages

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.

Add tests

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.

Keyword based search functionality be given to search saved scrolls

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.
image

@prateek3255
I would surely like to work on this?

Adding a "About Us" function

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:

bandicam 2020-10-14 21-30-57-188

Omit query params from URL before saving in chrome local storage API.

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.

Sort By Date functionality be given to link containers

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.
2020-10-12

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

Add the ability to save multiple scrrolls

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.
Image 2020-09-30 at 10 49 37 PM

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

Presistence Scrroll Save

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.

Shift Entire Codebase from ES5 to ES6.

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.

some links are broken in README.md

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
image

Redesign the popup sheet

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

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

Options page controls - (Delete, Clear All)

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.

add logo to readme header

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.

Adding proper documentation and contributing guidelines

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!

FR: Auto-Save Scroll position

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.

Automatically Prettify after every commit using Husky and Lint-Staged

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

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

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.