Test Setup and Methodology

We conducted a stress test by sequentially chaining 10 requests through Mellowtel - an extreme scenario that would rarely occur in real-world usage, where requests are typically more sporadic and spread out over time. Each request was executed one after another in rapid succession, allowing us to measure the maximum potential impact on:

• Network bandwidth utilization

• CPU usage (M2 Silicon chip)

• RAM consumption (16GB total system RAM)

• Request distribution and handling

Results and Analysis

Network Performance

• Total Data Transferred: 18.56 MB

• Total Requests: 10

System Resource Impact

• RAM Usage: Maximum increase of 0.43% (on 16GB system)

• CPU Usage: Maximum increase of 0.0001% (M2 Silicon)

• No visible spikes or significant changes in resource utilization during testing

Request Breakdown

The test generated various types of requests:

• Script requests: 496 (2.52 MB)

• Stylesheet requests: 33 (270.77 KB)

• Image requests: 285 (15.01 MB)

• XMLHttpRequests: 82 (248.47 KB)

• Font requests: 34 (532.55 KB)

• Other requests: 20 (1.79 KB)

System Impact

Even under this rapid-fire testing scenario, our measurements showed remarkably low resource utilization. With a maximum RAM delta of just 0.43% and CPU usage increase of 0.0001%, Mellowtel's impact on system performance is negligible. The video monitoring confirmed that the bandwidth sharing operates efficiently in the background without any noticeable impact on system performance.

Impact on User Experience

The test results demonstrate that Mellowtel's bandwidth-sharing mechanism operates with remarkable efficiency, even when handling back-to-back requests. Users can expect even lower resource usage in typical scenarios, as real-world usage patterns are more sporadic with natural delays between requests. During testing, we observed:

• No noticeable system slowdown

• Minimal resource overhead (less than 0.5% RAM usage)

• Controlled bandwidth utilization

• Negligible CPU impact (0.0001% increase)

Conclusion

Our benchmark testing reveals that Mellowtel successfully achieves its goal of utilizing spare bandwidth while maintaining a light system footprint, even under stress conditions that exceed normal usage patterns. This makes it a viable option for browser extension developers looking to monetize their work without compromising user experience.

These results align with Mellowtel's design philosophy of creating a sustainable ecosystem for browser extensions that balances developer monetization with user experience. With such minimal resource impact - fractional percentages for both CPU and RAM usage even under rapid sequential testing - users can confidently opt into bandwidth sharing without concerns about system performance degradation.

Windows

On Windows, Chrome extensions are typically stored in the following location:

C:\Users\[YourUsername]\AppData\Local\Google\Chrome\User Data\Default\Extensions

If you're using multiple Chrome profiles, replace "Default" with the specific profile name, such as "Profile 1" or "Profile 2".

macOS

For Mac users, Chrome extensions can be found in:

~/Library/Application Support/Google/Chrome/Default/Extensions

Similarly, if you have multiple profiles, replace "Default" with the appropriate profile name.

Linux

Linux users can locate Chrome extensions in:

~/.config/google-chrome/Default/Extensions

Again, adjust the path for different profiles if necessary.

Finding the Exact Location

To find the precise location of Chrome extensions on your system:

1. Open Chrome and navigate to chrome://version/

2. Look for the "Profile Path" entry

3. The extensions folder will be located within this path, under a folder named "Extensions"

Extension Folder Structure

Within the Extensions folder, you'll find subdirectories named with unique IDs corresponding to each installed extension. These IDs can be found in the Chrome Web Store URL for the extension or in the chrome://extensions page when developer mode is enabled.

Unpacked Extensions

It's important to note that unpacked extensions (those loaded for development purposes) are not stored in the same location. They remain in the directory from which they were loaded.

Accessing Extension Data

While the extension files are stored in these locations, user data for extensions is typically stored separately using Chrome's storage APIs. This data is not directly accessible in the file system but can be viewed using developer tools:

1. Go to chrome://extensions

2. Find the extension and click on "Inspect views: background page"

3. In the developer tools, go to the Application tab

4. Expand the Storage section to view Local Storage and other storage mechanisms used by the extension

Understanding where Chrome extensions are stored can be helpful for developers and power users who need to access or manage extension files directly. However, for most users, interacting with extensions through Chrome's interface is sufficient and recommended.

What is an Options Page?

An options page is a dedicated page that allows users to configure settings for your extension. It's a great way to make your extension more flexible and user-friendly.

If you're new to Chrome extension development, start with our guide on How to Create Your First Chrome Extension.

Steps to Create an Options Page

1. Create the Options Page HTML

First, create a file named options.html in your extension's directory:

<!DOCTYPE html>
<html>
<head><title>My Extension Options</title></head>
<body>
  <label>
    Favorite color:
    <select id="color">
      <option value="red">red</option>
      <option value="green">green</option>
      <option value="blue">blue</option>
      <option value="yellow">yellow</option>
    </select>
  </label>
  <button id="save">Save</button>
  <script src="options.js"></script>
</body>
</html>

2. Create the Options Page JavaScript

Create a file named options.js:

// Saves options to chrome.storage
function save_options() {
  var color = document.getElementById('color').value;
  chrome.storage.sync.set({
    favoriteColor: color
  }, function() {
    // Update status to let user know options were saved.
    var status = document.getElementById('status');
    status.textContent = 'Options saved.';
    setTimeout(function() {
      status.textContent = '';
    }, 750);
  });
}

// Restores select box and checkbox state using the preferences
// stored in chrome.storage.
function restore_options() {
  chrome.storage.sync.get({
    favoriteColor: 'red' // default value
  }, function(items) {
    document.getElementById('color').value = items.favoriteColor;
  });
}

document.addEventListener('DOMContentLoaded', restore_options);
document.getElementById('save').addEventListener('click', save_options);

This script uses the Chrome Extension Storage API to save and retrieve user preferences.

3. Register the Options Page in manifest.json

Add the options page to your manifest.json:

{
  "options_page": "options.html"
}

Using Options in Your Extension

You can access the saved options in other parts of your extension, such as background scripts or content scripts:

