First Time Developing a Chrome Extension
I’d never done Chrome extension development before, but recently noticed that JD.com, like Alibaba, deliberately creates obstacles for users regarding certain benefits, wasting valuable time. So I decided to create a small tool, which also served as practice for Chrome plugin development.
Tool Purpose
- Auto-click shake-to-win
- Automatically grab target amount coupons at scheduled times
The tool isn’t very significant, but it saves a few mouse clicks and eliminates the need to remember when time-limited coupons become available. So I think it has some value.
Imperfections
- Since this opens mobile web pages in a desktop browser and makes requests, it should simulate mobile requests. Some activities require mobile access only, which could probably be achieved by spoofing request headers to fool the server. I’ll address this when needed.
Extension Download
How to download the plugin I made? Click here
If it doesn’t work well, feel free to complain.
Key Takeaways from Extension Development
How to Develop Quickly
- Know that extension development uses the same web technologies (HTML, CSS, JS), so frontend developers should find it effortless.
- Know that the .crx extension format is actually a compressed package, similar to Java’s .war files containing compiled class bytecode. Development versions don’t need to be packaged as .crx and can be installed directly.
- Know the official documentation, Google specific technical issues, and study a few open-source projects. These three combined are sufficient.
- I read “Creating Google Chrome Extensions” during development. The book was mediocre, missing many implementation details. Given the limited selection of books on this topic, it’s worth reading as a coarse-grained reference if you prefer learning from books.
Extension Capabilities
Since we’re building one, we should understand what extensions can do. For instance, can an extension lock a Mac screen like Alfred? I don’t think so. Understanding a technology’s capabilities and limitations is crucial.
- Web page functionality: scanning DOM structure, generating table-of-contents popups, modifying page styles, and manipulating element behavior are all possible since extensions can inject custom JavaScript into target pages.
- Chrome browser functionality: tabs, developer tools, themes, and notifications.
Recommended Development Tools
After modifying JS, click the button to reload, eliminating the hassle of uninstalling and reinstalling. Note that manifest file changes require reinstallation.
Final Thoughts
- I’ve been obsessed with creating small tools over the past six months. I’ve written over 4 IDEA plugins, over 6 Alfred workflows, and now learned Chrome extension development. While these tools have different forms, they’re all attempts to solve real problems in my work and life. The direct and indirect benefits these tools have brought me far exceed their development costs.
- I’ve always admired people who have ideas, quickly implement them, and continuously improve and innovate. Now I feel somewhat like those masters, though I’m still far from their level, so I’ll keep working hard.
- I believe it’s always beneficial for technical people to understand multiple technology areas. Your familiarity with B will help with problems in A. Knowledge may have boundaries, but there are definitely intersections and mutual influences between different knowledge areas.
Just some random thoughts for reference.
