How to Create Your Own Plugin in Chrome Extension: 6 Steps

Introduction to Chrome Extensions

Have you ever wondered how you could customize your browsing experience beyond what Chrome offers out of the box? Chrome extensions are the answer, and contrary to popular belief, creating your own isn’t rocket science! Even if you have basic coding knowledge, you can build something useful that solves your specific problems.

What makes Chrome extensions truly powerful is their ability to integrate seamlessly with websites you visit. They can modify web pages, add new functionality to Chrome, and even create entirely new experiences within the browser. The best part? You don’t need to be a seasoned developer to get started.

Chrome extensions have evolved significantly since their introduction in 2010. Initially designed as simple browser add-ons, they’ve grown into sophisticated tools capable of everything from password management to productivity enhancement. Google has continuously improved the platform, with the recent shift to Manifest V3 bringing better security and performance.

What Can Chrome Extensions Do?

The possibilities with Chrome extensions are virtually limitless. They can range from simple tools that change the appearance of websites to complex applications that transform how you work online.

For example, extensions can:
– Block ads and trackers to improve your browsing speed and privacy
– Save articles for offline reading
– Manage passwords securely
– Take screenshots and annotate them
– Check grammar and spelling as you type
– Track your time spent on different websites

I remember building my first extension to solve a personal annoyance – it automatically filled in form fields on a website I used daily for work. What started as a time-saving tool for myself ended up being used by my entire team! That’s the beauty of Chrome extensions: they can solve specific problems that commercial software might not address.

Setting Up the Development Environment

Getting started with Chrome extension development is surprisingly straightforward. Unlike many other development environments that require complex setup procedures, you can begin with just a few basic tools.

Essential Tools for Development

To create a Chrome extension, you’ll need:
1. A text editor or IDE (Integrated Development Environment)
2. Google Chrome browser
3. Basic knowledge of HTML, CSS, and JavaScript

For text editors, I recommend Visual Studio Code, Sublime Text, or Atom. These editors provide syntax highlighting and other features that make coding easier. Personally, I’ve found VS Code to be the most comfortable for extension development because of its excellent JavaScript support and extensive plugin ecosystem.

Chrome itself serves as both your development platform and testing environment. You’ll be using it to load, test, and debug your extension throughout the development process.

According to the Chrome Extension Development Setup, you don’t need to install any additional software beyond Chrome and a text editor to get started. This accessibility is one of the reasons extension development is so approachable for beginners.

Creating a Basic Project Structure

To set up your extension project, create a new folder on your computer with the following structure:

my-extension/
├── manifest.json
├── popup.html
├── popup.js
├── popup.css
├── background.js (optional)
├── content.js (optional)
└── icons/
    ├── icon16.png
    ├── icon48.png
    └── icon128.png

The manifest.json file is the blueprint of your extension – it tells Chrome what your extension does and what permissions it needs. We’ll cover this in detail in the next section.

Installing Chrome DevTools

Chrome DevTools comes built into the Chrome browser and is essential for debugging your extension. To access it:

1. Right-click anywhere on a webpage and select “Inspect”
2. Or press Ctrl+Shift+I (Windows/Linux) or Cmd+Option+I (Mac)

When developing extensions, you’ll mainly use these panels:
– Elements: For inspecting and modifying HTML and CSS
– Console: For viewing logs and executing JavaScript
– Sources: For debugging JavaScript code
– Network: For monitoring network requests

For extension-specific debugging, you’ll need to:
1. Navigate to chrome://extensions/
2. Enable “Developer mode” (toggle in the top-right corner)
3. Click “Load unpacked” and select your extension folder

Once loaded, you can click “background page” under your extension to open DevTools for background scripts, or right-click your extension icon and select “Inspect popup” to debug the popup.

Understanding the Extension Structure

The structure of a Chrome extension follows a specific pattern that determines how it will function and interact with Chrome. Let’s break down the key components that make up a Chrome extension.

The Manifest File Explained

The manifest.json file is the heart of your Chrome extension. It’s a JSON file that contains important metadata about your extension and declares what permissions it needs.

Here’s a basic manifest.json file for a simple extension using Manifest V3 (the current standard):

{
  "name": "My First Extension",
  "description": "A simple Chrome extension",
  "version": "1.0",
  "manifest_version": 3,
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icons/icon16.png",
      "48": "icons/icon48.png",
      "128": "icons/icon128.png"
    }
  },
  "permissions": ["storage", "activeTab"],
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [
    {
      "matches": ["https://*.example.com/*"],
      "js": ["content.js"]
    }
  ]
}

Let’s review the essential fields:

– name and description: Self-explanatory, they appear in the Chrome Web Store and the extensions page.
– version: Your extension’s version number, important for updates.
– manifest_version: Currently should be set to 3, as V2 is being phased out.
– action: Defines what happens when the user clicks your extension icon.
– permissions: Specifies what Chrome APIs your extension can use.
– background: Declares a background script that runs persistently.
– content_scripts: Specifies scripts that run in the context of web pages.

It’s worth noting that Manifest V3 introduced significant changes compared to V2, including replacing “browser_action” with “action” and changing how background scripts work (now using service workers).

Structure of a Basic Chrome Extension

Beyond the manifest file, a basic extension typically includes:

1. Popup files (HTML, CSS, JS): These create the interface that appears when users click on your extension icon.

2. Background scripts: These run in the background and can handle events even when the popup isn’t open. In Manifest V3, these are implemented as service workers.

3. Content scripts: These are injected into web pages that match specified patterns, allowing your extension to interact with web content.

4. Icons: Various sizes of icons for different contexts (toolbar, extensions page, Chrome Web Store).

Each of these components plays a specific role:

– The popup provides a user interface for interaction.
– Background scripts maintain state and handle events when the popup is closed.
– Content scripts allow your extension to read and modify web pages.

One common mistake I’ve seen developers make is trying to directly access DOM elements from background scripts – this won’t work because background scripts run in a separate context. Instead, use messaging between your background scripts and content scripts to communicate.

Building the User Interface

The user interface is often the most visible part of your Chrome extension. A well-designed UI can make the difference between an extension that gets used daily and one that gets uninstalled quickly.

Designing a User-friendly Popup

The popup is what users see when they click on your extension icon. Here’s a simple example of a popup.html file:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="popup.css">
</head>
<body>
  <div class="container">
    <h2>My Extension</h2>
    <p>Welcome to my first Chrome extension!</p>
    <button id="actionButton">Click Me</button>
  </div>
  <script src="popup.js"></script>
</body>
</html>

When designing your popup, keep these tips in mind:

1. Keep it simple: Popups should be focused and not overwhelming.
2. Size appropriately: Popups shouldn’t be too large (300-400px wide is a good target).
3. Be responsive: Users might resize the popup, so design accordingly.
4. Include clear actions: Make it obvious what users can do.

Remember that popups in Chrome extensions have some limitations – they automatically close when the user clicks outside of them, so they’re best suited for quick interactions rather than complex workflows.

Creating Icons for the Extension

Icons are crucial for brand recognition. Your extension will need icons in several sizes:

– 16×16: Favicon for extension tabs
– 48×48: Extensions management page
– 128×128: Chrome Web Store

Create these icons in PNG format with transparency for best results. If you’re not a designer, tools like Canva or even simple icon libraries can help you create professional-looking icons.

Using HTML, CSS, and JavaScript

Building the UI for your Chrome extension uses the same web technologies you’d use for a website:

HTML structures your content:

<div class="feature">
  <h3>Feature Title</h3>
  <p>Description of the feature</p>
  <button id="featureButton">Activate</button>
</div>

CSS styles your elements:

.feature {
  background-color: #f5f5f5;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 10px;
}

button {
  background-color: #4285f4;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #3367d6;
}

JavaScript adds interactivity:

document.addEventListener('DOMContentLoaded', function() {
  document.getElementById('featureButton').addEventListener('click', function() {
    // Do something when the button is clicked
    console.log('Button clicked!');
    
    // Example: Sending a message to a content script
    chrome.tabs.query({active: true, currentTab: true}, function(tabs) {
      chrome.tabs.sendMessage(tabs[0].id, {action: "activateFeature"});
    });
  });
});

One time-saving approach I’ve used is to integrate third-party libraries like Bootstrap or jQuery to speed up development. To do this, either include the libraries in your extension folder or use a CDN (though local files are generally preferred for extensions).