chrome.storage.sync.get({
  favoriteColor: 'red' // default value
}, function(items) {
  console.log('The user's favorite color is ' + items.favoriteColor);
});

Best Practices

1. Keep the options simple and easy to understand

2. Provide default values for all options

3. Use appropriate input types (checkboxes, radio buttons, select dropdowns) for different types of options

4. Provide immediate feedback when options are saved

5. Consider using the options page to allow users to customize API endpoints or provide API keys for Making API Calls in Chrome Extensions

Conclusion

An options page is a powerful tool for making your Chrome extension more flexible and user-friendly. By following this guide, you've learned how to create an options page, save user preferences, and use those preferences in your extension.

As you develop more complex extensions, consider how you can use options pages in conjunction with other extension features to create a customizable and powerful user experience.

Prerequisites

Before making API calls, ensure you've set up your basic extension structure. If you're new to this, check out our guide on How to Create Your First Chrome Extension.

Steps to Make API Calls

1. Request Permissions

First, request permission to make network requests in your manifest.json:

{
  "manifest_version": 3,
  "name": "My API Extension",
  "version": "1.0",
  "permissions": ["https://api.example.com/"],
  "host_permissions": ["https://api.example.com/"]
}

Replace https://api.example.com/ with the base URL of the API you're calling. Note that in Manifest V3, we use both permissions and host_permissions for network requests.

2. Making the API Call

You can use the fetch API with async/await to make network requests. Here's a basic example:

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error:', error);
  }
}

fetchData();

This code uses async/await to handle the asynchronous nature of the fetch call, making it easier to read and maintain.

3. Handling CORS

If you're making calls to a third-party API, you might encounter CORS (Cross-Origin Resource Sharing) issues. To resolve this, you may need to make the call from a service worker (background script) instead of a content script.

Making API Calls from Different Contexts

From Service Workers (Background Scripts)

Service workers in Manifest V3 can use async/await directly:

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.action === 'fetchData') {
    fetchDataAndRespond(sendResponse);
    return true;  // Will respond asynchronously
  }
});

async function fetchDataAndRespond(sendResponse) {
  try {
    const response = await fetch('https://api.example.com/data');
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    const data = await response.json();
    sendResponse({data: data});
  } catch (error) {
    sendResponse({error: error.toString()});
  }
}

From Content Scripts

While content scripts can make API calls directly, it's often better to relay the call through a service worker to avoid CORS issues:

async function fetchDataFromBackground() {
  try {
    const response = await chrome.runtime.sendMessage({action: 'fetchData'});
    if (response.data) {
      console.log(response.data);
    } else {
      console.error(response.error);
    }
  } catch (error) {
    console.error('Error:', error);
  }
}

fetchDataFromBackground();

Best Practices

1. Error Handling: Always include proper error handling in your API calls.

2. Use async/await: It makes asynchronous code more readable and easier to maintain.

3. Respect API Rate Limits: Implement appropriate throttling or caching mechanisms.

4. Secure Storage of API Keys: If your API requires authentication, store keys securely. Consider using the Chrome Extension Storage API for sensitive data.

5. Handle Network Changes: Be prepared for offline scenarios or network interruptions.

Security Considerations

1. Never expose sensitive API keys in your extension code. Use environment variables or secure storage methods.

2. Always use HTTPS for API calls to ensure data privacy and integrity.

3. Validate and sanitize all data received from APIs before using it in your extension.

4. Be cautious about the permissions you request. Only ask for what you need.

Using the Fetch API with Options

For more complex API calls, you can pass options to the fetch function:

async function postData(url = '', data = {}) {
  try {
    const response = await fetch(url, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(data),
    });
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    return await response.json();
  } catch (error) {
    console.error('Error:', error);
  }
}

// Usage
postData('https://api.example.com/data', { answer: 42 })
  .then((data) => {
    console.log(data);
  });

Handling Authentication

If your API requires authentication, you might need to include an API key or token in your requests. Here's an example:

async function fetchWithAuth(url) {
  const API_KEY = await getApiKey(); // Implement this function to securely retrieve your API key
  try {
    const response = await fetch(url, {
      headers: {
        'Authorization': `Bearer ${API_KEY}`
      }
    });
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    return await response.json();
  } catch (error) {
    console.error('Error:', error);
  }
}

Conclusion

Making API calls is a powerful way to extend the functionality of your Chrome extension. By following this guide, you've learned how to make API calls from different parts of your extension, handle errors, and deal with common issues like CORS.

As you develop more complex extensions, consider how you can use API calls in conjunction with other extension features, such as service workers, content scripts, and options pages, to create a rich and dynamic user experience.

Remember to always prioritize security and user privacy when working with APIs in your extensions. Happy coding!

What is the Chrome Extension Storage API?

The Storage API allows you to store and retrieve data in a way that's optimized for extension performance. It provides two main types of storage:

1. chrome.storage.sync: Syncs data across all Chrome browsers that the user is logged into.

2. chrome.storage.local: Stores data locally on the user's device.

If you're new to Chrome extension development, start with our guide on How to Create Your First Chrome Extension.

Using the Storage API

1. Request Permission

First, request permission to use the Storage API in your manifest.json:

{
  "permissions": ["storage"]
}

2. Saving Data

To save data, use the set method:

chrome.storage.sync.set({key: value}, function() {
  console.log('Value is set to ' + value);
});

3. Retrieving Data

To retrieve data, use the get method:

chrome.storage.sync.get(['key'], function(result) {
  console.log('Value currently is ' + result.key);
});

4. Listening for Changes

You can listen for changes to stored data:

chrome.storage.onChanged.addListener(function(changes, namespace) {
  for (let [key, { oldValue, newValue }] of Object.entries(changes)) {
    console.log(
      `Storage key "${key}" in namespace "${namespace}" changed.`,
      `Old value was "${oldValue}", new value is "${newValue}".`
    );
  }
});

Storage Limits

It's important to be aware of the storage limits when using the Chrome Extension Storage API:

chrome.storage.sync

• Total storage limit: 100KB of data synced across devices

• Per-item limit: 8KB

• Maximum number of items: 512

chrome.storage.local

