Skip to content

Latest commit

 

History

History
99 lines (52 loc) · 3.01 KB

HowThisWorks.md

File metadata and controls

99 lines (52 loc) · 3.01 KB

Everything you need to know about My Web Shortcuts (as a developer/contributor)

This browser extension is developed in Vanilla Javascript, and uses some NPM packages for both development and production. It uses ViteJS with a really good Plugin called CRXJS for development. It gives us a lot of useful features like HMR, which makes the development of an extension faster.

Things to Learn in order to do code contributions

The following are a few technologies that you need to know in order to fully understand the code. You can learn them on the go (as I did the same):

Setting up the project for development

If you haven't already, please install the extension in your browser by following these steps in the Readme.

The dist folder generated by CRXJS is the code that runs in the browser, and it automatically reloads the extension on every save.

While it does reload the extension on every save, it doesn't work with the files that are not listed in manifest or imported by some other file that is listed in the manifest.

Code Explanation

It is recommended to keep the code open while reading this to understand efficiently.

All the source code exists in src folder, and the manifest.json exists in the root directory. This file structure is created by Vite for a Vanilla JS project with the CRXJS plugin.

THE REST NEEDS TO BE WRITTEN BY THE MAINTAINER

Storage Structure

// STORAGE MAP

// The Values shown are the default ones

const completeDataMap = {
    "websitesData": {
        // Each Website Data
        "websiteURL": {
            settings: {
                enabled: true,
            },
            shortcuts: {

                "shortcut": {
                    name: "Shortcut Name Set by User",
                    enabled: true,

                    // Single Element or Multiple Elements or Location on View Screen
                    type: "singleElement", // Read the Readme
                    // In multiElements type, all the selected elements in the array will be clicked one by one from first to last

                    // Will be updated when other types are added
                    properties: {
                        todo: "click" // click, focus, highlight(add bright borders), scrollTo 
                    },

                    // Data about the element to be selected
                    selected: {} // {elementJSON} OR [{elementJSON}, {elementJSON}...] OR " cssSelector.class[attribute='value'] " OR {x:20, y:20},
                },
            },
        }

    },
// Global Settings
    globalSettings: {
        extensionEnabled: true,
        darkMode: true,

    }
}