Scaffolding
I chose to use and evaluate a great Vue.js plugin (for Vue CLI v. 3.*) that is designed specifically for scaffolding cross-browser extensions with Vue.js. It is available here on GitHub. The plugin, (written and maintained by Adam Bulmer), assumes prior knowledge of Chrome Extensions, Vue and Vue CLI 3.*. It quickly builds an opinionated project structure that contains pretty much everything you need...and some!
- Creates all extension API components: manifest, content script, background script, options page, and popup UI
- Adds Vue Router and Vuex to the project and wires up default implementations for both
- An optional polyfill that allows for Chrome's callback pattern to be retrofitted with ES6 Promises
- All associated tweaks (to the manifest, package.json, and vue.config.js) to override the normal webpack build flow in favor of an extension-centric flow that even includes a live-reload server; "npm run serve",
- And a refined production workflow "npm run build" to compile and zip-up your assets
The Project:
As it goes when learning new techniques and technologies, it’s helpful to have a challenge; a realistic problem or use-case to use as a guinea pig. So I decided to build a browser extension to enhance and automate the Upwork "Find Work" page. It tracks saved searches (and associated results) and generates an alert notification when new jobs become available. Note: an Upwork freelancer account is a prerequisite.
Targeted features:
- Automates predefined saved searches (and also the Upwork built-in searches)
- Native notifications (with sound) when new jobs are detected
- All notifications (with associated job results) are logged
- Stays synchronized with all of your saved searches
- Saved searches can be toggled on/off individually
- Does not require Upwork API access, RSS or Atom. Instead, method overrides to XMLHttpRequest (XHR) capture and process data from your own saved searches
- Runs in a minimized browser window or inactive tab
- Component-based architecture and cross-browser, Promise-based
- SPA popup, complete with Vue.js core libraries and tooling
- Mozilla's Web Extension Polyfill (to leverage Promise object)
Interesting Observations (regarding the use of Vue.js for building Web Extensions)
- An extension's popup UI is essentially a SPA that gets loaded when the user clicks on its action icon.
- Vue.js is lightweight yet powerful, so it's ideal for building extensions. - Managing state across extension boundaries (principle of isolated worlds: background, content and popup/ui) can be tricky; throw in the async-laden extension APIs and things can get messy super-fast.
- Adopting the Flux pattern (à la Vuex) is a sane and sustainable way to avoid state related mayhem. - As with any application, an extension's capabilities will expand and new views/pages will likely be required.
- Enabling Vue Router promotes a clean and maintainable path for managing UI growth. - Mixing content script, code injection with XHR monkey patch is like summoning Lord Voldermort in a game of Ouija; be careful with all that power!