When designing your extension’s UI, I’ve found it helpful to sketch the interface first before writing any code, which helps clarify the user flow and identify potential usability issues early.

Adding Functionality with Chrome APIs

The real power of Chrome extensions comes from their ability to interact with the browser using Chrome APIs. These APIs allow you to access browser features, modify web content, and create rich experiences for users.

Introduction to Chrome APIs and Their Capabilities

Chrome provides numerous APIs that extensions can use, each serving different purposes:

– Storage API: Store and retrieve data persistently
– Tabs API: Create, modify, and rearrange tabs
– Bookmarks API: Create and organize bookmarks
– WebRequest API: Intercept and modify network requests
– Notifications API: Display notifications to the user
– ContextMenus API: Add items to the browser’s context menu

According to the Chrome APIs and Functionality documentation, these APIs provide secure ways for your extension to interact with the browser while respecting user privacy.

Here’s a simple example using the Storage API to save user preferences:

// Save data
chrome.storage.sync.set({color: 'blue'}, function() {
  console.log('Color preference saved');
});

// Retrieve data
chrome.storage.sync.get(['color'], function(result) {
  console.log('Color preference is ' + result.color);
});

Using chrome.storage.sync instead of chrome.storage.local allows the user’s preferences to sync across devices where they’re signed into Chrome, which is a nice feature to offer.

Implementing Core Functionality

Let’s implement a simple feature that changes the background color of a webpage when the user clicks a button in the popup:

First, in popup.js:

document.addEventListener('DOMContentLoaded', function() {
  const colorButtons = document.querySelectorAll('.color-button');
  
  colorButtons.forEach(function(button) {
    button.addEventListener('click', function() {
      const color = this.dataset.color;
      
      // Save the selected color
      chrome.storage.sync.set({backgroundColor: color});
      
      // Send a message to the content script
      chrome.tabs.query({active: true, currentTab: true}, function(tabs) {
        chrome.tabs.sendMessage(tabs[0].id, {
          action: 'changeBackground',
          color: color
        });
      });
    });
  });
});

Then, in content.js:

// Listen for messages from the popup
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
  if (request.action === 'changeBackground') {
    document.body.style.backgroundColor = request.color;
  }
});

// When the content script loads, check if we have a saved color
chrome.storage.sync.get(['backgroundColor'], function(result) {
  if (result.backgroundColor) {
    document.body.style.backgroundColor = result.backgroundColor;
  }
});

Content Scripts and Injection

Content scripts are a special type of script that runs in the context of web pages. They can read and modify the DOM of the pages they’re injected into, making them perfect for customizing web experiences.

There are two ways to inject content scripts:

1. Declarative: Specified in the manifest.json file

"content_scripts": [
  {
    "matches": ["https://*.example.com/*"],
    "js": ["content.js"],
    "css": ["content.css"],
    "run_at": "document_idle"
  }
]

2. Programmatic: Injected using the Scripting API

chrome.scripting.executeScript({
  target: {tabId: tabId},
  files: ['content.js']
});

Programmatic injection is useful when you need to inject scripts conditionally, rather than on every matching page.

When working with content scripts, keep these best practices in mind:

– Use event listeners to detect page changes
– Avoid polluting the global namespace
– Be mindful of performance impact
– Use message passing to communicate with background scripts

I once created an extension that needed to modify a web application my team used daily. The challenge was that the app used React, which constantly updated the DOM. My content script kept losing track of elements after React rendered. The solution? I added a plugins essential tools for js developers like MutationObserver to watch for DOM changes and reapply my modifications after each render.

Handling Permissions and Security

Permissions are a critical aspect of Chrome extension development. Always follow the principle of least privilege: request only the permissions your extension absolutely needs.

Common permissions include:
– "storage": Access to the Storage API
– "activeTab": Access to the currently active tab
– "tabs": Access to the Tabs API
– "http://*/*", "https://*/*": Access to all websites

When users install your extension, they’ll see a permission dialog based on what you’ve requested. Excessive permissions can deter users from installing your extension, so be judicious.

For security best practices:
– Validate all input, especially user input
– Use Content Security Policy (CSP) to prevent XSS attacks
– Be careful with eval() and innerHTML
– Sanitize data from untrusted sources

Remember that with great power comes great responsibility – extensions have significant access to user data, so treat it with care.

Testing and Debugging

Thorough testing is essential for creating a reliable Chrome extension. Let’s explore how to effectively test and debug your extension during development.

How to Load an Unpacked Extension in Chrome

Before submitting to the Chrome Web Store, you’ll want to test your extension locally. Here’s how:

1. Open Chrome and navigate to chrome://extensions/
2. Enable “Developer mode” by toggling the switch in the top-right corner
3. Click “Load unpacked” and select your extension’s directory
4. Your extension should now appear in the extensions list and in the toolbar

If you make changes to your extension’s code, you’ll need to reload it:
1. Go back to chrome://extensions/
2. Find your extension in the list
3. Click the refresh icon

For manifest.json changes, a reload is mandatory. For other files, it depends:
– HTML, CSS, and JavaScript files referenced by the popup: These reload when the popup is opened
– Background scripts: These need a manual reload
– Content scripts: These reload when you refresh the page they’re injected into

Using Chrome DevTools for Debugging

Chrome DevTools is your best friend for debugging extensions:

For background scripts:
1. Go to chrome://extensions/
2. Find your extension and click “service worker” link (for Manifest V3)
3. This opens DevTools connected to your background script

For popup debugging:
1. Click your extension icon to open the popup
2. Right-click within the popup and select “Inspect”
3. DevTools will open, showing the popup’s HTML, CSS, and JavaScript

For content scripts:
1. Navigate to a page where your content script runs
2. Open DevTools (Ctrl+Shift+I or Cmd+Option+I)
3. In the Sources panel, look for your content script file

Use console.log() statements liberally during development to track what’s happening in your code:

console.log('Button clicked with value:', value);
console.log('Data received:', data);
console.log('Error occurred:', error);

The debugger statement is also invaluable for setting breakpoints directly in your code:

function processData(data) {
  debugger; // Execution will pause here when DevTools is open
  // Process the data...
}

Common Debugging Issues

Several common issues tend to trip up extension developers:

Manifest errors:
– Missing required fields
– Syntax errors in JSON (missing commas, extra commas, etc.)
– Using features that require specific permissions without declaring them

Content script issues:
– Scripts not running on expected pages
– Timing problems (script running before page elements are available)
– Conflicts with the website’s own JavaScript

Permission problems:
– Attempting to use APIs without the necessary permissions
– Cross-origin restrictions preventing access to resources

One particularly tricky issue I encountered was with a plugin automate android build process that seemed similar to extension development but had completely different permission models. In Chrome extensions, I learned to check the console for “Extension manifest must request permission” errors, which usually point to missing permissions in your manifest.json file.

For content script debugging, use the Elements panel to inspect the DOM and see if your changes are being applied. If they’re not, check if your content script is running at the right time using the “run_at” property in your manifest.

When all else fails, start with a minimal version of your extension and gradually add functionality, testing at each step. This incremental approach makes it much easier to identify where problems are occurring.

Packaging and Distributing the Extension

Once you’ve built and tested your extension, it’s time to share it with the world through the Chrome Web Store. This process involves packaging your extension correctly and navigating the submission process.

How to Package Your Extension for Distribution

Before submitting to the Chrome Web Store, you need to package your extension:

1. Organize your files: Make sure your extension directory contains only the necessary files:
– manifest.json
– HTML, CSS, and JavaScript files
– Images and other assets
– Any libraries you’re using

2. Create a ZIP file: Compress your extension directory into a .zip file
– On Windows: Right-click the folder, select “Send to” > “Compressed (zipped) folder”
– On Mac: Right-click the folder and select “Compress [folder name]”
– On Linux: Use the zip -r extension.zip extension-directory/ command

3. Check your ZIP file: Make sure the manifest.json file is at the root of the ZIP archive, not in a subdirectory

The ZIP file should be less than 10MB for the Chrome Web Store. If your extension exceeds this size, consider optimizing images or removing unnecessary assets.

Submitting Your Extension to the Chrome Web Store

To publish your extension, you’ll need a Google Developer account:

1. Create a developer account: Visit the Chrome Web Store Developer Dashboard and pay the one-time $5.00 registration fee

2. Add a new item: Click “New Item” and upload your ZIP file

3. Fill in the store listing:
– Provide a compelling description
– Upload screenshots and promotional images
– Select appropriate categories
– Set up pricing and distribution options

4. Submit for review: Once all information is complete, submit your extension for review

The Chrome Web Store review process typically takes a few days but can sometimes take longer, especially for extensions that request sensitive permissions. During this time, your extension will be reviewed for compliance with the Chrome Web Store policies.

Understanding the Review Process

Google reviews all extensions before they appear in the Chrome Web Store. The review checks for:

– Technical issues and bugs
– Policy compliance
– Security vulnerabilities
– Accurate description of functionality

Extensions that request powerful permissions undergo more scrutiny. To improve your chances of passing review:

– Clearly explain why your extension needs each permission
– Provide detailed descriptions of how user data will be used
– Ensure your privacy policy is comprehensive and accessible

If your extension is rejected, you’ll receive feedback about the issues. Address these concerns and resubmit your extension.

I once submitted an extension that was rejected because it requested the “tabs” permission without clearly explaining why. After adding better documentation and limiting the permission scope to just what was needed, it was approved on the second try.

For extensions that handle sensitive data, like those related to stripe plugin accept payments wordpress site, you’ll need to be particularly careful about security and privacy practices to pass the review.

Maintaining and Updating

Creating a Chrome extension is just the beginning of the journey. Maintaining and updating it is crucial for long-term success and user satisfaction.

Keeping Your Extension Up-to-Date with Chrome Updates

Chrome releases a new version approximately every six weeks, which can sometimes affect how extensions function. To keep your extension compatible:

1. Stay informed about upcoming changes: Follow the Chromium Blog and Chrome Developer Documentation

2. Test with Chrome Canary: This early-release version of Chrome can help you identify compatibility issues before they affect most users

3. Respond quickly to breaking changes: When Google deprecates APIs or changes behavior, update your extension promptly

4. Use feature detection: Instead of assuming certain APIs exist, check for them before using:

if (chrome.someAPI && chrome.someAPI.someMethod) {
  // Use the API
} else {
  // Provide fallback behavior
}

The transition from Manifest V2 to V3 is a perfect example of a major update that required significant changes to extensions. Extensions that proactively adapted had a smoother transition than those that waited until the last minute.

Monitoring User Feedback and Reviews

User feedback is invaluable for improving your extension:

1. Check reviews regularly: Users often report bugs or suggest features in their reviews

2. Provide support channels: Add links to a support website, email address, or GitHub issues page in your extension description

3. Track common issues: Keep a log of frequently reported problems to prioritize fixes

4. Respond to reviews: Engaging with users shows that you care about their experience

When users leave negative reviews, respond professionally and try to help them resolve their issues. Often, a responsive developer can turn a negative review into a positive one.

Best Practices for Ongoing Maintenance

To maintain a successful extension over time:

1. Version control: Use Git or another version control system to track changes

2. Semantic versioning: Follow the pattern MAJOR.MINOR.PATCH:
– MAJOR: Incompatible API changes
– MINOR: New features (backward compatible)
– PATCH: Bug fixes (backward compatible)

3. Change logs: Document what changes in each version

4. Testing strategy: Create automated tests where possible to catch regressions

5. Performance monitoring: Regularly check if your extension is causing performance issues

I’ve found that using automated testing tools like Jest can be incredibly valuable for maintaining complex extensions. Writing tests for core functionality means you can quickly catch regressions when making changes.

Handling User Feedback

Effective feedback handling involves:

1. Categorizing feedback: Sort feedback into bugs, feature requests, and general comments

2. Prioritizing issues: Focus on critical bugs first, then features that benefit the most users

3. Communicating timelines: Let users know when they can expect fixes or new features

4. Updating the store listing: Add FAQs or troubleshooting tips based on common questions

Remember that not all feature requests should be implemented. Sometimes saying no is necessary to keep your extension focused and maintainable. When declining requests, explain your reasoning clearly.

For updates, consider using the wordpress plugin key features benefits approach by highlighting new features prominently in your version notes and extension description.

One of the most rewarding aspects of extension development is seeing how users incorporate your tool into their workflows. I once received feedback from a teacher who was using my simple note-taking extension to help students organize research projects – a use case I’d never imagined! User stories like this can inspire new features and improvements.

---

FAQs

What are the basic steps to create a Chrome extension?

The basic steps include setting up a development environment, creating a manifest.json file, building the user interface with HTML/CSS/JavaScript, implementing functionality using Chrome APIs, testing your extension locally, and finally publishing to the Chrome Web Store.

How do I use Chrome APIs in my extension?

Chrome APIs are accessed through the chrome object in your JavaScript code. For example, chrome.storage.sync.get() to retrieve stored data. You must declare the API permissions you need in your manifest.json file, and then you can call the APIs from your background scripts, popup scripts, or content scripts depending on the specific API.

What are the best practices for securing my Chrome extension?

Follow the principle of least privilege by requesting only the permissions you need. Validate all input, especially from users or external sources. Use Content Security Policy to prevent XSS attacks. Avoid using eval() or innerHTML with untrusted content. Keep sensitive user data encrypted and never expose API keys in your code.

How do I publish my Chrome extension to the Chrome Web Store?

Create a Google Developer account and pay the one-time $5 registration fee. Package your extension as a ZIP file. On the Chrome Web Store Developer Dashboard, click “New Item” and upload your package. Fill in all required store listing information including description, screenshots, and promotional images. Submit your extension for review, which typically takes a few days to complete.

How do I update my Chrome extension after it’s been published?

To update your published extension, make your code changes and increment the version number in manifest.json. Package the updated extension as a ZIP file. In the Chrome Web Store Developer Dashboard, select your extension and upload the new package under the “Package” tab. The update will be submitted for review, and once approved, it will be automatically distributed to existing users.

What are some common mistakes to avoid when developing a Chrome extension?

Common mistakes include requesting excessive permissions, not properly testing on different websites, ignoring browser compatibility issues, using deprecated APIs, poor error handling, forgetting to validate user input, creating memory leaks through event listeners that aren’t removed, and not providing clear instructions for users on how to use the extension.

How do I debug my Chrome extension?

Debug background scripts by clicking the “service worker” link on the chrome://extensions page. Debug popups by right-clicking on the popup and selecting “Inspect”. Debug content scripts by opening DevTools on a page where your script runs and finding your script in the Sources panel. Use console.log() statements and the debugger keyword to track execution flow.

Can I use third-party libraries in my Chrome extension?

Yes, you can use third-party libraries in your Chrome extension. Include the library files in your extension package and reference them in your HTML files or import them in your JavaScript files. Make sure the libraries you use are compatible with the Content Security Policy restrictions of Chrome extensions, or adjust your CSP in the manifest.json file accordingly.

How do I handle user permissions in my Chrome extension?

Declare all required permissions in your manifest.json file. Use the optional_permissions field for permissions that aren’t immediately necessary. Request optional permissions at runtime using chrome.permissions.request(). Always explain to users why your extension needs specific permissions, and follow the principle of least privilege by only requesting what you truly need.

What are the differences between manifest versions?

Manifest V3 (current) uses service workers for background scripts instead of persistent background pages used in V2. V3 replaces the blocking Web Request API with the Declarative Net Request API. It introduces more stringent Content Security Policy defaults. Remote code execution is more restricted in V3. Browser actions and page actions from V2 are unified into a single “action” in V3. Some APIs have been deprecated or replaced with more secure alternatives.

Conclusion

Creating your own Chrome extension is an empowering experience that allows you to customize your browsing experience exactly the way you want it. Whether you’re building something for yourself, your team, or the wider Chrome user base, extensions provide a powerful way to solve specific problems and enhance productivity.

As you embark on your extension development journey, remember that the best extensions often start by solving a genuine problem. My first extension began as a simple tool to automate repetitive tasks on a website I used daily, and it evolved based on feedback from colleagues who found it useful.

Don’t be intimidated by the technical aspects – start small, experiment, and build upon your successes. The Chrome extension ecosystem is designed to be accessible to developers of all skill levels, and the design resources find top talent can help you create visually appealing interfaces even if you’re not a designer.

Now that you have the knowledge to create your own Chrome extension, what problem will you solve first? The web is waiting for your contribution!