Giter VIP home page Giter VIP logo

allen505 / save-for-later Goto Github PK

View Code? Open in Web Editor NEW
33.0 2.0 11.0 698 KB

A web extension for Chrome/Firefox which saves the tabs in current window for later use.

Home Page: https://allen505.github.io/save-for-later/contribute

License: GNU General Public License v3.0

CSS 13.01% HTML 5.11% JavaScript 81.87%
chrome-extension firefox chrome chromium webextension firefox-addon firefox-webextension firefox-extension

save-for-later's Introduction

Logo

Save for Later

Save for Later is a web extension used to save tabs and windows for later use. This web extension is built using the Webextension APIs. As a result, this extension can be run on Firefox or any Chromium based browser. The extension is available on both Chrome Web Store and Firefox Add-ons store.

Permissions

The extension requires the following permissions:

  • tabs permission is needed to access the details of the tabs which are open in the current window.
  • storage permission is needed to store the details of the tabs so that the data persists even after a restart of browser

Background scripts

There are two background scripts that run to ensure working of the extension.

  • background-script.js is used to count the number of saves, to display the count in the extension's badge. This script is set to run every 500ms
  • browser-polyfill.min.js is necessary to ensure that the above script run runs on a Chromium based browser

Development setup

  1. You'll need to make changes on your on version of the code. For this you need to fork this repo. Learn more about forking here

  2. Then you need to clone this forked repository to your local machine. Run the following command on a terminal
    git clone <YOUR_GITHUB_REPO_URL>.git Learn more about cloning here

  3. Next we need to Temporarily install the extension on the browser of your choice. Follow these instructions to do so:

    Note: The extension's directory is the folder which contains the manifest.json file

  • For Firefox browser follow this guide

  • For Chrome/Chromium based browsers:

    1. Open the Extension Management page by navigating to chrome://extensions.

      • The Extension Management page can also be opened by clicking on the Chrome menu, hovering over More Tools then selecting Extensions.
    2. Enable Developer Mode by clicking the toggle switch next to Developer mode.

    3. Click the LOAD UNPACKED button and select the extension's directory.

      Image for Steps 2 and 3

Tips for development

  • For Firefox (Credits: @emecas)
    • web-ext is a useful command line tool when developing extensions. Importantly, it automatically reloads the extension on changes to source files
    • You can inspect an extension just like you would any webpage. To do this:
      1. Open the Add-ons Manager Ctr+Shift+A:
      2. Under the gear icon, click on Debug Add-ons
      3. Click inspect to inspect any extension
      4. You can use the Console to console.log() values to debug and analyse running of the extension
      5. Use the Extension Storage Under the Storage tab to view data stored by the Extension
  • For Chrome/Chromium based browsers
    • You can inspect an extension just like you would any webpage. To do this:
      1. Open an extension to Inspect
      2. Right click on the extension's Popup area
      3. Click on Inspect. This open the dev tools for the given extension

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.