• Total storage limit: 10MB (may be less on some devices)

• Per-item limit: 5MB

• No limit on the number of items

Be mindful of these limits when designing your extension. If you need to store larger amounts of data, consider using chrome.storage.local or even IndexedDB for very large datasets.

Best Practices

1. Use sync storage for user preferences and small amounts of data.

2. Use local storage for larger amounts of data or data that doesn't need to be synced.

3. Be mindful of storage limits: sync has stricter limits than local.

4. Always handle errors and edge cases when reading from or writing to storage.

Using Storage in Different Contexts

The Storage API can be used in various parts of your extension:

• In background scripts for managing global state.

• In content scripts for storing page-specific data.

• In popup scripts for saving user interactions.

• In options pages for storing user preferences.

Making API Calls with Stored Data

You might want to use stored data when Making API Calls in Chrome Extensions, such as using stored API keys or user preferences to customize API requests.

Conclusion

The Chrome Extension Storage API is a powerful tool for managing data in your extension. By following this guide, you've learned how to save, retrieve, and listen for changes to stored data.

As you develop more complex extensions, consider how you can use the Storage API in conjunction with other extension features to create a seamless user experience.

What are Content Scripts?

Content scripts are JavaScript files that run in the context of web pages. They can read details of the web pages the browser visits, make changes to them, and pass information to their parent extension.

If you're new to Chrome extension development, start with our guide on How to Create Your First Chrome Extension.

Creating and Implementing Content Scripts

1. Create the Content Script File

First, create a new file in your extension's directory, typically named content.js.

2. Write Your Content Script

Here's a basic example of a content script:

console.log('Content script loaded');

// Change the background color of the page
document.body.style.backgroundColor = 'lightblue';

// Listen for messages from the extension
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.action === 'getPageTitle') {
    sendResponse({title: document.title});
  }
});

This script logs a message, changes the page's background color, and listens for messages from the extension.

3. Register the Content Script in manifest.json

To tell Chrome about your content script, register it in your manifest.json file:

{
  "manifest_version": 3,
  "name": "My Extension",
  "version": "1.0",
  "description": "An extension with a content script",
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ]
}

4. Communicating with Content Scripts

You can send messages to your content script from other parts of your extension, like background scripts:

chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
  chrome.tabs.sendMessage(tabs[0].id, {action: "getPageTitle"}, (response) => {
    console.log('Page title:', response.title);
  });
});

Best Practices for Content Scripts

1. Keep them lightweight: Content scripts should be efficient to avoid slowing down web page loading.

2. Use event listeners: React to specific events rather than running continuous loops.

3. Be cautious with page modifications: Ensure your changes don't break the functionality of the web pages.

4. Use chrome.storage for persistent data: This allows you to share data between content scripts and other parts of your extension.

Making API Calls from Content Scripts

While it's possible to make API calls directly from content scripts, it's often better to do this from a background script for security reasons. For more information, see our guide on Making API Calls in Chrome Extensions.

Conclusion

Content scripts are a crucial tool for Chrome extensions that need to interact with web pages. By following this guide, you've learned how to create, implement, and use content scripts in your extension.

What is a Service Worker?

A service worker in a Chrome extension is a script that runs separately from web pages. It's designed to handle events, perform tasks, and manage state for your extension. Key points to understand:

1. Service workers are event-based and do not run continuously.

2. They can be started and stopped by the browser as needed.

3. They are short-lived and can be terminated and restarted between events.

4. They don't have access to the DOM or window object.

Steps to Create a Service Worker

1. Create the Service Worker File

First, create a new file in your extension's directory, typically named background.js (despite being a service worker).

2. Write Your Service Worker Script

Here's a basic example of a service worker:

chrome.runtime.onInstalled.addListener(() => {
  console.log('Extension installed');
});

// Listen for messages from other parts of your extension
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.action === 'performTask') {
    // Perform some task
    sendResponse({result: 'Task completed'});
  }
  return true; // Indicates we will respond asynchronously
});

This script sets up listeners for the extension installation event and for messages from other parts of your extension.

3. Register the Service Worker in manifest.json

To tell Chrome about your service worker, you need to register it in your manifest.json file:

{
  "manifest_version": 3,
  "name": "My Extension",
  "version": "1.0",
  "description": "An extension with a service worker",
  "background": {
    "service_worker": "background.js"
  }
}

Using the Service Worker

You can communicate with your service worker from other parts of your extension, like popup scripts or content scripts, using chrome.runtime.sendMessage:

javascriptCopychrome.runtime.sendMessage({action: 'performTask'}, response => {
  console.log(response.result);  // Outputs: "Task completed"
});

Best Practices for Service Workers

1. Keep them lightweight: Service workers should be efficient as they are terminated and restarted frequently.

2. Use event listeners: Structure your code around events rather than continuous processes.

3. Avoid using DOM or window: Service workers don't have access to these objects.

4. Use chrome.storage for persistent data: This allows data to persist between service worker restarts. Learn more in our Chrome Extension Storage API guide.

5. Handle errors gracefully: Be prepared for your service worker to be terminated at any time.

Common Use Cases for Service Workers

1. Listening for browser events (like tab updates, bookmark changes, etc.)

2. Managing extension state

3. Handling cross-origin requests that aren't allowed in content scripts

4. Scheduling alarms or timers using chrome.alarms

Debugging Service Workers

1. Use console.log() statements in your service worker code.

2. Open the background page from the extension management page (chrome://extensions) by clicking on the "Service Worker" link for your extension.

3. Use the Chrome DevTools to debug your service worker.

Making API Calls from Service Workers

Service workers are ideal for making API calls, as they can run independently of the extension's UI. For more information on this, check out our article on Making API Calls in Chrome Extensions.

Conclusion

Service workers are a crucial component for creating powerful and responsive Chrome extensions. By following this guide, you've learned how to create, implement, and use a service worker in your extension.

Remember, the event-driven nature of service workers is different from the old background scripts. This new model is more efficient but requires a different approach to structuring your extension's background logic.

As you develop more complex extensions, you'll find service workers invaluable for managing state, handling events, and performing background tasks. Consider how you can use them in conjunction with content scripts and options pages to create a comprehensive extension.

Happy coding!

1. Use chrome://inspect/#other

Navigate to chrome://inspect/#other in Chrome to find and debug your offscreen page. This method allows direct access to the offscreen page's console and debugging tools.

2. Implement a logging relay system

If the offscreen window closes too quickly, create a helper function in the offscreen page to send logs to the background script:

const log = async (...args) => chrome.runtime.sendMessage({
  target: 'background',
  type: 'log',
  data: args,
});

Add a listener in the background script to receive and display these logs:

chrome.runtime.onMessage.addListener((message) => {
  if (message.target === 'background' && message.type === 'log') {
    console.log(...message.data);
  }
});

Use the log function in your offscreen page:

log('clipboard');

3. Inspect from the Chrome Extensions page

1. Go to chrome://extensions

2. Find your extension and open its details

3. Locate the "Inspect views" section

4. Click on your offscreen page link

This method opens Chrome DevTools for the offscreen page, allowing you to view console logs and debug effectively.

The Problem

Chrome extension service workers don't support XMLHttpRequest, which Axios relies on. This leads to the error:

Uncaught (in promise) Error: Error: Adapter 'http' is not available in the build

The Solution: Fetch API with Async/Await

Instead of using Axios, we'll use the Fetch API, which is natively supported in service workers. We'll implement this using async/await for cleaner, more readable code.

Implementing Fetch with Async/Await

Here's a detailed example of how to use Fetch with async/await in your Chrome extension:

async function fetchData(url, token) {
  try {
    const response = await fetch(url, {
      method: "GET",
      credentials: "include",
      headers: {
        "Content-Type": "application/json",
        "Authorization": `Bearer ${token}`,
        "Cookie": token  // If needed
      }
    });

    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }

    const data = await response.json();
    return data;
  } catch (error) {
    console.error("Fetch error:", error);
    throw error;
  }
}

Using the Async Function

To use this function in your service worker or other parts of your extension, you can do:

async function handleDataFetch() {
  try {
    const data = await fetchData("https://api.example.com/data", "your-auth-token");
    console.log("Data received:", data);
    // Process your data here
  } catch (error) {
    console.error("Error fetching data:", error);
    // Handle errors appropriately
  }
}

// Call the function
handleDataFetch();

Benefits of Async/Await Approach

1. Readability: The code flows more like synchronous code, making it easier to understand.

2. Error Handling: Try/catch blocks can handle both synchronous and asynchronous errors.

3. Sequential Execution: Easily handle multiple asynchronous operations in sequence.

Best Practices for Async/Await in Chrome Extensions

1. Error Handling: Always use try/catch blocks to handle potential errors.

2. Avoid Blocking: Remember that await still blocks execution in the current function. Use Promise.all() for concurrent operations.

3. Request Timeouts: Implement request timeouts to prevent hanging:

    const timeout = 5000; // 5 seconds
   
    const fetchWithTimeout = async (url, options, timeout) => {
      const controller = new AbortController();
      const id = setTimeout(() => controller.abort(), timeout);
   
      try {
        const response = await fetch(url, {
          ...options,
          signal: controller.signal
        });
        clearTimeout(id);
        return response;
      } catch (error) {
        clearTimeout(id);
        if (error.name === 'AbortError') {
          throw new Error('Request timed out');
        }
        throw error;
      }
    };
   

4. Caching: Implement caching to improve performance:

    const cache = new Map();
   
    async function fetchWithCache(url, token) {
      if (cache.has(url)) {
        return cache.get(url);
      }
   
      const data = await fetchData(url, token);
      cache.set(url, data);
      return data;
    }
   

5. Rate Limiting: Implement a simple rate limiter:

    const rateLimiter = {
      lastCall: 0,
      minInterval: 1000, // minimum 1 second between calls
   
      async limit(fn) {
        const now = Date.now();
        if (now - this.lastCall < this.minInterval) {
          await new Promise(resolve => setTimeout(resolve, this.minInterval - (now - this.lastCall)));
        }
        this.lastCall = Date.now();
        return fn();
      }
    };
   
    // Usage
    await rateLimiter.limit(() => fetchData(url, token));
   

Conclusion

By adopting the Fetch API with async/await in your Chrome extension, you not only resolve the "Adapter 'http' not available" error but also create more maintainable and efficient code. This approach aligns with modern JavaScript practices and provides a solid foundation for handling asynchronous operations in your extension.

Remember to always test your extension thoroughly, especially when making network requests, to ensure it behaves correctly under various conditions. Keep your code modular and follow Chrome's best practices and security guidelines for extension development.

Prerequisites

• Basic knowledge of JavaScript and HTML

• Familiarity with Chrome extension development

Steps to Get the Current Tab URL

1. Update Your Manifest File

   Ensure your manifest.json file includes the necessary permissions:

    {
      "permissions": [
        "tabs"
      ]
    }
   

   Alternatively, you can use the activeTab permission for a less intrusive approach:

    {
      "permissions": [
        "activeTab"
      ]
    }
   

2. Use the Chrome Tabs API

   The method to get the current tab URL depends on which part of your extension you're working in:

   a) In a background script (background.js):

    // background.js
   
    // Listen for when a tab is updated
    chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
      // Check if the tab has completed loading
      if (changeInfo.status === 'complete') {
        // Query for the active tab in the current window
        chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
          if (tabs[0]) {
            let currentUrl = tabs[0].url;
            console.log('Current tab URL:', currentUrl);
   
            // Here you can perform actions with the URL, such as:
            // - Sending it to a server
            // - Storing it in chrome.storage
            // - Sending a message to a content script
          }
        });
      }
    });
   

   b) In the JavaScript associated with your popup HTML:

    <!-- popup.html -->
    <!DOCTYPE html>
    <html>
      <head>
        <title>My Extension Popup</title>
      </head>
      <body>
        <div id="url-display"></div>
        <script src="popup.js"></script>
      </body>
    </html>
   

    // popup.js
    document.addEventListener('DOMContentLoaded', function() {
      chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
        if (tabs[0]) {
          let currentUrl = tabs[0].url;
          console.log(currentUrl);
          // Use currentUrl to update popup DOM
          document.getElementById('url-display').textContent = currentUrl;
        }
      });
    });
   

   c) In a content script (content.js):

    // content.js
   
    // Get the current page URL
    let currentUrl = window.location.toString();
    console.log('Current page URL:', currentUrl);
   
    // You can now use this URL for various purposes, such as:
    // 1. Sending it to the background script
    chrome.runtime.sendMessage({action: "reportURL", url: currentUrl});
   
    // 2. Modifying page content based on the URL
    if (currentUrl.includes('example.com')) {
      // Perform some action specific to example.com
    }
   

