Chrome Extension Design and Development
source link: https://medium.com/slalom-technology/chrome-extension-design-and-development-165d0f520ab3
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Giving Your Product Superpowers With Chrome Extensions
Learn how extensions can boost your product potential
Browser extensions help products offer unique experiences. That’s why extensions like Grammarly have over 10 million users. Extensions can do all this because of their superpowers. Extensions can access and control parts of the browser using the Chrome APIs and the Devtools Protocol. This means extensions can do things regular web code can’t.
In January, 2020, Microsoft Edge released a new version based on Chromium. So, it’s easier than ever to create extensions that work in several browsers. If you’re considering adding an extension to your product strategy, I want to share some ideas to help you succeed.
Extensions have more capabilities than typical web applications. Reading and changing webpages, manipulating network requests, and screen recording are some examples. Products have found many ways to use these powers. I group them into products, co-pilots, and sidecars.
Sidecars
Some extensions link to a specific web domain. Extensions like Refined Github can use this pattern to enhance an experience. I like to call these “sidecars.” Sometimes, sidecars offer users choices they wish the site or browser offered.
If you noticed an outside developer or open source community built a sidecar for your product, don’t block it. You could lose customers. Instead, try to work with the community to improve their experience.
Co-pilots
Other extensions work everywhere to help a task or feature in a specific product. These co-pilots, like Microsoft’s OneNote Web Clipper, merge the browsing and product experience. Co-pilots can also provide more information about how people use your products.
Products
Other extensions are products. These extensions can help improve your writing, keep you organized, or stay on task. They look for patterns in your actions or the sites you view to take action on your behalf. Some extensions serve dual purposes. For example, someone with a vestibular disorder or ADHD might use an “ad blocker” to stop animation. For that reason, you should not try to block extensions or even detect their use.
Devtools are a set of browser tools geared toward developers. Devtools extensions are a subset of product extensions that enhance the toolset. As a developer, I use these tools every day to help me analyze and troubleshoot the web. If you’re not familiar with this group, Google’s Lighthouse is a great place to start.
Best Practices
Before you design and build your own extension, I recommend the following:
Architecture
Extensions can access or create many “contexts”: background, content, devtools, tabs, and popup. Each context will have different capabilities. This includes how it communicates inside and outside of the extension. You will often need to relay messages to get commands right context. Take time to map out how you will send messages and responses and the message conventions used. This will help when troubleshooting or adding new features.
You may also need to review Google’s proposed changes, called Manifest V3. As far as I can tell, Google’s not requiring this change yet, but it can’t hurt to know how it would affect your plans.
User (Trust) Experience
Because extensions have so much power, you must do everything you can to optimize for user trust. This means a combination of honesty, respect, security, reliability, and accessibility. An honest and respectful extension gets installed because it earns the user’s trust. Secure, reliable, and accessible extensions keep that trust and don’t get uninstalled.
Respect
Minimalism wins. Only request the permissions you need. As little code as possible should run without user interaction. Code that runs on every tab must be fast and non-blocking. Write lazy code that waits as long as possible before it runs. Keep an eye on how much data you store and how much memory you use. Respect low-speed network connections and low battery modes.
If you’re interested in how much CPU and memory other extensions consume, check out DebugBear’s 2020 Chrome Extension Performance Report.
Honesty
If you collect information, even simple usage analytics, explain what, how, and why. What information do you collect? How does the extension send or share it? Why is this important to the user (not to you)? You may need to include a GDPR notice. Be honest about what your extension does.
Security
Don’t skip security. If any code gets executed based on an event, ensure it came from your extension or a user interaction. Use a content security policy as an extra layer of security. All other web security techniques apply. For more information, check the OWASP Top 10 List.
Reliability
Testing, testing, testing. Writing code for a single browser reduces complexity. But writing code that works on every webpage on the internet increases complexity. Use a wide variety of “good” and “bad” webpages when testing your extension. If your extension can perform in the worst scenarios, users will know they can rely on it.
Accessibility
Think about accessibility from the beginning. Use the same principles you use to develop an accessible web page to create an extension. If your extension can’t include everyone, let your users know. For example, “sight required for some features” helps users make informed decisions. Building with accessibility in mind tells users you care.
Conclusion
As with the superpowers of comic books, “with great power comes great responsibility.” Use the least invasive features of extensions. This makes it easier to control performance, accessibility, and security. It’s also easier to tell the user exactly what your extension does. At all times, focus on user trust.
Recommend
-
55
-
38
-
58
Checkly is the easiest way to actively monitor your API endpoints and browser click flows from a single dashboard
-
50
Chrome Extensions have been around for a long time. I believe they are a very under-explored technology - and if you’re a traditional web developer, there’s a very small learning curve since Chrome Extensions are comprise...
-
38
Recently the Chrome team enabled using service worker in Chrome Extensions, which is great news! Now we can intercept the extension requests which is good especially for caching and performance. One library that...
-
14
Chrome Extension Analytics You Can Trust ChromeStats is the leading resource to provide purpose-driven data and insights on various Chrome Extensions. Through comprehensive diagnostics, ChromeStats empowers users,...
-
4
I prepared this talk for Chrome Dev Summit Extended 2020 in Singapore. Unfortunately, due to the Coronavirus Outbreak, and having the Ministry of Health raising the alert to DORSCON Orange, the event was cancelled. Still, I feel this t...
-
1
Chrome Extension Development Cookbook 2022-03-13 1 持久化状态用localStorage吗? 推荐用chrome.storage.sync或者chrome.storage.local, 而不是HTML5的localStorage,虽然后者更通用, 但既然是开发chrome extension...
-
1
Communication Between Chrome Extension and Local Application March 30, 2...
-
4
Convert any website into fully editable Figma designshtml.to.design Chrome ExtensionConvert any website into fully editable Figma designsNow you can convert both pu...
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK