Giter VIP home page Giter VIP logo

chrome-scrroll-in-tech'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!

chrome-scrroll-in-tech'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

Watchers

James Cloos avatar

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.