3. Handle the URL

   Once you have the URL, you can use it as needed in your extension.

Important Notes

• Permission Choice:

  • Use "tabs" permission if you need broad access to tab information.

  • Prefer "activeTab" if you only need access when the user explicitly interacts with your extension, as it's less intrusive.

• Window Focus:

  • currentWindow: true uses the window where your extension code is running.

  • lastFocusedWindow: true uses the most recently focused window, which may be different if the user has switched windows.

• Error Handling: Always check if the tab exists before accessing its properties.

• Asynchronous Nature: Remember that chrome.tabs.query is asynchronous. Always use the URL inside the callback or use async/await.

Best Practices

• Handle potential errors, such as when tabs API is not available

• Consider using async/await for cleaner code if working with newer Chrome versions

• Be aware of the context (background, popup HTML, or content script) when accessing the URL

• Respect user privacy and handle URL data securely

What is installHook.js?

installHook.js is a file commonly associated with the React Developer Tools Chrome extension. It's not part of your project code, but rather a component of the browser extension designed to enhance the development experience for React applications.

Key Points About installHook.js:

1. Origin: It's loaded by the React Developer Tools extension, not your website.

2. Purpose: Helps set up the development environment for React applications.

3. Impact: Does not affect your application's performance for end users.

4. Visibility: Only appears in Developer Tools, not in production builds.

How to Identify and Deactivate the Responsible Extension

If you're seeing unfamiliar files in your Developer Tools and want to identify or deactivate the responsible extension, follow these steps:

1. Identify the File:

   • Open Chrome Developer Tools (F12 or Right-click > Inspect).

   • Go to the Network tab.

   • Refresh your page and look for the unfamiliar file (e.g., installHook.js).

2. Check the File URL:

   • Click on the file in the Network tab to see its details.

   • Look at the "Request URL" field.

   • If it starts with chrome-extension://, it's coming from a browser extension.

3. Note the Extension ID:

   • The URL will look something like this: chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/installHook.js

   • The long string of letters after chrome-extension:// is the extension ID (in this example, fmkadmapgofadopljbjfkapdkoienihi).

4. Find the Extension:

   • Open a new tab and navigate to chrome://extensions/

   • In the search bar at the top of the page, paste the extension ID you noted earlier.

   • The page will filter to show only the matching extension.

5. Deactivate or Remove the Extension:

   • To temporarily deactivate: Toggle off the blue switch next to the extension.

   • To remove completely: Click the "Remove" button.

6. Verify the Change:

   • Return to your original tab and refresh the page.

   • Check the Network tab in Developer Tools again to confirm that the file is no longer being loaded.

Remember, many extensions (like React Developer Tools) are helpful for development. Only deactivate or remove them if you're sure they're causing issues or if you're doing performance testing.

Alternative Methods to Disable Extensions

If you want to disable all extensions temporarily:

• Use Chrome's Incognito Mode, which doesn't load extensions by default.

• Launch Chrome with the --disable-extensions flag:

  • On Windows: Right-click the Chrome shortcut > Properties > Add --disable-extensions to the end of the "Target" field.

  • On Mac/Linux: Launch Chrome from the terminal with google-chrome --disable-extensions

By following these steps, you can easily identify, deactivate, or remove any extension that's injecting files into your web pages, giving you more control over your development environment.

Should You Be Concerned?

Generally, files like installHook.js are harmless and even beneficial for development. However, if you're worried about performance during testing:

• Disable extensions when profiling your application.

• Use Chrome's incognito mode or the --disable-extensions flag when launching Chrome.

The Challenge: 403 Forbidden Error

When attempting to call the Ollama API from a Chrome Extension, you may encounter a 403 Forbidden error. This occurs due to CORS (Cross-Origin Resource Sharing) restrictions, which prevent web applications from making requests to different domains.

Solution: Configuring Ollama and Chrome Extension

To resolve this issue, you need to make changes in both your Ollama configuration and your Chrome Extension's manifest file. Here's how:

1. Configure Ollama to Allow Chrome Extension Origins

Set the OLLAMA_ORIGIN environment variable to allow Ollama to accept requests from Chrome Extension origins:

OLLAMA_ORIGINS=chrome-extension://* ollama serve

This command whitelists all Chrome Extension origins, enabling communication with Ollama.

2. Update Your Chrome Extension's Manifest File

In your manifest.json file, set the permissions and host permissions correctly:

{
  "permissions": [
    "tabs",
    "activeTab",
    "http://localhost/*",
    "scripting"
  ],
  "host_permissions": ["http://localhost/*"]
}

This configuration grants your extension the necessary permissions to interact with localhost, where your Ollama instance is running.

Implementing the API Call

After making these changes, implement your API call function like this:

function generateCodeSuggestionFromOllama(prompt) {
    const apiUrl = `http://localhost:11434/api/generate`;
    const body = {
        "model": "codellama",
        "prompt": prompt,
        "stream": false,
    };
    fetch(apiUrl, {
        method: 'POST',
        body: JSON.stringify(body),
    })
    .then(response => {
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        return response.text();
    })
    .then(data => {
        const jsonData = JSON.parse(data);
        const response = jsonData.response;
        document.getElementById("codeSuggestion").innerHTML = response;
    })
    .catch(error => console.error('Error:', error));
}

Conclusion

By following these steps, you can successfully integrate Ollama with your Chrome Extension, overcoming CORS issues and enabling seamless API interactions. Always consider security implications when allowing cross-origin requests and only whitelist trusted sources.

