Git Product home page Git Product logo

prodsaver's Introduction

prodSaver

A Web Extension extension for setting up warnings, to avoid confusing staging and production environments.

Table of contents

Testing in a browser

First, make sure the project is built in the dist folder, by running npm run build:all.

Google Chrome

  1. Open Google Chrome's extensions panel chrome://extensions.
  2. Drag and drop the dist folder into that page.
  3. There is a default rule enabled. To see it, go to http://example.com and you should see a banner. There should also be an icon in your toolbar.

Info: You might see an error message on the extension's card. This is due to a property in the manifest that is required by Firefox, but not recognized by Chrome. It's fine for testing, but later, we'll need to build a different package for each browser.

Tip: If you edit the code, you'll need to refresh the extension in Chrome's extensions panel. To open the developer console for the background.js script, you can click on "Inspect the background page", in that same panel.

Mozilla Firefox

Important: You need the Developer Edition of Firefox or Firefox Nightly, because the regular version won't allow you to use localStorage on temporary extensions, thus it will break.

  1. Open Firefox's module debugging panel about:debugging.
  2. Click on "Enable module debugging".
  3. Choose "Load a temporary module", and select the dist/manifest.json file.
  4. There is a default rule enabled. To see it, go to http://example.com and you should see a banner. There should also be an icon in your toolbar.

Tip: If you edit the code, you'll need to refresh the module in Firefox's debugging panel. To open the developer console for the background.js script, you can click on "Debug", in that same panel.

Dependencies

This project uses vue-i18n for internationalization.

Commands

npm run serve

Watches for changes in the VueJS popup, and makes it available at http://localhost:8080.

npm run build

Builds the production VueJS popup in dist/popup.

npm run dev:extension

Watches for changes in the extension_src folder and builds a development version in dist/background.js and dist/content.js.

npm run build:extension

Builds the production version of dist/background.js and dist/content.js.

npm run build:manifest

Uses the extension_src/manifest/index.js file to build dist/manifest.json.

npm run build:all

Builds the production versions of the popup, background script, content script and manifest in the dist folder.

prodsaver's People

Contributors

blex41 avatar artentica avatar

Watchers

James Cloos avatar  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.