Skip to content

smartlook/element-picker-vue

Repository files navigation

Smartlook element picker (Vue)

Your task is to implement a component generally known as the Element Picker. Its main functionality is very simple: it allows users to select an element and returns a selector that can be used to target this element.

This repository contains simple Chrome extension with Vue support to help you start with the assigment.

You can read more about Chrome extension development on an official docs page. Build on sanyu1225/vue-cli-plugin-chrome-extension-cli

Installation

This project requires Node.js and NPM package manager to run. In order to continue please ensure you installed those prerequisites first.


npm install                   # install all packages

npm run lint                  # run eslint & prettier linter
npm run lint:fix              # run eslint & prettier linter with automatic fixes

npm run dev                   # run extension in development mode (hot-reload)

Extension installation

Open Chrome and navigate to chrome://extensions/ page. In the right top corner enable Developer mode after that click on Load unpacked (top left corner) and select extension from /element-picker/dist. Note you need to perform this step only once hopefully.

image

Project structure

.
├── node_modules       # NPM packages
├── dist               # Build output
├── src                # Source files
│   ├──	assets         # Files copied to dist
│   ├──	entry          # Entry scripts for browser extension interfaces
│   ├── view           # Code for all browser extension interfaces
│   ├── utils          # Commonly used functions
├── LICENSE
└── README.md
└── vue.config.js

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published