Solution 1: Opening the Side Panel on Action Click

To open the side panel when the user clicks the extension icon in the toolbar:

1. Update your manifest.json:

{
  "permissions": ["sidePanel"],
  "side_panel": {
    "default_path": "sidepanel.html"
  }
}

2. In your service-worker.js:

chrome.sidePanel
  .setPanelBehavior({ openPanelOnActionClick: true })
  .catch((error) => console.error(error));

Solution 2: Opening the Side Panel from the Popup

To open the side panel when a user clicks a button inside the extension popup:

1. Update your manifest.json:

{
  "background": {
    "service_worker": "service-worker.js"
  },
  "side_panel": {
    "default_path": "sidepanel.html"
  },
  "action": {
    "default_popup": "popup.html"
  },
  "permissions": ["sidePanel"]
}

2. In your popup.js:

document.getElementById('openSidePanel').addEventListener('click', function() {
  chrome.runtime.sendMessage({action: 'open_side_panel'});
});

3. In your service-worker.js:

let windowId;

chrome.tabs.onActivated.addListener(function (activeInfo) {
  windowId = activeInfo.windowId;
});

chrome.runtime.onMessage.addListener((message, sender) => {
  if (message.action === 'open_side_panel') {
    chrome.sidePanel.open({ windowId: windowId });
  }
});

Alternative Solution: Direct API Call

For a simpler approach, call chrome.sidePanel.open() directly in your popup script:

const handleOpenSidePanel = () => {
  chrome.windows.getCurrent({ populate: true }, (window) => {
    chrome.sidePanel.open({ windowId: window.id });
  });
}

Best Practices and Tips

1. Include necessary permissions in your manifest.json.

2. Handle errors gracefully.

3. Use TypeScript for better type checking and autocomplete support.

4. Test your extension thoroughly in different scenarios.

By implementing one of these solutions, you can successfully open your Chrome extension's side panel using a button click inside the popup or directly from the extension icon.

Why React for Chrome Extensions?

React offers several advantages for extension development:

1. Familiar Territory: Leverage your existing React knowledge.

2. Component-Based Architecture: Perfect for building modular extension UIs.

3. Rich Ecosystem: Access to numerous React libraries and tools.

4. Performance: React's virtual DOM optimizes extension performance.

Introducing Plasmo: Simplifying Extension Development

Plasmo is a game-changer for React-based extension development:

• React-First Approach: Seamless integration with React.

• Developer Experience: Features like hot reloading boost productivity.

• TypeScript Support: Built-in support for type-safe code.

• Manifest V3 Compatibility: Handles Chrome's latest manifest version complexities.

Building the Extension: A Step-by-Step Guide

Let's create a simple extension that changes the background color of web pages.

Step 1: Setting Up the Project

Ensure you have Node.js installed, then run:

npm create plasmo@latest

Follow the prompts, selecting React as your framework.

Step 2: Understanding the Project Structure

After initialization, your project structure will look like this:

color-shifter/
├── popup.tsx
├── style.css
└── package.json

popup.tsx is the entry point for your extension's popup UI.

Step 3: Crafting the Popup Component and Styles

First, create a new file called style.css in your project's root directory. Then, add some basic styling to it:

.popup-container {
  width: 300px;
  padding: 20px;
  font-family: Arial, sans-serif;
}

button {
  margin-top: 10px;
  padding: 8px 16px;
  background-color: #4CAF50;
  color: white;
  border: none;
  cursor: pointer;
}

Next, create your popup component in popup.tsx:

import React, { useState } from "react"
import "./style.css"

const Popup = () => {
  const [count, setCount] = useState(0)

  return (
    <div className="popup-container">
      <h1>Color Shifter</h1>
      <p>Change the web's colors with a click!</p>
      <button onClick={() => setCount(count + 1)}>
        Clicked {count} times
      </button>
    </div>
  )
}

export default Popup

Make sure to import the style.css file at the top of your popup.tsx as shown above. This will apply the styles to your popup component.

Step 4: Adding Color-Changing Functionality

Enhance the popup component with color-changing functionality:

import React, { useState, useEffect } from "react"
import "./style.css"

const Popup = () => {
  const [color, setColor] = useState("#ffffff")

  const changeColor = () => {
    const newColor = `#${Math.floor(Math.random()*16777215).toString(16)}`
    setColor(newColor)
    chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
      chrome.tabs.sendMessage(tabs[0].id, {type: "COLOR_CHANGE", color: newColor})
    })
  }

  useEffect(() => {
    // Initialize color when popup opens
    chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
      chrome.tabs.sendMessage(tabs[0].id, {type: "GET_COLOR"}, (response) => {
        if (response && response.color) {
          setColor(response.color)
        }
      })
    })
  }, [])

  return (
    <div className="popup-container">
      <h1>Color Shifter</h1>
      <div className="color-preview" style={{backgroundColor: color}}></div>
      <button onClick={changeColor}>Shift Colors!</button>
      <p>Current color: {color}</p>
    </div>
  )
}

export default Popup

Step 5: Creating a Content Script

Create a new file content.ts in the root directory to apply the color change to webpages:

let currentColor = "#ffffff"

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.type === "COLOR_CHANGE") {
    currentColor = request.color
    document.body.style.backgroundColor = currentColor
  } else if (request.type === "GET_COLOR") {
    sendResponse({color: currentColor})
  }
})

Step 6: Development and Testing

To develop your extension with hot reloading, run:

npm run dev

This will start Plasmo's development server, allowing you to see changes in real-time.

To test your extension:

1. Open Chrome and go to chrome://extensions

2. Enable "Developer mode"

3. Click "Load unpacked"

4. Navigate to your project's build folder, then select the chrome-mv3-dev folder inside it

Your color-shifting extension should now appear in Chrome's toolbar.

Lessons Learned and Tips

1. Start Simple: Begin with basic functionality and build up gradually.

2. Use React Hooks: Leverage hooks like useState and useEffect for state management and side effects.

3. Leverage Chrome APIs: Familiarize yourself with Chrome's extension APIs.

4. Debug Effectively: Use Chrome's developer tools, especially the "Inspect views" option for your extension.

