🕸 WebExtension to highlight phrases from given phrase lists
Home Page: https://chrome.google.com/webstore/detail/highlighty/nfpmjbgochfndeckobojgdbihjdbhnhl
License: MIT License
Find me at:
☎️ Contact me!
Google extensions lets us attach a promotional video. Could be nice to make either an instructions video, a promotions video, or both.
Need some extension icons in 2 colors - the button colors should represent an enabled and disabled state.
Related:
After deleting a phrase list, the options object still has an empty phrase list there at that index, and this empty phrase list sticks around for good. Find a way to deal with this gracefully..
When a webpage is updated without going to a new page, auto-highlight does not catch the new phrases to highlight. The current workaround is to press extension icon or F6 twice, but this isn't ideal as it interrupts workflow.
If someone wants to highlight phrases on the fly, it's a little harder with the extension in its current state.
We might want to add an interface and a storage to search multiple phrases quickly.
There's a lot of UI/UX considerations here, since there's essentially two sets of phrases (1) on-the-fly and (2) stored.
Some phrases have multiple words...like "Sherlock and Holmes". So this method should have a tiny warning with it.
Need 2 modes of Highlighty that users can toggle between:
Clicking extension button or keyboard shortcut either:
This is kinda tricky to do right from a UI/UX perspective. Need some more thought on this.
Related:
Add search bar to options page. When letters are added or removed, the phrase lists that are shown have phrases that contain the text in the search bar.
Super low priority, the only usecase is to remove phrases quickly if there's a lot of them.
Let users modify the styling of the highlighted phrase element, both at a general and a per list level.
For the per list level, we probably want to use Bulma's tab element and have tabs for Phrases and Styles.
Related:
Difficult design problem, but would be cool!
When at some window sizes, sometimes the buttons are offset a little. Figure out why and fix.
Right now, we only let you use F6 or nothing. We should allow you to use custom keyboard shortcuts!
Should be able to import / export individual lists and the entire configuration.
Import should also support different delimiters (space, new line, etc.) as well as maybe a JSON-based format.
Some settings could be moved to a phrase list level instead of a global level -- e.g. URL allowlist & URL denylist.
This requires some thinking through the backwards compatibility though!
--
For example, I may want some phrase lists to only apply for some specific URLs. Or I may want auto highlight for some phrase lists but not others.
Auto alphabetize phrase lists?
This could either be a setting or just done automatically.
Related:
Basic browser alerts and confirms are ugly. A Bulma-based dialog should be used instead.
Maybe using Bulma's Message or another component.
Right now, the "Enable mouseover for list title info" setting uses the HTML "title" attribute which adds a mouseover text to display the list title. This would better as a tooltip that's a Bulma element, especially since the hover takes a second to actually trigger and is kinda easy to miss.
Need to support importing and exporting ALL lists at once!
When deleting a phrase from a phrase list, the confirmation dialog includes a line break between the end of the phrase and '?'
Find appropriate Bulma component for a toggle, add "enabled" boolean to options, and set up triggers.
Maybe allow both .txt and .json?
We let you Bulk Export into text, but not Bulk Import.
When we upload a file, it should just smoothly replace the text box contents
Add a little badge or some other element that shows how many phrases are in each phrase list (maybe even the total # of phrases is useful too)
Replace the current color input with an improved color picker using a library like this, or some other library, or making your own element.
Right now, the hover text for the browser action always says "Highlight phrases!" This should be revised to be based on what the action does, e.g. unhighlights text, highlights text, turns auto-highlight off, etc.
See: https://developer.chrome.com/extensions/browserAction#method-setBadgeText
See if there's a better way to handle permissions to avoid broad host permissions..
https://stackoverflow.com/questions/53029899/broad-host-permissions-webstore-chrome-extension-publish-error
https://stackoverflow.com/questions/52929477/broad-host-permissions-webstore-warning-despite-only-one-host-in-permissions
Sometimes the icon is the wrong color -- or the auto/manual highlight behavior is kinda weird.
Figure this out...
Options is pretty large with duplicated code and disorganization. Use clean code principles to improve
We can add an element that appears when highlighting that lets users see count of highlighted phrases and navigate between them.
e.g.
[ Highlighty ]
[---------------]
[ <-- 32/44 --> ]
Alternatively (or additionally), you can add the count to the extension button.
Getting the scroll-to-word right may be tricky; transition in rather than an immediate jump would be best. We probably want the word to be centered vertically on the browser. We should also animate or style the navigated element so it's clear that the word is in focus.
Here's the Highlighty Chrome Store page. The screenshot reel isn't super attractive or informative. We should make an improved reel and put it in the repository.
Restrictions: Each picture needs to be size 1280x800.
Examples: Google Keep, Grammarly, Honey, Checker Plus.
Users should be able to set up a whitelist or blacklist of URLs that where Auto-highlight is enabled.
Also tricky to get the UI/UX right here. Need the right instructions to let people know how to set up the right link syntax.
Related:
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.