5. Consider Performance: Keep your extension lightweight and efficient.

Conclusion

Building a Chrome extension with React and Plasmo opens up new possibilities for developers. Whether you're creating a simple utility or a complex tool, this approach provides a solid foundation.

As you build, always keep your end-users in mind. The best extensions solve real problems and provide value. Happy coding, and may your extensions enhance the browsing experience for users worldwide!

If you found this guide helpful, consider sharing it with fellow developers. For more advanced topics, check out the official Plasmo and Chrome Extension documentation.

You're not alone. These days, our online lives are busier than ever. And with so much content to sift through, it's a real challenge to keep things streamlined and productive.

That's where browser plugins come in. These tools can make a world of difference, helping you browse faster, stay organized, and generally get more done.

In this article, I'll share some of my favorite must-have browser plugins. Whether you're a Chrome, Firefox, or Edge fan, you'll find plenty of useful options to level up your web experience.

Boost Your Productivity with These Essential Plug-ins

1. uBlock Origin - The Ultimate Ad Blocker

Look, ads are a necessary evil on the internet. But that doesn't mean you have to put up with the constant bombardment of pop-ups, video ads, and other intrusive nonsense.

uBlock Origin is hands down the best ad blocker out there. It's lightweight, lightning-fast, and incredibly effective at blocking all kinds of unwanted content. Say goodbye to frustrating ad overload and hello to a clean, distraction-free browsing experience.

2. Grammarly - Your Personal Writing Assistant

Whether you're dashing off emails, posting on social media, or working on a big project, good grammar and clear writing are essential. But let's be real - we all make mistakes sometimes.

That's where Grammarly comes in. This smart little plug-in watches your back, flagging errors and offering suggestions to help you communicate more effectively. It's like having a personal editor on call 24/7.

3. LastPass - Secure Password Management Made Easy

In our increasingly digital world, juggling multiple passwords is a major headache. LastPass takes the pain out of password management, storing all your login credentials securely in one convenient place.

With LastPass, you can generate strong, unique passwords for all your accounts and access them with just a single master password. It's a game-changer for anyone who's tired of constantly resetting forgotten passwords.

4. Honey - Effortless Coupon-Finding

Who doesn't love a good deal? Honey is a must-have plug-in for savvy online shoppers. With just a click, it scours the internet for valid coupon codes and automatically applies the best ones at checkout.

No more scouring the web for promo codes or missing out on potential savings. Honey does all the hard work for you, helping you squeeze the most value out of every online purchase.

5. Notion Web Clipper - Organize Your Online Research

If you're like me, you're constantly stumbling upon fascinating articles, helpful how-to guides, and other web content you want to save for later. But without a reliable system, it's easy for all those bookmarks and notes to get lost in the shuffle.

That's why I love the Notion Web Clipper. With a single click, you can instantly save web pages, screenshots, and more directly to your Notion workspace. It's a game-changer for keeping your online research organized and at your fingertips.

Bonus Plug-ins to Consider

Those are my top five must-have browser plug-ins, but the options don't end there. Here are a few other handy tools worth checking out:

• Momentum - Turns your new tab page into a personal dashboard with to-do lists, weather updates, and motivational quotes.

• Dark Reader - Automatically applies a sleek dark mode to any website, reducing eye strain.

• Octotree - Adds a sidebar that makes navigating GitHub repos a breeze.

• Imagus - Lets you preview images, videos, and other content by simply hovering over links.

• Markup Hero - Allows you to annotate, highlight, and edit web pages and screenshots.

FAQs

What are the benefits of using browser plug-ins? Browser plug-ins can help you:

• Boost productivity and efficiency by automating tasks

• Enhance security and protect your online privacy

• Simplify content organization and research

• Save money through features like coupon finders

• Personalize and optimize your browsing experience

Do browser plug-ins slow down my computer? A well-designed, lightweight plug-in shouldn't significantly impact your computer's performance. In fact, many plug-ins can actually speed things up by blocking ads, managing passwords, and reducing distractions. Just be cautious of installing too many plug-ins, as that could potentially cause issues.

Are browser plug-ins safe to use? When it comes to browser plug-ins, safety is always a top concern. The best approach is to stick with reputable, well-reviewed options from trusted developers. Avoid sketchy, unknown plug-ins that could pose security risks. Also, be sure to keep your plug-ins updated to ensure you're protected against the latest threats.

Can I use the same plug-ins across different browsers? The short answer is: it depends. Many popular plug-ins, like the ones I mentioned, are available for multiple browsers (Chrome, Firefox, Edge, etc.). However, some plug-ins are browser-specific. Before installing a plug-in, make sure it's compatible with the browser you're using.

Freemium: The Trial Run

• Provide a basic version at no cost

• Offer premium features for a fee

• Consider various pricing plans

Example: Grammarly offers free basic grammar checks and paid advanced writing suggestions.

Subscription: Ongoing Value

• Provides steady income

• Encourages continual updates

• Often more appealing than one-time large payments

Example: LastPass uses this model, offering basic features for free and advanced security options for subscribers.

Mellowtel: Innovative Resource Sharing

• Users opt-in to share unused internet bandwidth

• AI companies use the shared network for model training

• You earn based on bandwidth usage

• Non-intrusive and privacy-focused

Example: Mellowtel is pioneering this approach for extensions with a large, active user base.

In-App Purchases: Customized Experience

• Flexible for different user needs

• Caters to varying budgets

• Can increase overall revenue

Example: Evernote Web Clipper offers premium clipping features as in-app purchases.

Ads and Sponsorships: Finding the Right Balance

• Choose relevant advertisements

• Seek out compatible brand partnerships

• Avoid overwhelming users with too many ads

Example: Wikiwand displays unobtrusive ads on its redesigned Wikipedia pages.

Advanced Monetization Techniques

Affiliate Marketing: Mutually Beneficial Recommendations

• Include links to relevant products

• Earn commissions on resulting sales

• Works well if your extension aids purchasing decisions

Example: Rakuten (formerly Ebates) extension earns through affiliate commissions when users make purchases.

Selling to Businesses: The Bigger Picture

• Businesses may want to acquire or license your extension

• Can result in significant financial gains

• Might open doors to new opportunities

Example: Boomerang for Gmail was acquired by Baydin, expanding its reach and capabilities.

Premium Support: Enhanced Assistance

• Offer tiered support levels

• Charge for priority assistance or additional features

• Appeals to users who need more comprehensive support

Example: Ghostery offers premium support and configuration services for its privacy-focused extension.

Common Challenges and Solutions

When monetizing your Chrome extension, you may encounter some challenges. Here are common issues and how to address them:

Users reluctant to pay for previously free features

Solutions:

• Clearly demonstrate the value of premium offerings

• Provide a trial period for premium features

Disruptive ads

Solutions:

• Ensure ads are relevant and unobtrusive

• Prioritize user experience alongside monetization

Compliance with Chrome Web Store guidelines

Solutions:

• Stay informed about Chrome Web Store policies

• Consider approved monetization methods like Mellowtel

Competing with free alternatives

Solutions:

• Highlight unique features of your extension

• Ensure a superior user experience

FAQs

What's a realistic income expectation from a Chrome extension?

It varies widely. Some developers earn modest amounts, while others generate substantial income. Your niche, user base, and monetization approach all play a role.

With Mellowtel, an extension that has 1000 active users can expect $50 monthly.

Will monetization negatively impact my user base?

Not if done thoughtfully. Be open about changes, ensure value, and avoid excessive monetization. Users often understand fair compensation for valuable tools.

Is Mellowtel secure for users?

Yes, it prioritizes user safety. It's opt-in, transparent, and doesn't access personal information. It simply utilizes spare bandwidth.

Can I combine different monetization methods?

Absolutely. Many successful extensions use multiple strategies. Just ensure it remains clear and straightforward for users.

Useful Links

• Mellowtel Official Website

• About Mellowtel

• Mellowtel GitHub Repository

Remember, the key to successfully monetizing your Chrome extension is to provide value to your users while finding a balance between generating revenue and maintaining a positive user experience. Whether you choose traditional methods or innovative approaches like Mellowtel, always prioritize your users' needs and preferences.

1. You're Anonymous

We assign you a random identifier that doesn't connect to your real identity. This ensures your privacy while using our service.

2. We Collect Almost Nothing

We're like minimalists - we only keep what we absolutely need. Here's what we do collect:

• A random ID number

• Whether you're participating or not

• How much internet you're sharing

• Your IP address

Why We Need Your IP Address

An IP address is like your home's street address, but for the internet. We need to know this to make our service work, just like a delivery person needs your address to bring you a package.

Here's why it's okay:

1. It's Necessary: Without your IP address, we couldn't route internet traffic through your connection. It's essential for the basic function of our service.

2. It's Not Personal: An IP address doesn't tell us who you are, your name, or any other personal details.

3. It's Protected: We treat your IP address with the same care as all your other data. We don't sell it or share it with others.

4. It's Temporary: IP addresses can change, especially if you restart your router or your internet provider assigns you a new one.

5. It's Like a Postal Code: It gives a general idea of your location (like a city), but not your exact address.

Think of it this way: We're like a friendly neighbor who borrows your garden hose. We need to know which house to go to (your IP), but we don't need or want to know anything else about you.

3. We Follow the Rules

There are laws about how companies should handle your data (like GDPR). We follow these rules, which means we're committed to protecting your rights and keeping your information safe.

4. Nothing to Hide

Our code is open-source. It's like we're cooking in a kitchen with glass walls - anyone can look in and see what we're doing. This openness helps build trust because there are no secrets about how we handle your data.

5. Super-Safe Browsing

When we use your shared internet, it's like using a secret passage. We use an "incognito" mode, so no one can see where the internet traffic has been. No history, no cookies, no breadcrumbs left behind.

6. Rigorous Partner Vetting

We take extra steps to ensure that only trustworthy companies can use our service:

1. Thorough Screening: Every company goes through a comprehensive vetting process before being allowed to use Mellowtel. This includes a personal call with our team to understand the company's intentions and use cases.

2. Trusted Partners: Most companies using Mellowtel are Y Combinator startups, adding an extra layer of credibility and accountability.

3. Continuous Monitoring: We log and monitor all URLs being accessed through our service. This allows us to keep a vigilant eye on how companies are using the shared bandwidth.

4. Proactive Filtering: We're implementing a sophisticated filter endpoint with a blacklist of URLs we don't want to send. Any requests to these URLs are simply ignored, adding an extra layer of protection.

5. Developer Empowerment: In the future, developers will have the ability to add to this blacklist, giving them control over which URLs they don't want sent to their users.

7. Commitment to Ethical Operations

We've built Mellowtel on a foundation of trust and ethical practices:

1. Clear Terms of Service: All companies using Mellowtel must agree to our comprehensive Terms of Service, which explicitly outline acceptable use of the platform.

2. Trust-Based Relationships: We foster close working relationships with our partners, ensuring alignment with our values and commitment to user protection.

3. Proactive Measures: Our focus is on prevention and responsible use through careful partner selection, ongoing monitoring, and automated protections.

4. Continuous Improvement: Our team is constantly enhancing our security measures and ethical safeguards, staying ahead of potential threats to protect users and maintain service integrity.

5. Legal Preparedness: While we've built our service on trust and have never had to use it, we maintain the ability to take legal action against any severe violations as an additional deterrent against misuse.

8. Proven Track Record

In the six months since launch, we've maintained a perfect record with zero instances of abuse. This achievement validates our rigorous vetting process and ongoing monitoring. Given our careful partner selection and robust safeguards, we don't anticipate any abuse occurring in the future. Our commitment to security and ethical operations continues to be the cornerstone of our service.

Want to Learn More?

If you're interested in digging deeper into our privacy and security practices, here are some helpful links:

1. Our Official Website - Get the latest information straight from the source.

2. Our Privacy Policy - For a detailed explanation of how we handle your data.

3. Our GitHub Repository - See our open-source code for yourself.

4. Our Documentation - Learn more about how Mellowtel works.

5. Privacy Concepts at Mellowtel - A deeper dive into our privacy approach.