Google Chrome - freeCodeCamp.org

How to Develop Chrome Extensions using Plasmo [Full Handbook]

Preston Mayieka — Mon, 11 May 2026 20:11:25 +0000

Chrome extensions are lightweight tools that enhance and personalize your browsing experience, whether that's managing passwords, translating pages, or adding entirely new features to websites you use every day.

Millions of developers have published extensions to the Chrome Web Store, and building one is more approachable than you might think.

In this handbook you'll go from zero to a published Chrome extension using TypeScript, React, and Plasmo, a modern framework that handles the repetitive setup and configuration so you can focus on writing features instead of boilerplate.

Along the way you'll touch the real Chrome extension APIs that power production extensions: querying tabs, creating tab groups, and passing messages between different parts of an extension.

By the end you'll have working code, a mental model of how extensions are structured, and everything you need to publish your own ideas to the Chrome Web Store.

What is Plasmo?
What You Will Build
What You Will Learn
Prerequisites
Project Setup
Understanding the Background Script
Building the Popup UI
Testing Your Extension
Next Steps and Extension Ideas
Deploying to Chrome Web Store

What is Plasmo?

Plasmo is an open-source framework for building browser extensions. Think of it as the equivalent of Create React App or Next.js, but for Chrome extensions.

Without Plasmo, building a Chrome extension requires manually writing a manifest.json file, wiring up build tooling, and configuring TypeScript and React yourself. Plasmo handles all of that.

A single command scaffolds a working project with TypeScript and React already configured. It reads your package.json and generates the manifest.json Chrome requires, so you never edit it directly.

Moreover, changes to your source files automatically rebuild and reload the extension in Chrome during development, and full type safety including types for Chrome's own APIs is available out of the box.

Plasmo doesn't hide the Chrome extension concepts from you. You still use chrome.tabs, chrome.runtime, and the rest of the Chrome APIs directly. It just removes the tedious scaffolding so you can start building immediately.

What You Will Build

In this tutorial, you'll build a Tab Grouper Chrome extension from scratch.

This extension automatically organizes your browser tabs by grouping them based on their website domain.

Example Use Case

Imagine you have 20 tabs open: 5 from GitHub, 4 from YouTube, 3 from Stack Overflow, and 8 from other websites.

With one click, the Tab Grouper extension will automatically create colored groups for each website, making it straightforward to find and manage your tabs.

What You Will Learn

By completing this tutorial, you'll get hands-on experience in three areas.

First, Chrome Extension Basics: how extensions work under the hood, the anatomy of an extension (manifest, background scripts, popups), and how to load and test extensions in Chrome during development.

Second, Chrome APIs: specifically chrome.tabs for managing browser tabs, chrome.tabGroups for creating and customizing tab groups, and chrome.runtime for passing messages between different parts of your extension.

Third, Modern Web Development tooling: TypeScript for type-safe JavaScript, React for building the popup UI, and the Plasmo framework that ties it all together.

Prerequisites

You don't need to be an expert in any of these, but you'll have the smoothest experience if you're comfortable with basic JavaScript or TypeScript and have a general understanding of HTML and CSS.

Some familiarity with React is helpful but not required. The pop-up component we'll build is simple enough to follow even if you're new to it.

On the software side, you'll need Node.js version 18 or higher (download here), Google Chrome, a code editor (VS Code is recommended), and pnpm as your package manager.

Verify Your Setup

Open your terminal and run these commands to confirm everything is installed:

node --version
# Should output v18.0.0 or higher

npm --version
# Should output 9.0.0 or higher

Getting Help

If you get stuck, review the complete code in the repository, consult the Chrome Extension documentation, or ask for help in the community forums.

Ready to Begin?

In the next section, you'll set up your development environment and create your first Chrome extension project.

Let's get started!

Project Setup

In this section, you'll use Plasmo to scaffold your Chrome extension project, then customize it for the Tab Grouper.

Rather than creating files manually, you'll let Plasmo generate a starter project with all required configuration, then explore what was created before customizing it for our needs.

Step 1: Install pnpm (Recommended)

Plasmo officially recommends pnpm for faster installs and better disk space usage. Check if you already have it:

pnpm --version

If you see a version number, skip to Step 2.

If you get "command not found", install it with:

npm install -g pnpm

Step 2: Create Your Extension Project

Run this command to create a new Plasmo project:

pnpm create plasmo tab-grouper

You'll see:

🟣 Creating a new Plasmo extension
📁 Project name: tab-grouper
? Extension description: (Give your extension a nice description)
? Author name: (Your Name)

Plasmo will then scaffold the project and install dependencies automatically. You might be prompted to enter a description and author name.

Fill these in however you like.

Step 3: Navigate to Your Project

cd tab-grouper

Step 4: Explore What Was Created

List the files that Plasmo generated:

ls -la

You should see something like this:

tab-grouper/
├── .git/                 # Git repository (already initialized!)
├── .github/              # GitHub Actions workflows
├── assets/
│   └── icon.png          # Default Plasmo icon 
├── node_modules/         # Dependencies (already installed!)
├── package.json          # Project configuration
├── popup.tsx             # Default popup 
├── .prettierrc.cjs       # Code formatting rules
├── .gitignore            # Git ignore rules
├── README.md             # Default readme
└── tsconfig.json         # TypeScript configuration

The key files to know about:

assets/icon.png: The extension icon required by Chrome.
package.json: Lists dependencies and scripts, and is where you configure the extension manifest.
popup.tsx: The UI that appears when you click the extension icon.
tsconfig.json: Contains TypeScript settings that are already correctly configured.

Step 5: Test the Default Extension

Make sure everything works before you customize it.

You can do this by starting the development server:

pnpm dev

You should see output like this:

🟣 Plasmo v0.90.5
🔴 The Browser Extension Framework
🔵 INFO   | Starting the extension development server...
🔵 INFO   | Building for target: chrome-mv3
🔵 INFO   | Loaded environment variables from: []
🟢 DONE   | Extension re-packaged in 1842ms! 🚀

View Extension:
📦 build/chrome-mv3-dev

Your extension is ready. Keep this terminal window open.

Plasmo watches for file changes and rebuilds automatically.

Step 6: Load the Extension in Chrome

Now load the extension into Chrome to test it:

Open Google Chrome
Go to chrome://extensions/
Enable Developer mode (toggle in top-right)
Click "Load unpacked"
Navigate to your project folder
Select the build/chrome-mv3-dev folder
Click "Select Folder"

Your extension should now appear in the list.

Click the puzzle piece icon in Chrome's toolbar
Find "tab-grouper" and pin it
Click the extension icon

You will see a default popup that says "Welcome to Plasmo!"

The extension is working. Now you can customize it.

Step 8: Update Extension Information

Open package.json in your editor. This file stores metadata about your project. name, version, description, dependencies, and scripts for building and running your extension.

Find these lines near the top:

{
  "name": "tab-grouper",
  "displayName": "tab-grouper",
  "version": "0.0.0",
  "description": "A basic Plasmo extension.",

Change them to:

{
  "name": "tab-grouper",
  "displayName": "Tab Grouper",
  "version": "1.0.0",
  "description": "A simple Chrome extension - group tabs by domain",

Save the file.

Step 9: Add Required Permissions (Critical!)

This is a critical step. Without permissions, your extension will fail with errors like:

TypeError: Cannot read properties of undefined (reading 'query')

Chrome extensions must declare which browser APIs they intend to use. In package.json, find the "manifest" section.

It looks like this:

"manifest": {
  "host_permissions": [
    "https://*/*"
  ]
}

Replace it with:

"manifest": {
  "permissions": [
    "tabs",
    "tabGroups"
  ]
}

Save the file. The tabs permission allows you to read tab information (required for chrome.tabs.query()), and tabGroups allows you to create and manage tab groups (required for chrome.tabGroups.update()).

Finding the right permissions for your own extensions:

The Chrome Extension Permissions Reference lists every available permission and what it unlocks.

Each API's documentation page also lists which permissions it requires, for example, the chrome.tabs API page specifies the "tabs" permission.

If you're using Plasmo, the Manifest Configuration docs explain how to add permissions through package.json.

As a general rule: if you're getting undefined errors when calling a Chrome API, a missing permission is the first thing to check.

Step 10: Verify Hot Reload Works

Plasmo automatically reloads your extension when you save changes.

Check the terminal where pnpm dev is running. After saving package.json you should see something like:

🔄 Reloading extension...
✅ Ready in 0.8s

Your project is now ready: a working extension loaded in Chrome, a development server running with hot reload, and the required permissions in place.

Leave the dev server running and the extension loaded as you work through the next sections. Your changes will reload automatically.

Section Summary

In this section you installed pnpm, scaffolded a new extension with pnpm create plasmo, explored the generated project structure, started the development server, loaded the extension in Chrome, and updated the extension metadata and permissions.

Next: You'll create the background script that handles the tab grouping logic.

Understanding the Background Script

The background script is the heart of your extension. It runs persistently behind the scenes and contains the core logic.

In this case, the code that groups your tabs by domain.

What is a Background Script?

A background script runs continuously even when the popup is closed.

It can listen to browser events like tabs opening, closing, or updating, perform tasks that don't require direct user interaction, and communicate with other parts of the extension by passing messages.

Think of it as the server-side of your extension. The popup is just a UI that talks to it.

Step 1: Create background.ts

Plasmo's scaffolding didn't create a background script by default, so you'll create this file from scratch. Create a new file called background.ts in your project root (the same level as popup.tsx):

export {}

// Background script - runs in the background and handles tab grouping logic

console.log("Tab Grouper background script loaded!")

// Listen for messages from the popup
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.type === "GROUP_TABS") {
    groupTabsByDomain()
    sendResponse({ success: true })
  }
  return true
})

The export {} at the top is required by Plasmo to treat this file as a module. Without it you may get errors about conflicting global variable declarations.

The console.log will help you verify the script loaded correctly (you'll see it in the extension's DevTools console). chrome.runtime.onMessage sets up a listener so the background script can receive instructions from the popup.

When it receives a "GROUP_TABS" message, it calls the grouping function.

You can read more about this messaging pattern in the Chrome Extensions documentation.

Step 2: Implement Tab Grouping Logic

Now add the main grouping function below the message listener:

async function groupTabsByDomain() {
  try {
    // Step 1: Get all tabs in the current window
    const tabs = await chrome.tabs.query({ currentWindow: true })

    // Step 2: Create a Map to organize tabs by domain
    const domainGroups = new Map()

    // Step 3: Loop through each tab and group by domain
    tabs.forEach(tab => {
      // Skip tabs without URLs
      if (!tab.url) return

      // Extract the domain from the URL
      const domain = getDomainFromUrl(tab.url)

      // Skip invalid domains (like chrome:// pages)
      if (!domain) return

      // Add tab to the appropriate domain group
      if (!domainGroups.has(domain)) {
        domainGroups.set(domain, [])
      }
      domainGroups.get(domain)!.push(tab)
    })

    // Step 4: Create tab groups for each domain (only if 2+ tabs)
    for (const [domain, domainTabs] of domainGroups) {
      // Skip domains with only 1 tab
      if (domainTabs.length < 2) continue

      // Get all tab IDs
      const tabIds = domainTabs
        .map(t => t.id!)
        .filter(id => id !== undefined)

      if (tabIds.length === 0) continue

      // Create the tab group
      const groupId = await chrome.tabs.group({ tabIds })

      // Customize the group with a title and color
      await chrome.tabGroups.update(groupId, {
        title: domain,
        color: getColorForDomain(domain) // Randomized Tab Group colors.
      })
    }

    console.log(`Successfully grouped ${domainGroups.size} domains`)
  } catch (error) {
    console.error("Error grouping tabs:", error)
  }
}

The function starts by querying all tabs in the current window, then iterates over them to build a Map keyed by domain name.

Once every tab has been sorted into a domain bucket, it loops through the map and calls chrome.tabs.group() for any domain that has two or more tabs, then immediately customizes the resulting group with a title and color.

Domains with only a single tab are skipped. There's no point grouping a lone tab.

Step 3: Extract Domain Helper

Add a helper function to pull the hostname out of a URL:

function getDomainFromUrl(url: string): string | null {
  try {
    const urlObj = new URL(url)

    // Skip Chrome internal pages (chrome://, chrome-extension://)
    if (urlObj.protocol === "chrome:" || urlObj.protocol === "chrome-extension:") {
      return null
    }

    // Remove "www." prefix and return the hostname
    return urlObj.hostname.replace(/^www\./, "")
  } catch {
    // Return null if URL is invalid
    return null
  }
}

new URL(url) gives us a structured object to work with rather than string-parsing the URL manually.

The protocol check filters out Chrome's internal pages like chrome://extensions and chrome://settings, which extensions can't access.

The .replace(/^www\./, "") ensures that www.github.com and github.com are treated as the same domain rather than two separate groups.

The whole thing is wrapped in a try-catch so malformed URLs simply return null and get skipped.

In practice: https://www.github.com/user/repo becomes github.com, https://youtube.com/watch?v=123 becomes youtube.com, and chrome://extensions returns null.

Step 4: Color Assignment Helper

Add a function to deterministically assign a color to each domain:

function getColorForDomain(domain: string): chrome.tabGroups.ColorEnum {
  // Available colors in Chrome
  const colors: chrome.tabGroups.ColorEnum[] = [
    "blue", "red", "yellow", "green", "pink", "purple", "cyan", "orange"
  ]

  // Create a simple hash from the domain name
  let hash = 0
  for (let i = 0; i < domain.length; i++) {
    hash = domain.charCodeAt(i) + ((hash << 5) - hash)
  }

  // Return a color based on the hash
  return colors[Math.abs(hash) % colors.length]
}

Chrome supports eight colors for tab groups. Rather than assigning them randomly (which would change every time you group), this function hashes the domain name to a number and uses the modulo operator to pick a consistent index into the color array.

The result is that github.com always gets the same color across sessions, while different domains are likely to get different colors.

Complete background.ts File

Your complete background.ts should look like this:

export {}

console.log("Tab Grouper background script loaded!")

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.type === "GROUP_TABS") {
    groupTabsByDomain()
    sendResponse({ success: true })
  }
  return true
})

async function groupTabsByDomain() {
  try {
    const tabs = await chrome.tabs.query({ currentWindow: true })
    const domainGroups = new Map()

    tabs.forEach(tab => {
      if (!tab.url) return
      const domain = getDomainFromUrl(tab.url)
      if (!domain) return

      if (!domainGroups.has(domain)) {
        domainGroups.set(domain, [])
      }
      domainGroups.get(domain)!.push(tab)
    })

    for (const [domain, domainTabs] of domainGroups) {
      if (domainTabs.length < 2) continue

      const tabIds = domainTabs
        .map(t => t.id!)
        .filter(id => id !== undefined)

      if (tabIds.length === 0) continue

      const groupId = await chrome.tabs.group({ tabIds })

      await chrome.tabGroups.update(groupId, {
        title: domain,
        color: getColorForDomain(domain)
      })
    }

    console.log(`Successfully grouped ${domainGroups.size} domains`)
  } catch (error) {
    console.error("Error grouping tabs:", error)
  }
}

function getDomainFromUrl(url: string): string | null {
  try {
    const urlObj = new URL(url)
    if (urlObj.protocol === "chrome:" || urlObj.protocol === "chrome-extension:") {
      return null
    }
    return urlObj.hostname.replace(/^www\./, "")
  } catch {
    return null
  }
}

function getColorForDomain(domain: string): chrome.tabGroups.ColorEnum {
  const colors: chrome.tabGroups.ColorEnum[] = [
    "blue", "red", "yellow", "green", "pink", "purple", "cyan", "orange"
  ]

  let hash = 0
  for (let i = 0; i < domain.length; i++) {
    hash = domain.charCodeAt(i) + ((hash << 5) - hash)
  }

  return colors[Math.abs(hash) % colors.length]
}

Testing the Background Script

If your development server isn't already running from the previous section, start it:

pnpm dev

To verify the background script loaded correctly, go to chrome://extensions, find "Tab Grouper Tutorial", and click the "service worker" link.

A DevTools console will open and you should see "Tab Grouper background script loaded!" confirming everything is wired up.

The popup is the small window that appears when a user clicks your extension icon in the Chrome toolbar.

It can display information, provide buttons for actions, and show settings.

In this section you'll build a React-based popup that shows live tab statistics and triggers the grouping logic in the background script.

Step 1: Replace popup.tsx

When you ran pnpm create plasmo, a default popup.tsx was created that just displays a welcome message.

Open that file and replace all of its contents with this starting skeleton:

import { useState, useEffect } from "react"

function IndexPopup() {
  const [tabCount, setTabCount] = useState(0)
  const [groupCount, setGroupCount] = useState(0)
  const [isGrouping, setIsGrouping] = useState(false)

  return (
    
      Tab Grouper
      
    
  )
}

export default IndexPopup

Save the file and the extension will automatically reload.

The three state variables track the number of open tabs, the number of existing groups, and whether a grouping operation is currently in progress.

That last one lets us disable the button and show a loading state so users can't trigger multiple groupings at once.

Step 2: Load Statistics

Now add the logic to load tab and group counts when the popup opens. Add this inside the IndexPopup function, right after the state declarations:

// Load tab statistics when popup opens
useEffect(() => {
  loadStats()
}, [])

async function loadStats() {
  const tabs = await chrome.tabs.query({ currentWindow: true })
  const groups = await chrome.tabGroups.query({
    windowId: chrome.windows.WINDOW_ID_CURRENT
  })

  setTabCount(tabs.length)
  setGroupCount(groups.length)
}

The useEffect with an empty dependency array [] runs once when the component first mounts. In other words, every time the popup opens.

It calls loadStats, which queries Chrome for the current window's tabs and groups, then updates the state variables with the counts.

Step 3: Trigger Tab Grouping

Add the handler that sends a message to the background script when the button is clicked:

async function handleGroupTabs() {
  setIsGrouping(true)

  // Send message to background script
  await chrome.runtime.sendMessage({ type: "GROUP_TABS" })

  // Refresh statistics
  await loadStats()
  setIsGrouping(false)
}

chrome.runtime.sendMessage delivers the { type: "GROUP_TABS" } message to the listener we set up in background.ts.

After the background script finishes, we reload the statistics so the group count updates immediately, then re-enable the button.

Step 4: Build the UI

Replace the placeholder return statement with this complete, styled version:

return (
  
    {/* Header */}
    
      
        🗂️ Tab Grouper
      
      
        Organize your tabs by domain
      
    

    {/* Statistics */}
    
      
        
          {tabCount}
        
        
          Open Tabs
        
      
      
        
          {groupCount}
        
        
          Tab Groups
        
      
    

    {/* Group Button */}
    

    {/* Footer */}
    
      💡 Tip: This will group all tabs in this window by their website domain.
    
  
)

The UI has four parts: a header with the extension title and a short description, a statistics box showing the live tab and group counts side by side, the main action button (which grays out and changes text to "Grouping..." while work is in progress), and a tip box at the bottom.

This tutorial uses inline styles for simplicity. In a production extension, you'd likely reach for CSS modules, Tailwind, or styled-components instead.

Complete popup.tsx File

Your complete popup.tsx should look like this:

import { useState, useEffect } from "react"

function IndexPopup() {
  const [tabCount, setTabCount] = useState(0)
  const [groupCount, setGroupCount] = useState(0)
  const [isGrouping, setIsGrouping] = useState(false)

  useEffect(() => {
    loadStats()
  }, [])

  async function loadStats() {
    const tabs = await chrome.tabs.query({ currentWindow: true })
    const groups = await chrome.tabGroups.query({
      windowId: chrome.windows.WINDOW_ID_CURRENT
    })

    setTabCount(tabs.length)
    setGroupCount(groups.length)
  }

  async function handleGroupTabs() {
    setIsGrouping(true)
    await chrome.runtime.sendMessage({ type: "GROUP_TABS" })
    await loadStats()
    setIsGrouping(false)
  }

  return (
    
      
        
          🗂️ Tab Grouper
        
        
          Organize your tabs by domain
        
      

      
        
          
            {tabCount}
          
          
            Open Tabs
          
        
        
          
            {groupCount}
          
          
            Tab Groups
          
        
      

      

      
        💡 Tip: This will group all tabs in this window by their website domain.
      
    
  )
}

export default IndexPopup

Testing Your Extension

Now that you have both the background script and popup UI built, it's time to verify that everything works together in Chrome.

Step 1: Make Sure the Dev Server is Running

If pnpm dev isn't already running from an earlier step, start it now:

pnpm run dev # or pnpm dev

Plasmo will build the extension into build/chrome-mv3-dev and watch for changes.

Step 2: Load the Extension in Chrome

If you haven't already loaded the extension, go to chrome://extensions/, enable Developer mode, click Load unpacked, and select the build/chrome-mv3-dev folder.

Once loaded you should see the extension listed with the name "Tab Grouper Tutorial", version "1.0.0", and status Enabled.

Step 3: Pin the Extension

Click the puzzle piece icon in the Chrome toolbar, find "Tab Grouper Tutorial", and click the pin icon to keep it visible.

The extension icon will now appear directly in your toolbar.

Step 4: Test the Extension

Test 1: Open Multiple Tabs

Open several tabs across a few domains so there's something to group:

https://github.com/topics, https://github.com/trending, https://github.com/explore
https://www.youtube.com/ and https://www.youtube.com/trending
https://stackoverflow.com/questions and https://stackoverflow.com/tags

Have at least 7 tabs open.

Test 2: Group the Tabs

Click the Tab Grouper extension icon. The popup should appear showing your open tab count (7 or more) and group count (probably 0).

Click "Group Tabs by Domain" and watch your tabs get organized into colored groups.

Test 3: Verify Groups

After clicking the button, GitHub tabs should be grouped together with a label like "github.com" and a consistent color, and YouTube tabs similarly.

Click the extension icon again, the group count should now show 2, while the tab count stays the same.

Step 5: Debug the Extension

If something doesn't work, Chrome's DevTools are your best friend.

To inspect the background script, go to chrome://extensions/, find your extension, and click the "service worker" link.

A DevTools console opens where you can look for the "Tab Grouper background script loaded!" message and any error output in red.

To inspect the popup, right-click the extension icon and select "Inspect popup". This opens DevTools for the popup specifically — check the Console tab for any errors there.

If nothing happens when you click the button, check the background script console for errors, confirm you have at least 2 tabs from the same domain, and verify the message is being sent (look in the popup console for any sendMessage failures).

If tabs aren't grouping, double-check that you added the tabs and tabGroups permissions to package.json and reloaded the extension after saving.

If you see "Extension cannot access chrome://...", that's expected behavior — extensions can't interact with Chrome's internal pages and the code skips them intentionally.

Step 6: Hot Reloading

One of the benefits of Plasmo is hot reloading, which allows you to update code in a running app instantly without needing to restart it manually.

Open popup.tsx, change the header emoji from 🗂️ to 📁, and save.

The extension reloads automatically.

Click the icon and you'll see the updated emoji immediately.

Hot reloading is advantageous because it speeds up development by letting you see changes in real time.

You can change the emoji back afterward if you'd like to keep the extension consistent with the rest of the tutorial examples and screenshots.

Step 7: Test Edge Cases

It's worth testing a few scenarios to make sure the extension handles them gracefully.

If you close all tabs except one and click "Group Tabs", nothing should happen. The extension requires at least two tabs from the same domain to form a group. Opening chrome://extensions and chrome://settings and then grouping should also do nothing, since those pages are filtered out.

If you have one tab from reddit.com and one from freecodecamp.org, each domain appearing only once, no groups should be created.

Step 8: Production Build

When you're ready to share your extension, run:

pnpm run build

This creates a production-optimized version in build/chrome-mv3-prod, minified JavaScript, no development-only code, and smaller file size.

To verify the production build, go to chrome://extensions/, remove the development version, click "Load unpacked", and select build/chrome-mv3-prod. Test thoroughly before publishing.

The extension is lightweight (under 100 KB), only runs when you click the button, and has no background processes when idle.

Next Steps and Extension Ideas

Congratulations on building your first Chrome extension!

You now have a working tool that groups tabs by domain with one click, shows live statistics about open tabs and groups, and is built on modern tooling: TypeScript, React, and Plasmo following Chrome extension best practices.

The extension is a solid foundation. Here are some ideas for where to take it next.

1. Auto-Grouping

Instead of requiring a button click, you could automatically group new tabs as they're opened. You'd listen for the chrome.tabs.onCreated event in background.ts and trigger groupTabsByDomain() with a short delay to let the page URL load:

// In background.ts
chrome.tabs.onCreated.addListener(async (tab) => {
  // Wait a bit for the URL to load
  setTimeout(() => {
    groupTabsByDomain()
  }, 2000)
})

This gets into event listeners, asynchronous timing, and thinking carefully about when to fire — a good next step for understanding how background scripts can be more proactive.

2. Keyboard Shortcuts

You can trigger grouping without even opening the popup by adding a keyboard shortcut. Add a commands section to the manifest in package.json:

"manifest": {
  "commands": {
    "group-tabs": {
      "suggested_key": {
        "default": "Ctrl+Shift+G",
        "mac": "Command+Shift+G"
      },
      "description": "Group tabs by domain"
    }
  }
}

Then listen for the command in background.ts:

chrome.commands.onCommand.addListener((command) => {
  if (command === "group-tabs") {
    groupTabsByDomain()
  }
})

3. Category-Based Grouping

Rather than grouping by raw domain, you could group by category — putting GitHub, Stack Overflow, and npm together in a "Dev" group, for instance:

const categories = {
  social: ["facebook.com", "twitter.com", "instagram.com"],
  shopping: ["amazon.com", "ebay.com", "etsy.com"],
  dev: ["github.com", "stackoverflow.com", "npmjs.com"]
}

function getCategoryForDomain(domain: string): string {
  for (const [category, domains] of Object.entries(categories)) {
    if (domains.includes(domain)) {
      return category
    }
  }
  return "other"
}

4. Options Page

Plasmo makes it trivial to add a settings page by creating an options.tsx file.

This is where you'd let users toggle auto-grouping, choose between domain and category mode, or configure their own category mappings.

It's a good introduction to the Chrome Storage API and persisting user preferences.

function OptionsPage() {
  return (
    
      Tab Grouper Settings
      
        
        Enable auto-grouping
      
      
        
        Group by category instead of domain
      
    
  )
}

5. Tab Age Tracking

You could track when each tab was created and surface tabs that have been sitting untouched for a week or more, a nice way to encourage tab hygiene:

// Track tab creation times
const tabCreationTimes = new Map()

chrome.tabs.onCreated.addListener((tab) => {
  if (tab.id) {
    tabCreationTimes.set(tab.id, Date.now())
  }
})

// Find old tabs (e.g., > 7 days)
function getOldTabs(): chrome.tabs.Tab[] {
  const sevenDaysAgo = Date.now() - (7 * 24 * 60 * 60 * 1000)
  return tabs.filter(tab => {
    const created = tabCreationTimes.get(tab.id!)
    return created && created < sevenDaysAgo
  })
}

6. Search Within Groups

A search bar in the popup would let users filter their open tabs by title, making it easy to jump to a specific tab:

const [searchQuery, setSearchQuery] = useState("")

const filteredTabs = tabs.filter(tab =>
  tab.title?.toLowerCase().includes(searchQuery.toLowerCase())
)

7. Export/Import Groups

You could let users save their current tab groups to a JSON file and restore them later. Useful for preserving a working session across restarts:

// Export
async function exportGroups() {
  const groups = await chrome.tabGroups.query({})
  const data = JSON.stringify(groups)
  const blob = new Blob([data], { type: 'application/json' })
  const url = URL.createObjectURL(blob)
  chrome.downloads.download({ url, filename: 'tab-groups.json' })
}

// Import
async function importGroups(file: File) {
  const text = await file.text()
  const groups = JSON.parse(text)
  // Restore groups...
}

8. Group Statistics Dashboard

An expanded popup could show browsing analytics, total tabs opened today, most-visited domain, and more:

function Statistics() {
  const [stats, setStats] = useState({
    totalTabs: 0,
    totalGroups: 0,
    mostUsedDomain: "",
    tabsToday: 0
  })

  return (
    
      Browsing Statistics
      Total tabs opened today: {stats.tabsToday}
      Most visited domain: {stats.mostUsedDomain}
    
  )
}

Learning Resources

If you want to go deeper, the official Chrome Extension docs are excellent and cover every API in detail.

The Chrome Extension Samples repository on GitHub has dozens of real examples to learn from. For Plasmo-specific questions, the Plasmo documentation and example repository are the best starting points, and the community is active on Plasmo Discord.

The React docs and TypeScript docs are worth bookmarking as reference material, and the React TypeScript Cheatsheet is handy when you're unsure about specific type patterns.

For community support, Stack Overflow's chrome-extension tag is well-monitored, and r/chrome_extensions on Reddit is a friendly place to ask questions.

Deploying to Chrome Web Store

Now that you've built and tested your extension, here's how to publish it and share it with the world.

What You'll Need

Before you can publish, you'll need a completed and tested extension, a Google account, a $5 USD one-time developer registration fee, and some store assets such as icons, screenshots, and a written description.

The $5 fee is a one-time charge (not annual) that Google uses to verify developer identity and reduce spam. It covers unlimited extension submissions and is processed immediately via Google Payments.

Step 1: Create a Production Build

Build your extension for production if you didn't do this before:

cd tab-grouper-tutorial
npm run build

This creates an optimized version in build/chrome-mv3-prod/. The production build minifies JavaScript and CSS for a smaller file size, strips out development-only code and console logs, and optimizes assets for faster loading.

Before uploading, load build/chrome-mv3-prod/ as an unpacked extension and test all features one more time to confirm nothing broke in the build process.

Step 2: Create Store Assets

Extension Icons

You'll need icons in three sizes: 128×128 pixels for the main store listing (required), 48×48 for the extension management page, and 16×16 for use as a favicon.

All should be PNG files with transparent backgrounds. Keep the design simple and recognizable at small sizes. Avoid putting text in the 16×16 version.

Figma is free and works well for this, as does Canva or GIMP.

Screenshots

Upload between 1 and 5 screenshots at either 1280×800 or 640×400 pixels (PNG or JPEG).

Show the extension in actual use rather than mockups. The popup with statistics, tabs being grouped, and the before/after state all work well.

Adding annotations to highlight key features helps users understand what they're looking at.

Promotional Images (Optional)

If you want to be featured on the store, you can also upload a small tile (440×280), large tile (920×680), and marquee image (1400×560). These are only needed if Google chooses to promote your extension.

Demo Video (Optional)

A short YouTube video (30–60 seconds) showing the extension in action can significantly increase conversions. Link to it in your store listing.

Step 3: Write Your Store Listing

Extension Name (45 character limit): Be clear and descriptive. "Tab Grouper - Organize Tabs by Domain" works well. Avoid keyword stuffing or excessive punctuation.

Summary (132 character limit): This is what appears in search results. Lead with what the extension does: "Automatically organize browser tabs by domain. One-click grouping keeps your workspace clean and productive."

Detailed Description (16,000 character limit): Start with what the extension does, list features clearly, explain how to use it, address privacy, and provide contact information. Here's a template you can adapt:

## What is Tab Grouper?

Tab Grouper automatically organizes your browser tabs by grouping them based on their website domain. No more hunting through dozens of tabs - everything is neatly organized.

## Features

- ✅ One-click tab grouping
- ✅ Automatic color-coding by domain
- ✅ Real-time statistics
- ✅ Works with all websites
- ✅ Lightweight and fast

## How to Use

1. Click the Tab Grouper icon in your toolbar
2. Click "Group Tabs by Domain"
3. Your tabs are instantly organized

## Why You Need This

If you regularly have numerous tabs open, finding the right one can waste valuable time. Tab Grouper solves this by automatically organizing tabs into colored groups, making navigation quick and straightforward.

## Privacy

This extension does not collect any personal data. It only accesses tab information locally to perform grouping. No data is sent to external servers.

## Support

Found a bug or have a suggestion? Contact us at support@example.com

Category: Choose Productivity for Tab Grouper. You can add additional languages later if you want to localize the listing.

Step 4: Register as a Chrome Web Store Developer

Go to the Chrome Web Store Developer Dashboard, sign in with your Google account, accept the Developer Agreement, and pay the $5 registration fee. Your account is activated within minutes.

Step 5: Submit Your Extension

In the Developer Dashboard, click "New Item" and upload your extension. You can either manually zip the build/chrome-mv3-prod/ folder or use Plasmo's package command:

# Option 1: Manual zip
cd build/chrome-mv3-prod
zip -r ../../tab-grouper.zip .

# Option 2: Use Plasmo package command
cd tab-grouper-tutorial
npm run package

Once uploaded, fill in all four sections of the store listing form: Product details (name, summary, description, category, language), Graphic assets (icon and screenshots), Privacy practices (see below), and Distribution (visibility, regions, pricing).

Single Purpose Description

Chrome requires each extension to have a single, clearly stated purpose. For Tab Grouper: "This extension organizes browser tabs by grouping them based on their domain name, helping users manage multiple open tabs efficiently."

Permission Justification

You'll need to justify each permission you declared. For tabs: "The tabs permission is required to read tab URLs and titles in order to group them by domain." For tabGroups: "The tabGroups permission is required to create and manage tab groups for organization."

Privacy Policy

Even though Tab Grouper doesn't collect personal data, Chrome may require a privacy policy. Host one on GitHub Pages or your personal website and link to it. Here's a minimal template:

# Privacy Policy for Tab Grouper

## Data Collection
Tab Grouper does not collect, store, or transmit any personal data.

## Permissions
- **tabs**: Used only to read tab URLs for grouping purposes
- **tabGroups**: Used only to create and manage tab groups

## Local Processing
All tab grouping happens locally in your browser. No data is sent to external servers.

## Contact
For questions: your-email@example.com

Last updated: [Current Date]

Step 6: Submit for Review

Before clicking submit, run through this checklist:

Production build tested thoroughly
All store assets uploaded (icon + at least one screenshot)
Description is clear and accurate
Permissions are justified
Privacy policy is linked
Extension name is descriptive

When you're ready, click "Submit for review", confirm your details, and click "Publish". Your extension enters the review queue.

Step 7: The Review Process

Google typically reviews extensions within 1–3 business days for straightforward submissions, though complex extensions or first submissions can take up to a week. Reviewers check that the extension works as described, that permissions are justified, that there's no malicious code, and that the listing complies with Chrome Web Store policies.

You can track your status in the Developer Dashboard: Pending review → In review → Approved or Rejected. If rejected, Google will email you specific reasons and instructions for resubmitting.

The most common rejection reasons are insufficient permission justification, misleading descriptions, missing privacy policies, and requesting more permissions than necessary. Address each point in the rejection email, update your submission, and resubmit.

Step 8: After Approval

Once approved, your extension is live at https://chrome.google.com/webstore/detail/[extension-id]. Share the link on social media, write a blog post, post to Reddit (r/chrome, r/chrome_extensions), or submit to Product Hunt to drive installs.

The Developer Dashboard gives you ongoing analytics — total and weekly installs, reviews and ratings, impressions, and uninstall counts. Check it regularly, especially in the first week. Respond to reviews (particularly negative ones), thank users for positive feedback, and use reported bugs to prioritize future updates.

Step 9: Publishing Updates

When you fix bugs or add features, bump the version number in package.json (following Semantic Versioning — patch for bug fixes, minor for new features, major for breaking changes), run npm run build, and upload the new package through the Developer Dashboard's Package tab. Updates are typically reviewed faster than initial submissions, often within 24 hours.

Step 10: Managing Your Extension Long-Term

The Chrome Web Store provides built-in analytics, but you can also add Google Analytics if you need more detail.

For user support, an email address in the description or a GitHub issues page both work well. As you add features, keep the description updated and maintain a changelog so users know what changed and when. Responding to user questions and reviews goes a long way toward building a loyal base of users who'll recommend the extension to others.

Troubleshooting Common Publishing Issues

"Package is invalid" on upload: Make sure you zipped the contents of build/chrome-mv3-prod/ rather than the folder itself, and verify the generated manifest.json is valid JSON.

Rejection: Permissions Not Justified: In the "Permission justification" field, be specific about which feature requires each permission and what would break without it.

Rejection: Single Purpose Unclear: Rewrite the single purpose description to focus on one main function, stated plainly.

Low installation rate after launch: Poor screenshots are often the culprit — they're the first thing most users look at. Make sure they clearly show the extension solving a real problem. Building even a small number of early reviews also makes a big difference to new visitors.

Alternative Distribution

The Chrome Web Store is the right choice for most public extensions. If you're building an internal tool, an Unlisted extension (accessible only via direct link, not searchable) is a good option.

If you need to restrict it to users in a specific Google Workspace organization, a Private extension is available for that. Self-hosting and sideloading is possible but requires users to enable Developer Mode manually, so it's only practical for very technical audiences.

Congratulations!

You've gone from an empty folder to a live Chrome extension on the Web Store. Along the way you learned how extensions are structured, how background scripts and popups communicate, how Chrome's tab APIs work, and how to navigate the publishing process end to end.

More than any specific API or configuration detail, the most important thing you've built is a mental model for how extensions work and that transfers directly to any extension idea you want to build next.

Keep building, keep learning, and keep shipping!

How to Use Chrome DevTools – Simple Strategies for Smarter Web Development

Ophy Boamah — Thu, 15 Feb 2024 16:12:02 +0000

As a web developer, there are many tools out there – in addition to your code editor – that can make you more efficient.

It doesn't matter if you're just starting out or have been coding for years. Knowing how to effectively use Developer Tools (DevTools for short) can significantly boost your development process. You can edit pages on the fly, quickly spot issues, and deeply understand your site's performance.

All major browsers have their own DevTools that let you examine the code of a webpage, evaluate its metrics, and run some tests alongside. This article will discuss Chrome's DevTools, as it's the industry standard.

What is Chrome DevTools?

Chrome DevTools is a set of tools that are essential for diagnosing and solving web development challenges, directly within the Google Chrome browser.

It gives you direct access to a website's inner workings - to inspect HTML and CSS, debug JavaScript, analyze performance, and see the immediate impact of your code, all in realtime.

This direct access to a website's inner workings is crucial for diagnosing issues quickly and efficiently, ensuring your web applications are both performant and bug-free.

A grid of elements, console, performance and network panels screenshots

How to Open Chrome DevTools

To open DevTools in your Chrome browser, you can either:

Right-click on any webpage and select inspect from the list of options.
Use the shortcut (command + option + I on Mac or control + shift + I on Windows).
Click the three dot icon next to your profile picture on your Chrome browser, choose 'More Tools' and 'Developer Tools' from the second option box.

It usually opens in a split screen interface, either below your current webpage or beside it. Once open, its features line up as tabs at the top of the DevTools window. These tabs include: Elements, Console, Source, Network, Application, Security, Memory, Performance, Audits.

Use Cmd or Ctrl + Shift + C to open the Elements panel
Use Cmd or Ctrl + Shift + J to open the Console panel
Use Cmd or Ctrl + ] to move forward to the next panel
Use Cmd or Ctrl + [ to move back to the previous panel

Key Chrome DevTools Features

DevTools is packed with features essential for web developers to streamline various aspects of their workflow. Let's look at a few of them in some detail now.

Elements Panel

This panel is used for inspecting and modifying the HTML and CSS of a webpage in real-time, which is great for debugging layout issues or experimenting with new styles before applying them in your actual code. You also get to see how the DOM (Document Object Model) is structured.

Imagine fine-tuning your website's footer appearance (background color, font size) directly in your browser and seeing the results instantly.

With DevTools open, click on the Elements tab to access it.

A screenshot of Chrome DevTools' Elements panel

Console Panel

This panel serves as your interactive playground for JavaScript within the browser. Whether you're tracking down an elusive bug with a quick console.log() or experimenting with DOM elements, in the Console panel you can test snippets of JavaScript and view any logs or errors in the currently loaded webpage.

To use it, simply open DevTools and select the "Console" tab or use the shortcut (option + command + J on Mac or contrl + shift + J on Windows).

A screenshot of Chrome DevTools' Console panel

Network Panel

This panel gives you an overview of all network activity on your webpage – from tracking every resource that is loaded to how your site communicates with servers.

If you've wondered why your website takes forever to load or why some API requests seem to vanish into thin air, the Network panel is your go-to as it provides insights into the success or failure of API calls.

To access it, open DevTools and navigate to the "Network" tab.

A screenshot of Chrome DevTools' Network panel

Performance Panel

This panel is used for capturing and analyzing a website's performance metrics. It shows all the activities happening when interacting with a page.

When your web app starts to crawl under heavy usage, the Performance panel can pinpoint where the performance bottlenecks lie so that you can resolve these issues, ensuring your app runs smoothly.

With DevTools open, click on the "Performance" tab to use it.

A screenshot of Chrome DevTools' Performance panel

The above are only a handful of the panels available, but they're by far the most popular and must-knows. Using them properly will make your development processes more intuitive and rewarding.

Practical DevTools Use Cases

In the following interactive examples, I intentionally created the mini project in Codepen with issues to simulate real-world debugging scenarios using Chrome DevTools.

I figured it'd be a great way to highlight the practical uses of certain DevTools panels and features in identifying bugs and troubleshooting right in the browser.

Prerequisites

Chrome browser (Click this link to download)
A basic understanding of HTML, CSS, and JavaScript
Codepen

See the Pen Modal Window by Ophy Boamah (@ophyboamah) on CodePen.

How to Debug HTML and CSS with the Elements Panel

Our mini project contains a modal that, upon clicking, should display a modal window with some important information. But there's a bug preventing this from happening.

This situation sets the stage for a practical demonstration of how you can use the Elements Panel to troubleshoot and resolve styling and structural issues.


  <button class="show-modal">Click me to learn a secret 🤫button>

  <div class="modal hidden">
    <button class="close-modal">×button>
    <h1>Hey Ophy here 👋🏾h1>
    <p>
      I lead Women Who Code Frontend, a global remote community of 3,000+ women frontend devs and enthusiasts. Find us on beacons.ai/wwcodefrontend
    p>
  div>
  <div class="overlay hidden">div>

  <script src="script.js">script>

.hidden {
  display: none;
}

.modal {
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  width: 70%;

  background-color: white;
  padding: 6rem;
  border-radius: 5px;
  box-shadow: 0 3rem 5rem rgba(0, 0, 0, 0.3);
  z-index: 10;
}

In our modal's HTML code above, we've added the class name 'modal hidden' which has a corresponding styling with the CSS property of display:none that is set to hide the modal when the page is loaded initially and only display it when the button is clicked.

✅ Step 1 - Initial inspection:

Attempt to trigger the modal by clicking on the 'Click me to learn a secret' button. Since we've set that up not to work, right-click on the area where the modal should appear and choose "Inspect" to open DevTools' Elements Panel.

✅ Step 2 - Diagnose visibility issues:

In the Elements Panel, locate the modal in the DOM to see that the modal is present but not visible. This confirms that the bug is caused within our CSS code display: hidden.

As soon as you click on the modal in the DOM, any corresponding CSS classes will be pulled up within Styles at the bottom section of the Elements panel. You can toggle some properties on and off or type others to see the effects in real-time.

Manually change the class name from modal hidden to modal block to trigger the right properties that'll cause the modal to show.

A screenshot of debugging the modal's HTML, CSS in Elements panel

Now the modal is visible, but it's displayed at the top – which is different from where we'd like it to be (that is, in the center of the page).

To change this, modify the transform property to translate(-50%, -50%) by adding the second -50% and ensure that top: 50%, and left: 50% are correctly set to center the modal on the screen.

✅ Step 4 - Enhance the appearance:

You can go further to refine the modal's appearance by tweaking its background-color, padding, or other stylistic properties directly within the Styles to achieve the desired look and feel.

A GIF fixing the modal in Chrome DevTools' Elements panel

Debug JavaScript with the Sources Panel

I added a bug in the JavaScript code of our modal mini project to prevent it from opening when the button is clicked.

In the real world, this would cause neither the open nor close commands to trigger any action, which would leave users unable to interact with the content and frustrated as a result. Let's troubleshoot and debug this issue in the Sources Panel.

In the code below, the openModal function is set to remove the indicated classes. However, this doesn't work because we deliberately misspelled hidden.

// Introducing a bug: Incorrectly spelling 'hidden' as 'hiddn'
const openModal = function () {
  modal.classList.remove("hiddn"); // Intentional bug
  overlay.classList.remove("hidden");

  // Fetch data from a real API and display in the modal
};

✅ Step 1 - Set up breakpoints:

Open Chrome DevTools and navigate to the Sources Panel. Here, find the JavaScript file that includes the modal functionality (in our example its pen.js).

The openModal function contains the logic for displaying the modal on the screen. This function will include a line where the modal element's class is manipulated to remove a "hidden" class.

Click on the number next to this code line in DevTools. A blue (or sometimes red, depending on the theme) icon appears next to the line number, indicating that a breakpoint has been set. This breakpoint will pause the execution of our JavaScript code as soon as it reaches this line.

A screenshot of setting breakpoints the modal's JS in Sources panel

Breakpoints pause code execution at critical points, allowing you to inspect the current state of variables and understand the flow of execution. This step is crucial for identifying where the code deviates from expected behaviour.

✅ Step 2 - Examine the code execution flow:

With our breakpoint in place, try to open the modal by clicking on its button. Execution of our JavaScript code now pauses at our breakpoint, which enables us to step through the code line by line.

This is an opportunity to observe variables, function calls, look for anomalies such as misnamed functions, incorrect logic, or uncaught exceptions that could explain why the modal isn't working.

In our case it's because we intentionally misspelled the class name hidden as hiddn. Fix that in the code to get the modal working again.

A GIF troubleshooting the modal bug in Chrome DevTools' Elements panel

Optimize Performance with the Network Panel

Here I've added a fetch function that makes an API call to a live endpoint (https://jsonplaceholder.typicode.com/posts/1). This is an excellent opportunity to explore the Network Panel's capabilities in diagnosing and understanding network-related problems.

From the code below, you can see that the openModal function doesn't only open the modal but also makes an API call to the jsonplaceholder endpoint to fetch some data.

const openModal = function () {
  fetch('https://jsonplaceholder.typicode.com/posts/1')
    .then(response => response.json())
    .then(json => document.getElementById('modal-content').innerText = json.title)
    .catch(error => console.error('Error loading the content:', error));
};

✅ Step 1 - Initiate the API call:

On the modal project UI, click on the 'Click me to learn a secret' button. Though the modal does not visibly activate, because of the fetch logic within the openModal function, an API call will be made.

✅ Step 2 - Network Panel Inspection:

Ideally, your Network Panel should be open before clicking the button, but you can also reverse the steps. Detailed insights on your API request such as the request's method, status code, response and the time it took to complete, will be available under headers, preview, response, initiator and timing tabs respectively.

A screenshot overview of API request in Network panel

✅ Step 3 - Simulating Network Conditions:

Use the Network Panel's throttling feature to mimic various network speeds like offline or slow 3G to see how the API request behaves under constrained conditions.

From this you can compare how different network speeds can affect application performance. This will teach you the importance of optimizing data loading strategies to enhance user experience, especially on slower connections.

A GIF observing API requests and responses in Chrome DevTools' Network panel

Conclusion

Bringing Chrome DevTools into your web development routine is not just about fixing bugs. It's about streamlining your workflow, making your sites more accessible, and boosting their performance.

Through our modal window mini-project, we've seen firsthand how DevTools can address a wide array of development challenges, but that’s merely scratching the surface of what it can do.

As you continue to explore its capabilities and familiarize yourself with its features, you'll find it's an invaluable companion on your web development journey – designed to make your development process not just faster, but also more rewarding.

Your Connection is Not Private Error – How to Fix in Chrome

Kolade Chris — Thu, 07 Jul 2022 16:03:17 +0000

If you log on to a website and your browser shows the “Your connection is not private” error, the browser is trying to warn you to stay off the website.

In that case, the browser has run a check on the SSL (secure socket layer) certificate and found a problem with it – the SSL could have expired or might not have been installed at all.

In some cases, the problem could be because of your browser and not the website. So, in this article, I will show you how to fix the “Your connection is not private” error on a Chrome browser.

What We'll Cover

How to Fix the “Your connection is not private” Error on a Chrome Browser
Final Thoughts

How to Fix the “Your connection is not private” Error on a Chrome Browser

Reload the Web Page

The first thing I would advise you do is to reload the page.

Reloading the web page is the old trick everyone tries if there is a problem with that web page.

In addition, there are chances that SSL-related work is going on with the website, so if you wait a while and reload the page, the issue could disappear.

If reloading doesn’t fix the issue for you, proceed to other solutions in this article.

Clear Chrome’s Cache

The SSL data of the website in your Chrome browser cache might have expired. So if you clear the cache, the error may go away.

Follow the steps below to clear your Chrome browser cache:

Step 1: Click the 3 vertical dots on the top-right corner and select Settings:

Step 2: Click the “Privacy and Security” tab on the left sidebar and select “Clear browsing data”:

Step 3: Select Cache and Cookies, then click “Clear data”:

Make Sure your Computer’s Date and Time are Correct

If your computer clock is behind or ahead, your browser will show you a “Your connection is not secure” error.

These days, the error message has become more accurate in Chrome:

In this case, you should set your date and time to the correct one and make it automatic, so nothing readjusts it again:

Disable your Antivirus and VPN

Some Antivirus programs with SSL scanning features can make your browser show the “Your connection is not private” error if they detect any irregularity with the SSL certificate of a website.

In the same vein, a VPN (virtual private network) conceals your IP address and other information. The problem is that the privacy a VPN gives you could have a negative effect on some sites' SSL.

Due to this, you should consider disabling your antivirus and VPN programs, at least temporarily, to see if that fixes the error.

Final Thoughts

Other fixes that might get rid of the “Your connection is not private” error for you include:

Trying to access the web page in incognito mode. In Chrome, you can open an incognito tab by pressing CTRL + SHIFT + N.
Restarting your Router
Restarting your computer
Updating your OS

If all the fixes fail to work, the problem could be from the website. This means there is a problem with the website’s SSL certificate. So, try to contact the site admin.

If you find no admin to contact, you should stay off that website and make sure you don’t share sensitive information with the site.

If you’re a site admin and your users complain about this error, I wrote an article on how you can restore your site’s SSL.

How to Fix Google Chrome Black Screen on Linux OS (Wayland)

Md. Fahim Bin Amin — Wed, 27 Apr 2022 19:33:58 +0000

If you are a Linux user, then you've likely used the GNOME Desktop Environment at least once.

The latest GNOME DE (Desktop Environment) uses Wayland nowadays. And while it's possible to remove Wayland and select Xorg if you want, most users are starting to use Wayland as their daily driver.

And if you still use the Chrome or Chromium browsers, you'll often face the black screen issue during screen sharing.

If you typically use Wayland on your desktop, you'll have these issues while screen sharing, especially in Google Meet.

In this article, I will show you a very simple trick that will help you solve the black screen issue during screen sharing on any kind of Chromium browser including the most popular browser, Google Chrome.

I have used Ubuntu for writing this article, but the same process is applicable to all other Linux OS distros running on Wayland.

The Black Screen Issue

If you're having the black screen issue in Google Meet in a Chromium browser (Chrome, Brave, Vivaldi, etc), it probably looks like this:

Sometimes it might happen because screen sharing in Wayland gets broken or because of other issues. A lot of users also say it happens as developers are trying hard to increase the security level.

The issue of screen sharing might become common for many people in the usual way. A lot of users go back to X11 only for this issue or try the pipewire solution to fix this.

I will show you the solution using the pipewire technology so that you do not need to go back to X11 only for solving this issue. 😊

Go to chrome://flags/#enable-webrtc-pipewire-capturer using the address bar of your browser.

You will get a long list, but we are interested in WebRTC PipeWire Support. You will see that the option is on the Default mode right now.

We need to change it to Enabled.

Simply click the drop down menu, and click Enabled.

Now you will see a prompt on the below right side to relaunch the browser so this can take effect.

Click on Relaunch. It will simply restart your browser.

The issue has been solved! ✌️

Now if you want to share your screen as usual, you can definitely do that.

Whenever you want to share the screen, a prompt will appear and will request you to select the monitor. You have to share the monitor. If you have only one monitor like I do, then you would get one monitor. Simply click on that and click Share.

You will also get to see the preview of the screen sharing.

You may need to select the monitor again in the prompt. Simply select the monitor and click Share as earlier.

From now on, you can share your screen on Google Meet from Wayland.

Conclusion

If this article helps you resolve the black screen issue for your Linux DE, then I've been successful. 😊

Thanks for reading the entire article. If it helps you then you can also check out other articles of mine at freeCodeCamp.

If you want to get in touch with me, then you can do so using Twitter, LinkedIn, and GitHub.

You can also SUBSCRIBE to my YouTube channel (Code With FahimFBA) if you want to learn various kinds of programming languages with a lot of practical examples regularly.

If you want to check out my highlights, then you can do so at my Polywork timeline.

You can also visit my website to learn more about me and what I'm working on.

Thanks a bunch!

dns_probe_finished_nxdomain Error [Solved]

Kolade Chris — Wed, 20 Apr 2022 15:39:02 +0000

If you are a regular Google Chrome user, then you might have encountered the error “dns_probe_finished_nxdomain” before. It is usually accompanied by “This site can’t be reached”.

This error is associated with the Domain Name System (DNS) server and can occur due to misconfiguration in the DNS server, an unresponsive server, or a yet-to-be-propagated DNS of a website.

The “nxdomain” in the error means you’re trying to access a “non-existent domain”.

In other browsers, the “dns_probe_finished_nxdomain” error could present itself in another way. On Microsoft Edge, it could appear as “Hmm…can’t reach this page”, and on Firefox, it usually appears as “Hmm. We’re having trouble finding that site”.

Fixing this error in order to restore your internet connectivity is not an uphill task. And so in this article, I’m going to show you 4 ways to fix it.

What We'll Cover Here

Disable your Antivirus and VPN
Flush, Release,and Renew your DNS Cache
- Flush your Google Chrome Browser Cache)
Restart your Router or Modem
Manually Change your DNS Server
- Change your Google Chrome Browser DNS Server
Conclusion

Fix 1 – Disable Your Antivirus and VPN

Antivirus programs are notorious for interfering with apps and stopping them from working the right way.

VPNs, on the other hand, can block some websites, while some other websites don't work well with them.

If you are getting the “dns_probe_finished_nxdomain” error, consider disabling your Antivirus and turning off your VPN, then check to make sure you can access the internet again.

If you are able to access the internet after disabling your antivirus program and turning off your VPN, then this is the reason you’re getting the error.

If you are on Windows 10, you can disable Windows Security by following the steps below: Step 1: Open the Task Manager by pressing ALT + SHIFT + ESC on your keyboard.

Step 2: Click on the Startup tab.

Step 3: Locate your Antivirus Program in the list, right-click on it, and select "Disable".

Try to access the internet again to see if the error isn't shown anymore. If this fails to fix the error, keep reading and try other fixes in this article.

Fix 2 – Flush, Release, and Renew your DNS Cache

The DNS cache saves the IP addresses of websites you visited in order to speed up load time when you try to visit the same sites.

Flushing, releasing, and renewing the DNS cache can fix the “dns_probe_finished_nxdomain” error because the processes removes invalid IP configurations and outdated information in the DNS cache.

To flush, release, and renew your computer’s DNS on Windows, follow the steps highlighted below: Step 1: Hit the WIN button on your keyboard and search for "cmd". Then select "Run as Administrator" on the right.

Step 2: Enter and execute the following commands one after the other:

ipconfig /flushdns
ipconfig /release
`ipconfig /renew

You should also consider flushing Chrome’s DNS.

To flush Chrome's DNS, all you need to do is type chrome://net-internals/#dns in the address bar and hit ENTER. Then click “Clear host cache”:

After flushing your computer's DNS along with Chrome's, restart your computer and check to see if you don’t get the error anymore.

Fix 3 – Restart your Router or Modem

If you access the internet through a router or modem, restarting it could help you get rid of the “dns_probe_finished_nxdomain” error.

This is because turning off and then turning on a router or modem clears the cache of IP addresses, which could fix the error in the long run.

To restart your router or modem, locate the power button and long-press to turn it off, then long-press again to turn it on.

Fix 4 – Manually Change your DNS Server

If any of the fixes above fail to work for you, you should consider changing your DNS server address as it is one of the most reliable ways to fix the “dns_probe_finished_nxdomain” error.

By default, a DNS server address is provided by your internet service provider, but using this default DNS is not always secure. And it could be the reason you are getting the “dns_probe_finished_nxdomain” error.

You can change your DNS server to one of the free ones provided by the likes of Google and Cloudflare.

The steps below show you how to change your DNS server to Google: Step 1: Right-click on Start and select “Network Connections”:

Step 2: Scroll down and select “Change adapter options”:

Step 3: In the pop-up that appears, right-click on the network you are connected to and select “Properties”:

Step 4: In another pop-up that appears, double-click on “Internet Protocol Version 4 (TCP/IPv4)”:

Step 5: Another pop-up will appear. This time around, select the radio button that says “Use the following DNS server addresses”:

Step 6: Enter 8.8.8.8 for “Preferred DNS server” and 8.8.4.4 for “Alternate DNS server”. This is the free DNS server provided by Google.

Step 7: Click “Ok”, and “Ok” once again.

N.B.: If your computer is configured to use IPv6 instead of IPv4, then in step 4, you should choose “Internet Protocol Version 6 (TCP/IPv6)” instead of “Internet Protocol Version 4 (TCP/IPv4)”. Then enter 2001:4860:4860::8888 for the preferred DNS server and 2001:4860:4860::8844 for the alternative DNS server.

You can also change the DNS server of the Google Chrome browser in particular.

To do this, head over to your chrome browser, type chrome://settings/security in the address bar and hit ENTER.

On the page that appears, scroll down, click on “Custom”, and select “Google (Public DNS)”:

After doing all this, check to see if your internet connection is restored.

Conclusion

As you can see in this article, resolving the “dns_probe_finished_nxdomain” error is not difficult because there are several ways you can fix it. This article discussed 4 of those ways.

If one of the fixes fails to resolve the error for you, then you should check out any of the rest. As for me, I experienced this error not long ago and what fixed it for me was changing my DNS server – Fix 4.

Thank you for reading.

How to Inspect an Element – Chrome Shortcut

Kolade Chris — Fri, 15 Apr 2022 01:40:32 +0000

The Inspect Element feature of the Google Chrome browser is a powerful yet easy-to-use tool.

It’s an important part of Chrome Developer Tools that you can use to check the source code of any website.

But it doesn’t end there. You can take things further by changing the elements and styles that make up the website – that is, the HTML, CSS, and JavaScript code of the website. This is why a lot of developers use the Inspect tool for debugging purposes.

If you’re a beginner in web development, the Inspect tool is a useful feature you can take advantage of to learn about how websites are built, the fonts, icons, and plugins used, and even who made the website.

The good news is that you don’t need to be the developer of the website to use this powerful tool as it is available to users as well. You don’t even need to be a developer at all to use it.

In this article, you will learn how to open the Chrome Developer Tools so you can get access to the Inspect feature, and how to inspect specific elements on a website. I will also show you how you can manipulate the elements of a website by changing the texts and styles.

I'll be using freeCodeCamp.org to show you how things work with the Inspect tool.

How to Open the Chrome Developer Tools

To open the Chrome Developer Tools, click the vertical dots at the top-right corner of your browser:

Then hover over “More tools” and select “Developer tools”:

You will then get access to the tabs of the developer tools such as Elements (the HTML and CSS that makes up the website), Console with which you can run JavaScript, Sources, and many more.

You can drag these tabs around and place them wherever you want:

How Do I Open Inspect Element in Chrome with the Keyboard?

You can open the Inspect element tool on Linux by pressing CTRL + SHIFT + C or F12 on Windows.

If you are on Mac, press Command + SHIFT + C.

How to Inspect Specific Elements on a Website

To inspect any element you see on a website, whether it's text, a button, a video, or an image, right-click on the element and click “Inspect”.

In this case, I will right-click on the “Learn to code – for free” text on the freeCodeCamp.org landing page.

The source code will open and the element will be highlighted for you, like this:

You can see the text is an h1 element.

How to Manipulate the Elements of a Website with the Inspect Tool

You can change the text contents of a website with the Inspect tool.

As an example, I’m going to change the “Build projects” text on the freeCodeCamp.org landing page to “Build real-world projects”.

To do this, right-click on the element you would like to change and click “Inspect”. In this case, it's the “Build projects” text:

Double-click on the “Build projects” text:

Type in “Build real-world projects” and hit ENTER:

You can see the text has been changed to “Build real-world projects”.

How to Change Styles with the Inspect Tool

Let’s change the background of the “Get started (it’s free)” button to my favorite color – #2ecc71.

Right-click on the button and select “Inspect”:

Double-click on the value of the “background-image” property on the right, that is linear-gradient(#fecc4c,#ffac33).

Change the colors to #2ecc71,#2ecc72 and hit ENTER: You can see the background of the button has changed.

We have now made 2 changes on the freeCodeCamp.org landing page – we changed the “Build projects” text to “Build real-world projects” and we changed the background of the “Get Started (it’s free)” button:

Are the changes you make with the Inspect tool permanent?

No. Any change you make with the Inspect tool is not permanent. Once you reload the page, the changes are gone.

This is because the website has been deployed to a server. So when you make another request to that server by reloading the page, the content from the server is loaded by your browser.

So don't worry - you playing around in this way with the Inspect tool won't change a website permanently. It just helps you learn more about it and practice your coding :)

Conclusion

This article showed you how to get access to the Developer tools of Google Chrome, how to use its Inspect feature to view the source code of a website, and how to change the elements and styles of a website with it.

If you just started learning to code in HTML, CSS, and JavaScript, the Inspect feature of Chrome Dev tools is a powerful tool you can use to view the source code of any website so that you can learn about how they are built.

Thank you for reading.

How to Use CSS Overview in Chrome Dev Tools

Cess — Mon, 07 Feb 2022 14:52:34 +0000

If you're a web developer, you probably appreciate a well-designed and attractive website.

And you might see a color scheme or font on a specific website that you want to incorporate into your blog or web app. But you'll need a browser extension to see the website's color scheme and other CSS features.

The CSS overview feature in Chrome Dev Tools lets you see these CSS properties.

In this post, we'll go over how to use the CSS overview feature in Chrome Developer Tools. We'll also learn how to use CSS overview to get the colors and other CSS properties you want to use in creating a web page.

Let's get started. 💃

What is the CSS overview panel?

The CSS overview panel is one of the newest features of Chrome Developer Tools. It serves as a preview tool that allows you to see the different CSS properties used in creating a web page.

It displays CSS properties such as:

The colors used on a web page.
The line height of each element used on a web page.
The font-size of each element used on a web page
The font-families of each element on a web page.
The font weights of each element used on a web page.

What are Chrome Developer Tools?

Chrome Developer Tools is also known as Chrome Dev Tools.

Chrome Dev Tools are a suite of web developer tools that come pre-installed in the Chrome browser.

Check out this article to know more about Chrome developer tools.

Here are some of the advantages of using Chrome Dev Tools:

It enables you to create better websites in a shorter amount of time.
It enables you to make changes to your code, test it, and inspect it.
Chrome Dev Tools give developers more control over their web applications and browsers.
It enables you to assess the general performance of a website.

How to Access Chrome Developer Tools in Your Browser

You can access Chrome Developer tools in three different ways:

Chrome’s Menu:
Click on the three vertical dots located on the top right corner of your chrome browser. It will bring up a drop-down menu with more tools at the bottom of the screen.
Click on more tools.
Click on developer tools.

Inspect:
Right-click on the chrome browser.
Click on inspect.

Shortcuts:
For Windows - CTRL + Shift + I OR F12.
For Mac - CMD + Shift + I.

Once you click on the shortcut keys, the developer tools open.

When you press CTRL + Shift + I, it displays the last panel you opened by default. It shows the element, console, network, or performance panel, among other things.

CTRL + Shift + C opens the element panel first by default.

How to Use CSS Overview in Chrome Dev Tools

The steps below will walk you through how to use the CSS overview feature to get the CSS properties used on a web page.

Step 1 - Open Chrome Dev tools

We've already covered the various methods for accessing Chrome developer tools. You should be familiar with them now.

As a quick reminder, you can open Chrome dev tools by pressing Ctrl + Shift + I on Windows and Linux. Use CMD + Option + I on Mac.

Step 2 - Click on More tools

Click on the three vertical dots located on the top-right of Chrome dev tools.

Select "More Tools" from the drop-down menu.

You'll discover a variety of options when you click "More Tools." From the various options, select the CSS overview feature.

Step 3 - Click on Capture Overview

When you click on CSS Overview, you'll see a list of its functions.

Functions such as:

Capture an overview of your page's CSS.
Identify potential CSS improvements.
Locate the affected elements in the element panel.

Click on the Capture Overview button.

A menu with five sections appears after clicking the Capture Overview button.

The five sections are:

Overview summary
Colors
Font info
Unused declarations
Media queries

Let's go over each of the five sections one by one to see how they work.

CSS Overview Summary

The Overview summary contains a list of the CSS elements used in building the web page.

The Overview summary displays a summary of the CSS on your website, such as:

The number of elements used on the web page.
The different types of selectors used in creating the web page.
The number of inline style elements used on the web page.
The number of external stylesheets used on the web page.

An Illustration of the overview summary.

The example above shows the various CSS elements used to build the web page.

Colors

The color panel displays all the colors used in creating the web page. It has a palette of colors for the background, text, fill, and borders. It also highlights low-contrast texts issues on the web page.

An illustration of the color panel.

The image above shows you the different colors used in creating the web page.

The beauty of the Color panel is that each color is clickable. If you click on a particular color in the Color panel, a list of elements that use that color appears. When you click on each element, it takes you to the element panel for inspection.

I clicked on color #49FCD4 in the image above, and it brought up a list of elements with that color.

You can also hover over an element in the lists of elements displayed. When you move your cursor over the element, it highlights the element on the web page.

When I hover my mouse over the header element in the image above, it highlights the header on the web page.

Just a quick note: hovering refers to moving your cursor over anything. It means to place a cursor over text, an image, or other objects on the screen without clicking on them.

Font Info

The font info panel displays the typefaces used in the development of the website. It shows you the font-size, line-height, font-weight, and font families used in creating the website. If you click on the occurrences, you will see a list of the affected elements.

An illustration of the font info panel.

The above image shows you the different typefaces used in creating the web page.

Unused Declarations

You can find CSS styles that do not affect the web page by using unused declarations.

An illustration of the unused declaration panel.

The image above shows the number of unused declarations on the web page. The vertical alignment applied to the element that isn't inline or a table cell will not affect the page.

You can also click on the occurrences to see a list of elements affected, like the font info and color panel.

Media Queries

The media query panel displays a list of all the media queries used in creating the web page. You will be able to examine the various widths and screen resolutions used in creating the web page.

An illustration of the media query panel.

The above example displays the number of media queries used in creating the web page. It lists the screen resolutions used in order of occurrence, from highest to lowest. If you click on the occurrences, you will see a list of the affected elements.

Conclusion

When it comes to evaluating CSS attributes on a web page, the CSS overview tool comes in handy. It allows front-end developers and designers to inspect the CSS properties on a web page.

Thank you for reading 💙. If you would like to chat or have any questions, please feel free to contact me anytime on Twitter: @cessss_ and linkedIn: Success.

Also, follow my blog to read some of my other stuff @cesscode.

Happy coding! 💙

How to Turn On Dark Mode on Google – Chrome Black Theme Tutorial

Kolade Chris — Fri, 08 Oct 2021 19:10:46 +0000

These days, lots of developers like to use dark mode. And it's no surprise, as activating dark mode reduces eye strain and leads to better eye health. It also helps both machines and humans perform better overall.

In this article, I will show you how to turn on the dark theme on your Google Chrome app, on both Windows machines and Android phones. We'll also learn how to turn on dark theme for Google with some Chrome extensions.

It doesn’t end there – you will also be able to run your Windows apps in dark mode after reading this article.

How to Turn on Dark Mode for Google on Windows 10

Step 1: To turn on dark theme for Google on your Windows 10 PC, click on Start, or press the WIN (Windows) key.

Step 2: Click on Settings

Step 3: Click on Personalization

Step 4: Select Colors from the menu tab

Step 5: And finally, under “Choose your default app mode”, choose dark.

The settings app itself will change to dark mode, meaning all the apps on your machine are now running on dark mode.

To confirm that Google is now running on dark mode, open up the Chrome app and search anything on Google:

Other parts of Chrome will run on dark theme, too:

How to Turn on Dark Mode for Google With a Chrome Extension

To turn on dark theme for Google with a Chrome extension, download and activate the Just Black chrome extension from the Chrome Web Store.

The extension was built by the Chrome team, so it's safe to install and use.

How to Turn on Dark Mode for Google on Android Phones

Step 1: To turn on dark mode for Google on an Android phone, open your chrome app and click on the three dots in the top right corner.

Step 2: Tap settings

Step 3: Select theme

Step 4: Finally, choose dark

Your Chrome mobile app should be in dark mode, including the Google search page:

Conclusion

In this article, you learned how to turn on dark mode for Google on Windows machines and Android phones.

You also learned how to do the same with a chrome extension.

There are several other extensions that give you dark mode on Chrome, so feel free to check them out on the Chrome Web Store.

Thank you for reading, and have a nice time.

How to Clear Search History – Delete All Browsing Data in Chrome

Dionysia Lemonaki — Fri, 23 Jul 2021 21:42:07 +0000

Your browsing history can come in very handy when you want to look up something that you have already viewed on the internet.

Maybe you read an interesting article online and want to reference it again, but forgot to bookmark it. Well, you can have a look at your Chrome history and you'll find it there.

How Does Browser History Work?

While surfing the web, Chrome (like all other modern browsers) keeps track of your digital footsteps. This means it collects data on your preferences, searches, and history.

When using Google Search in Chrome, your search queries are saved. Next time you look for something similar, Google makes relavent suggestions.

It does this to enhance your browser experience by speeding up page load time, for intuitive web navigation, and to autofill forms (which again saves time).

Or Chrome can use all your information and the links you clicked on to target you with personalised Google Ads.

Browser History Privacy Concerns

This can raise privacy and security concerns. You may not want to leave traces of your previous searches, visited websites, and all web activity that includes sensitive data on your computer.

It's always a good idea to clean up of your search history and browsing data from time to time. This includes caches and cookies, too, for an optimal browsing experience and safer surfing.

This artcile shows you how to delete all of your Chrome search history and browsing data for whatever operating system you're using.

With just a few clicks and some easy steps you'll get rid of the internet history kept in your Chrome account.

It's worth mentioning that if you have set up your Chrome account to be in sync with all other devices you have (whether that's a laptop, phone, tablet etc) you will also have to delete your history on them.

Howe to Delete Your Chrome History

In a few quick steps, you can delete everything all at once.

First things first, open your Chrome browser application.

On the top right hand corner there are three tiny dots next to your profile picture:

After clicking on them, a menu appears.

From that menu, select "History" and then "History" again.

You can also use a keyboard shortcut:

For Mac users : Command Y
For Windows users : Ctrl H

This opens up a new tab with all your browsing history, with the most recent at the very top.

Next, to delete all of it, on the left hand side select "Clear browsing data".

You are then brought to another menu in the center of the screen, which looks something like:

There are two tabs " Basic" and "Advanced".

In the Basic tab, at the top of the pop up, you have the option to select a time and date frame. You can clear data from the last hour, 24 hours, 7 days, 4 weeks, or from all time.

To delete the entire browser data history, make sure all three checkboxes are checked – "Browsing History", "Cookies and other site data", and "Cached images and files".

Click on the time range dropdown menu and select "All time".

Lastly, select "Clear data".

All history, cookies, and cache are now gone from your machine.

Chrome now won't show the pages you've previously visited, as all traces are gone. It will also not autocomplete URLs in the address bar or keywords during searches.

To go that extra step and get a bit more specific, you could select the "Advanced Tab" and then check/uncheck according to your needs. If you want a clean slate and to start afresh, make sure to check all boxes.

Again, select the time frame you want. If you want to get rid of everything, choose "All time" and then "Clear Data".

Chrome now will not show files you downloaded (it won't delete the actual downloaded files – they live on your computer's hard drive). It will not have the data to automatically fill in forms. It will not have saved passwords and login information. And it won't know what your language settings are or your location information or the different site settings.

What are cookies and caches?

Chrome stores cookies from visited websited and cached files.

Cookies recognize who you are.

For example, when you look up the temperature for today, cookies know to show the city where you live. Other cookies are responsible for the personalized ads that keep popping up. If you keep searching for shoes, you'll get ads from different online shoe stores.

They also hold onto login credentials, preferences, and sensitive auto-fill form information (like name, address, and phone number).

Caching stores images and graphics from websites you've visited again and again by downloading a local copy. This makes for faster access and the browser loads super fast.

Once the cache has been deleted, pages may take a bit longer to load because the browser has to pull images from the web instead of locally. But this can fix page loading errors and is the first step to fixing browser issues.

How to Avoid Constantly Deleting Your History

You don't need to repeat the process mentioned above all the time – you can limit what data Google can collect from you.

You can disable your search and location history in Google settings. This is particularly useful when you're sharing a computer with others, if you're using a public computer, or if you're taking extra care of your privacy.

1) Click on your User account icon with your profile picture at the top right corner in Chrome. 2) Select "Manage your Google Account". This takes you to https://myaccount.google.com/

3) On the left side, choose "Data and personalisation". This page lets you know what information Google is gathering. 4) In the "Activity and controls" click "Web and App activity" which you can toggle off by clicking the blue slider button. You'll be prompted with a confirmation. In the "Activity and controls" panel you can also control if your location is saved.

How to Use Incognito Mode to Securely Browse the Web

Chrome has a safer and more private option for browsing the web. Incognito is a private mode offered by many modern browsers.

Using Incognito mode, Chrome will not store the sites you have visited in your browsing history and your activity is kept private.

When the window is closed, all browsing history activity, searches, cookies and caching from that session are automatically deleted and not saved. The browser won't know what you've been up to.

However, keep in mind that if you log into a site using login information, the site will recognise you and record your activity.

To open a new window in Incognito, go to the three little dots next to your profile picture in Chrome, click on them, and from the dropdown menu select "New Incognito Window":

And ta-da! Chrome opens up a new window that does not track your browsing activity or load information from previous searches or forms you've filled.

Conclusion

In this article, we learned how to delete all of our brorwsing data from Chrome in a few simple steps. I also shared a couple suggestions to make your browsing activities a bit more secure.

Thanks for reading!

What is about:blank? Chrome Blank Homepage Guide

Dionysia Lemonaki — Wed, 21 Jul 2021 21:02:54 +0000

You might have heard of about:blank but don't understand what it is. Or you've seen it appear when you first load up a fresh new session in the Chrome browser – just an empty white page with about:blank showing in your address bar.

You might even see it when you click a link to download something from the web or when clicking on a link to take you to another webpage.

Have you wondered why about:blank appears and what is it exactly? Let's find out.

Should you worry about about:blank?

So is about:blank just a blank page as the name suggests, or is there more to it than meets the eye?

Does it have any benefits, or is it a useful feature? Should you keep it and use it, or should you get rid off it?

When about:blank shows up, it can be confusing for people and makes them worry. They see a blank page and think it's a virus – some dangerous malware – or that it means something has happened to their browser. They don't understand what it is and what is causing it.

This article answers the above questions. It covers why this page shows up in your browser URL field, why you may actually want to keep it, and if not, how to make it disappear and stop it from showing up.

Why does your browser show about:blank?

If you are seeing an empty page with about:blank as the address, you are indeed viewing an empty page that is built into Chrome. In fact, this is common in most modern web browsers like Mozilla Firefox, Apple Safari, Microsoft Edge, Internet Explorer and others.

This page is loaded by default when the browser has nothing else to display.

When a user hasn't specified a specific webpage to load when they first open up the browser, the browser itself does not know what to show So it chooses to show a special blank page that is built into it.

The browser always has to display something after all, even if that is blank.

Is about:blank a virus?

In and of itself about:blank is not malware. It is as innocent as it can be.

In general, you don't need to worry about it.

In some very rare cases about:blank can be a symptom of a virus.

It can indicate that your computer has detected something dangerous and is blocking viruses/malware when it comes across with a bad link/URL.

It can also appear after you have removed malware. After such a process, the browser won't know what action to perform.

In any case, if you are concerned that your computer has a virus, it is a good idea to investigate that and perform a scan with an antimalware program of your choice.

What is about:blank?

As mentioned earlier, this is just a page built into your browser.

It's not a webpage, that is a page coming from the Internet. It's nothing more than a blank screen appearing in your browser.

Specifically, it's part of the "about" URI Scheme which is impelemented by a variety of different browsers.

The "about" URI Scheme is part of a naming convention that tells the browser to show its internal, built-in pages.

Besides about:blank, there is a long list of Chrome URLs, including some of the below:

about:downloads to view Chrome's download list
about:bookmarks to view your saved bookmarks
about:accessibility shows accessibility information for each tab opened in the browser
about:apps to view the apps that come with the Chrome browser and those installed by the user

If you type about:about you'll be able to go through them all:

Benefits of about:blank

This page is a favourite homepage choice for many users. It ensures their browser loads up with a white empty page when it opens for the first time.

It makes for a blazingly fast homepage as it starts the browser really quikcly. The browser doesn't lose time by making a request for a page across the Internet and waiting for the response.

So, this can help reduce your data usage if your internet connection is slow and you have limited badwidth. You are able to save computer and network resources.

A default blank page can also help you stay focused and not get distracted. You can just focus on searching for and visiting the page you want to view.

How to set about:blank as your homepage

If you want to make about:blank your default start page, you'll need to configure your browser's settings.

Go to your settings menu and select "Settings":

(you could have even typed about:settings!)

In the search bar type "start-up".
Select "Open a specific page or set of pages".
Click "Add a new page" and type "about:blank"
Finally,press "Add"

When you open a new tab you'll see an empty page.

How to stop about:blank from showing

This page is not something you just "get rid off" as it is a feature built into your browser and it'll always be there, under the hood.

If your browser always opens up with a blank page and you don't like it, you can stop that from happening. It's probably set as a default home page and you need to change your settings.

Following the steps mentioned in the previous section, delete "about:blank" from the "Open a specific page or set of pages" option and select your favorite web page. Or you can select "Open the New Tab page" instead.

Conclusion

Overall, about:blank is a safe feature and shouldn't raise any concerns.

And if you don't like seeing it when you open your browser, you can just change it in your settings.

What are Bookmarklets? How to Use JavaScript to Make a Bookmarklet in Chromium and Firefox

Seth Falco — Thu, 17 Jun 2021 00:53:04 +0000

Bookmarklets are browser bookmarks that execute JavaScript instead of opening a webpage. They're also known as bookmark applets, favlets, or JavaScript bookmarks.

Bookmarklets are natively available in all major browsers, including Mozilla Firefox and Chromium-based browsers like Chrome or Brave.

Scripting with JavaScript

Learning how to write scripts provides many benefits, namely the huge time-savings from automating repetitive or tedious tasks.

If you aren't a developer, the idea of learning to code might be intimidating, however scripting doesn't require software engineering knowledge or design patterns. The goal isn't to make scalable software, but rather to automate specialized or trivial tasks.

Regardless of profession, even if you've never written code before, consider what you do in your browser. If you ever feel what you do is repetitive or robotic, consider the possibility of delegating the task to an actual robot.

Use Cases for Bookmarklets

With bookmarklets, you can manipulate the current page as the function will have the context of the current tab. This means you can:

Click buttons virtually
Modify the content
Use the content of the page to open a new page
Remove elements from the page

You can also make bookmarks that don't utilize the context at all, such as conditionally opening a URL, or generating HTML for a new tab.

You'll find some bookmarklets I made for this article in Example Bookmarklets. They're just for demonstration, but should make the capabilities and implementations apparent.

How to Create Bookmarklets

Creating a bookmarklet is almost identical to creating a regular bookmark. The only difference is that you'll write JavaScript in the URL field instead of an HTTP/HTTPS URL.

Mozilla Firefox

Either in your bookmarks bar, or in the Bookmarks sidebar (CTRL + B), you can right-click, then click "Add Bookmark...":

Chromium

You can right-click your bookmarks bar, then click "Add page...". Alternatively, you can go to your Bookmarks manager, then right-click and click "Add new bookmark":

How to Write a Bookmarklet

In the URL field of the bookmark modal, write a JavaScript function in the following format.

javascript: (() => {
  // Your code here!
})();

javascript: is the URL's protocol. This indicates that the browser should execute the bookmark as JavaScript.

(() => { }) defines an anonymous function (lambda). You should write the code you want to execute between the curly braces.

(); will execute the anonymous function you just created.

javascript: (() => {
  alert('Hello, World!');
})();

You can also make it generate HTML and open it as an HTML document:

javascript: (() => {
  return 'Hello, World!
';
})();

Spacing for Bookmarklets

Most browsers don't allow a multiline input field in the bookmark URL, so you'll usually have to make strict use of curly braces ({ and }) and semi-colons (;) when writing bookmarklets. This is especially important when scoping conditional constructs (if/for/while).

Other than this, spacing doesn't matter. Don't be afraid to have a lot of code in one line because that's all you've got:

javascript: (() => {   const documentHTML = document.documentElement.outerHTML;   const matches = documentHTML.matchAll(/[\w.+=~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*/g);   const flatMatches = Array.from(matches).map((item) => item[0]);   const uniqueMatches = Array.from(new Set(flatMatches));      if (uniqueMatches.length > 0) {     const result = uniqueMatches.join('\n');     alert(result);   } else {     alert('No emails found!');   } })();

If your script is complex, it'll be easier to maintain your bookmarklet in a code editor like Visual Studio Code. You can copy and paste it over to your browser when it's ready.

How to Interact with Websites

The most common thing you'd do with bookmarklets is manipulating or interacting with websites you have open.

The Global Document Object

As the bookmarklet has the context of the page you're on, you have access to the [document](https://developer.mozilla.org/en-US/docs/Web/API/Document) object.

The ideal functions for selecting elements for our use case are:

querySelector to select a single element by CSS selector.
querySelectorAll to select all matching elements by CSS selector.
[evaluate](https://developer.mozilla.org/en-US/docs/Web/API/Document/evaluate) to select all matching elements by XPath.

There are other functions like [getElementById](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById) and [getElementsByClassName](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName), but we want to avoid false-positives, so we'll always make a strict selection using multiple element attributes.

CSS Selectors and XPath

If you're only selecting elements based on element names, IDs, classes, and other attributes, using a CSS selector will be simple and efficient.

CSS selectors are used to select elements in HTML documents to apply styles. If you're familiar with web development or CSS in general, then you already know how to use CSS selectors. (More Info: MDN, freeCodeCamp)

If you need to match the text content of an element as well, then you'll have to use XPath instead.

XPath is used to traverse XML documents, it provides all the capabilities of CSS selectors and more, including comparing the content of elements or using a regular expression to match it. (More Info: MDN, Wikipedia)

How to Select Elements from the Webpage

One of the most common uses for bookmarklets is manipulating webpages. To interact with, manipulate, or remove elements from the page, you'll always have to select the elements first.

First open the browser development tools by pressing F12, or CTRL + SHIFT + I.
Click the Inspector/Elements tab, which displays the full HTML document of the page you have open.
Use the element selector tool (CTRL + SHIFT + C) and click on the element you want to interact with. The document viewer will scroll to the element you clicked in the HTML document. You'll see the element ID, classes, and attributes.
Check if you're on the correct element. Elements can be nested where it's easier to navigate to it manually in the HTML. For example, you may have clicked an svg element, but actually needed the button or div it was inside of.
Define a CSS selector or XPath that matches everything you want, you might want to make it more strict than necessary to avoid potential false-positives.

For example, suppose I wanted to dismiss all topic suggestions on Twitter because they're annoying. Here is how a clickable element to dismiss a topic looks like.

Twitter topic suggestions, with an X button to mark it as "Not interested".

<div aria-label="Dismiss" role="button" tabindex="0" class="...">
  
  <div class="...">
    <svg viewBox="0 0 24 24" aria-hidden="true" class="...">
      
    svg>
  div>
div>

An appropriate selector is div[aria-label=Dismiss][role=button].

We need to use the querySelectorAll function from The Global Document Object, then call the [click](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click) method to simulate a click.

A bookmarklet can be implemented to select every dismiss button, and trigger a click event to all of them with a 250ms interval.

javascript: (() => {
  const selector = 'div[aria-label=Dismiss][role=button]';
  const topics = document.querySelectorAll(selector);

  for (let i = 0; i < topics.length; i++) {
    let topic = topics[i];
    setTimeout(() => topic.click(), i * 250);
  }
})();

How to Redistribute Bookmarklets

To "install" a bookmarklet, users create a bookmark on their browser and copy and paste the code to it.

This can be inconvenient, so it's common to link bookmarklets when sharing. This is as simple as putting it in the href attribute of your link anchor.

<a href="javascript: (() => {   alert('Hello, World!'); })();">
  Hello, World!
a>

Now users can right-click and "Bookmark Link", or drag it to the bookmarks bar for easy access.

Clicking the link on the web page will execute the script immediately. Ensure it's not going to obstruct what a user is trying to achieve on your site if they accidentally click it.

For example, the following link will display an alert with "Hello, World!".

User Content and Content Security Policy Bypass

If you run a service that allows user-generated content to contain custom HTML, it's important to sanitize link anchors (a).

The bookmarklet is executing like code in the developer tools console, and bypasses the configured Content Security Policy (CSP).

The "Hello, World!" link can just as easily send data to another server, including the input of form fields, or cookies.

As a service provider, it's important to be wary that users can exploit this to share malicious code on your platform. If their link anchor is running on a page under your domain, it can access sensitive information on the page and [document.cookies](https://developer.mozilla.org/en-US/docs/web/api/document/cookie).

You can try it yourself in a sandbox environment:

<a href="javascript: (() => {   alert(document.cookie); })();">
  EvilScript
a>

Only Run Code You Trust

As a user, it's important to note that any code can be malicious, only click or add bookmarklets where at least one of the following are true:

It came from a reputable source.
You know JavaScript, and you reviewed what it does.
Someone you trust knows JavaScript, and they reviewed it for you.

Privacy and Security

Bookmarklets can be handy, but we also have web extensions and user scripts too. What makes them different?

Web extensions are incredibly user-friendly and flexible. Bookmarklets can't block network requests, update content as the page changes, or manage tabs.

However, there're some benefits to using bookmarklets over anything else, namely for privacy and security.

An extension that modifies the font on all pages must get permission to access all data on all web pages. On Firefox and Chrome, this includes all input and password fields. (More Info: Mozilla, Google)

In contrast, a bookmarklet only has access to the page for the very moment it's executing, and only when manually triggered by the user.

This results in less risk of malware, a rogue employee can't push a malicious update, and data won't silently get sent to other servers.

The Chrome Web Store has previously had several malicious extensions which had to be taken down. Some of which had millions of installations before being removed. (More Info)

Example Bookmarklets

Here's a list of bookmarklet ideas, along with the code that implements it. You can copy and paste them into new bookmarks to try them out.

javascript: (() => {
  const documentHTML = document.documentElement.outerHTML;
  const matches = documentHTML.matchAll(/[\w.+=~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*/g);
  const flatMatches = Array.from(matches).map((item) => item[0]);
  const uniqueMatches = Array.from(new Set(flatMatches));

  if (uniqueMatches.length > 0) {
    const result = uniqueMatches.join('\n');
    alert(result);
  } else {
    alert('No emails found!');
  }
})();

javascript: (() => {
  const xpath = "//a [contains(., 'Jobs') or contains(., 'Careers') or contains(., 'Hiring')]";
  const elements = document.evaluate(xpath, document);
  const element = elements.iterateNext();

  if (element) {
    element.click();
  } else {
    alert('No links for jobs found!');
  }
})();

javascript: (() => {
  const allElements = document.querySelectorAll('*');

  for (let element of allElements) {
    element.style.fontFamily = 'Comic Sans MS';
  }
})();

javascript: (() => {
  const destination = "https://www.freecodecamp.org/";
  const alternate = "https://tenor.com/Y6jj.gif";

  const date = new Date();
  const hours = date.getHours();

  if (hours < 3 || hours >= 6) {
    window.open(destination);
  } else {
    window.open(alternate);
  }
})();

Thank you for reading! Now go forth and create your own bookmarklets.

Learn How to Use the Chrome DevTools to Troubleshoot Websites

Beau Carnes — Thu, 06 May 2021 16:26:08 +0000

Chrome DevTools is a set of web developer tools built directly into the Google Chrome browser. They can be super helpful for web developers.

We just published a crash course that will teach you how to use Chrome DevTools to improve your productivity as a web developer. You will learn how to do things like troubleshoot and live-edit web pages.

Nabheet Madan created this course. He is a very experienced developer and he does an excellent job teaching how to incorporate Chome DevTools into your development workflow.

Here are the sections covered in this course:

Getting comfortable with the tool
Elements
Source
Console
Network
Performance
Application
Security
Memory
Lighthouse

After getting a general overview of the developer tools, you will learn about the Elements tab. In this tab you can interact with web pages by modifying styles and HTML.

Next, you will learn to troubleshoot Javascript using the Sources tab. You will learn different types of breakpoints, source code modification options, overrides, and more. After that, you will learn about the console. The console is like a REPL in your browser where you can try out code.

You will learn to troubleshoot server side requests and local storage using the Network and Application tabs. Finally, you will learn how to improve performance and security using the Lighthouse, Performance, Memory, and Security tabs.

You can watch the full course below or on the freeCodeCamp.org YouTube channel (1-hour watch).

Chrome Extension Tutorial: How to Pass Messages from a Page's Context

freeCodeCamp — Wed, 24 Feb 2021 02:14:59 +0000

By Tarique Ejaz

In the world of web development, Chrome extensions are a pretty handy set of tools to have around.

Whether you use them to add headers to simple requests or to scrape important data from the DOM, extensions help provide extra functionality that makes life easier.

I started playing around with developing a Chrome extension for a use-case I had in mind at work. It was then that I stumbled upon the way we pass around certain data from a web page to an extension. And the lack of a simplified guide made me write this article.

We do have the Chrome API documentation, and it is indeed very thorough. But I consider myself to be more of a visual learner, and being able to visualize how we pass messages between the extension scripts helped simplify the overall development.

Note: This article makes use of Manifest V2 instead of V3. The major difference between the two is the usage of service workers in V3 instead of background pages and related actions.

Message Passing: Interaction Between Scripts

An extension, as the name suggests, is like a layer on top of the existing webpage you're trying to access. The browser acts as the container.

It mainly comprises the following scripts:

Popup Script - Local JavaScript file for the extension DOM
Background Script - Provides persistence and handles background events
Content Script - Scripts that run in isolation in the context of the web page
Injected Script - Scripts that are programmatically injected into the web page

Normally, if you have to merely deal with the DOM content, then the way the extension is developed is relatively straightforward.

The raw HTML is already available to the content script and all you need to do is pass it to the popup script.

However, if you need to access the page's variables and functions, the process gets a little tricky.

The variables and functions available in the page context, say in the window object, are not accessible to the content scripts since they tend to run in a special JavaScript environment. They have access to only the DOM of the page but not the variables and functions.

To access a page's variables and functions, we inject scripts by appending them to the DOM. This makes the browser assume that it is run in the context of the web page. This in turn provides the injected script access to the local variables and functions.

Since Chrome extensions are event-driven because of their architecture, once the injected scripts have access to the page's variables and functions, they can pass it to the content script.

The content script then passes the these objects to the background page.

And finally, the popup script is able to call onto the background page using the Extension API and pass it to the Extension DOM.

Message Passing Overview

Now, we will build a simple Performance Watcher extension that reads the performance data from the global window object of a page and maps the essential metrics for the user to see. Let's get into the code then.

Enough Talk, Show Me The Code

You can find the complete code repository for the project here. Let's quickly run through the primary files and the important functionalities they offer.

The Manifest File

Every Chrome Extension needs a manifest file. It is basically a JSON-formatted file that provides a set of metadata so the browser can recognize the permissions that need to be granted and the likely operational reach of the extension.

Here is the manifest used for our application.

manifest.json: metadata for your extension

Some of the important properties we need to focus on are the following:

background - Takes an array of scripts that would be run in the background page.
content-scripts - Includes an array of content scripts we wish to run as part of the web page's context.
web_accessible_resources - An array of packaged resources expected to be used in a web page's context. For example, an image we intend to embed in a page or a custom script we want to inject.
permissions - Allows your extension to gain access to certain Chrome APIs like tabs in this case.

The Content Script

Content Scripts have easy access to the DOM of the web page. We make use of the content script to append our custom script – inject-script.js – into the DOM.

content-script.js: inject custom script into the DOM

The content script also simultaneously continues to listen for any message being sent upstream from the custom script.

As soon as we get a message from the injected script, we run a quick check on the data received and verify whether our extension is installed. Once done, we simply use Chrome's Runtime API to send the data received forward to the background page.

content-script.js: send the required data to the background page

The Injected Script

The custom script can access global variables and functions like the window object. We map only the properties we require.

inject-script.js: procure required object from the page's JS context

The message from the custom script is communicated safely to the content script using the [window.postMessage](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage) function. In this case, a setInterval function is used to dynamically update the properties we are observing.

inject-script.js: send the gathered data to the content-script

The Background Script

The background script listens for any message transmitted by the content script using the Runtime API. The window object of the background page is then updated with the tab.id acting as the identifier.

background.js: listen for incoming message from the content-script

The popup script is where we finally read the data we had procured from our custom script. It is also the place where we code any necessary JavaScript operations.

The background page is retrieved using the getBackgroundPage method of the Extension API. The active tab's id is queried using the tabs.query method of the Tabs API in order to correctly extract the relevant data.

popup.js: reading the global object stored in the background page context

In this way, we are able to finally receive and map the data we need – performance in our case – efficiently in our extension.

The UI styling and other cosmetic code are available in the repository, for further reference.

Final Thoughts

Message passing is an essential concept when it comes to developing a Chrome extension. This is just one of the multiple ways in which you can communicate between scripts.

I spent a few hours in order to figure out how it would work for my use case. Hopefully, this simple walkthrough and the visual representation saves you some time.

I would suggest playing around with the code for a bit. If you have any questions, feel free to reach out to me on [LinkedIn](https://www.linkedin.com/in/tarique-ejaz/).

In the meantime, keep coding.

Chrome Bookmarks – How To Delete or Recover a Bookmark

Abigail Rennemeyer — Tue, 23 Feb 2021 07:18:00 +0000

Being able to save a web page you visit often is very useful. Perhaps you check the Google Analytics of your blog posts every day, or visit a recipe app for cooking inspiration.

Whatever the reason, bookmarks in Chrome can save you time and hassle. Just bookmark the page, and you can easily come back to it any time.

But what if you want to clean up your bookmarks? After all, you might no longer need that concert tickets website from several years ago. Well, that's easy enough to do, too.

In this article, you'll learn how to find your bookmarks in Chrome, and how to delete them, recover them, and otherwise manage them. Let's get started.

Where are my bookmarks located in Chrome?

First, let's see where to find your bookmarks in the first place. There are a couple spots from which you can access them.

How to Find Bookmarked Pages under the Bookmarks Tab in Chrome

First, there's the "Bookmarks" tab in your Chrome menu bar:

The bookmark tab in Chrome is in the top menu bar.

If you click on that tab, it will bring up a dropdown menu which shows several options, like "Bookmark Manager" and "Bookmark this tab". It also lists any bookmarks or bookmark folders you currently have:

For example, I have a "freeCodeCamp stuff" bookmark folder that contains many of my bookmarked pages and tabs.

If you click on a bookmark folder, it'll expand the list to show you all bookmarks in that folder, like this:

How to display your current bookmarks in a bookmark folder

Any bookmarked pages that you don't have in a folder will simply be listed under the bookmarks tab in Chrome.

How to Find Bookmarked Pages under Settings in Chrome

Your bookmarks are also located under your settings tab, the three vertical dots in the upper right corner of your browser:

How to find your bookmarks in settings.

Just click those three dots and you'll see the right dropdown above. Hover over/click on "Bookmarks" and the left menu will pop out. There you'll see a similar bookmark menu with options like "Show Bookmarks Bar", "Bookmark Manager" and so on.

If you hover over, for example, a bookmark folder (the same folder we discussed above), you'll see all your bookmarks. Then you can just click on the one you want to visit.

Voilà - all your bookmarks.

How to Add a Bookmark in Chrome

There are a few ways to add bookmarks in Chrome.

You can visit the bookmarks tab in the Chrome menu bar (that we discussed above) and select "Bookmark this Tab". A separate box will pop up with the name you want to give your bookmark (you can change this - just click into that highlighted box). Then click done.

How to add a bookmark in Chrome.

You can also visit the settings (three vertical dots), click on or hover over the "Bookmarks" tab, and then select "Bookmark this Tab". The same little box will pop up as above.
A third option is to simply click the little star icon in the address bar. That will bookmark the page you're currently on.

Click that star and it'll add a bookmark for you (after you click "Done").

But if you don't want to use your mouse and make that many clicks, there's another option.

How to Add or Manage Bookmarks in Chrome with Keyboard Shortcuts

Sure enough, you can use keyboard shortcuts to add bookmarks and manage your bookmarks.

To bookmark a tab quickly, just key in Command+D / Ctrl+D (see below) - it'll bring up that same bookmark window as above. Then you can just hit enter if you don't want to update the bookmark's name or any other settings and it'll save it.

And to manage your bookmarks, just key in Option+Command+B / Ctrl+Shift+O (again, see below).

How to add or manage bookmarks with keyboard shortcuts.

But we're getting a little ahead of ourselves. Now let's learn how to manage your bookmarks, and why you might want to do so.

How to Manage your Bookmarks in Chrome

Let's say you have a bunch of old bookmarks you don't need anymore. You may want to remove some of them so you aren't scrolling endlessly through a long (and partly irrelevant) list of bookmarks.

How to Delete a Bookmark in Chrome

Well, it's easy to remove bookmarks you no longer need. Simply navigate to your bookmarks tab (through the Chrome menu bar or Settings - three dots - as we discussed above) and select "Manage Bookmarks".

Or you can use your handy keyboard shortcut (Option+Command+B / Ctrl+Shift+O) to bring up your bookmark manager. This is what you'll see (with your own bookmarks, of course):

How to manage bookmarks in Chrome

If you have a bookmarks folder, like I do, just double-click to expand it and see all your bookmarks. It'll then list them all out like this:

You'll notice three vertical dots to the right of each bookmark. If you click on those, it'll bring up options to manage that bookmark:

Options for managing your bookmarks in Chrome.

You can edit and delete bookmarks, copy the page URL, open the bookmark in a new tab, and more.

If you select "Delete", that bookmark will disappear from your list. Be careful - there's no "Are you sure you want to delete this?" message.

But wait...what if you didn't mean to delete that bookmark you just deleted?

How to Recover a Deleted Bookmark in Chrome

If you've just deleted a bookmark in Chrome and didn't mean to do so, it's ok. Just hit Command+Z / Ctrl+Z (the "undo" function/keyboard shortcut) and it'll bring it back.

But what if you've since closed Chrome or done other things? Command+Z / Ctrl+Z won't work. Fortunately, there's another way – it just requires a few more steps.

How to Recover a Bookmark in Chrome that you Deleted a While Ago on macOS

First, go to Finder. In the window that pops up, find "Macintosh HD" in the left menu bar:

How to recover deleted bookmarks later or the next day.

Double click on the "Users" folder (and then you might have to select the user you want to use). Then double click on the following folders in this order (a new window with an alphabetized list will pop up each time you double-click):

Library -> Application Support -> Google -> Chrome -> Default

There, you'll find two files, one called "Bookmarks" and the other called "Bookmarks.bak". The .bak file contains your backed-up bookmarks, which will have those bookmarks that you accidentally deleted.

You're just a couple steps away from getting your deleted bookmarks back:

Make a copy of the Bookmarks file and save it somewhere else (another location on your computer). You'll also need to rename it.
Now, back in Default, delete that original Bookmarks file. You need to get it out of there so you can use the .bak file as your new Bookmarks file instead.
Then you need to rename the .bak file to just "Bookmarks" (get rid of the .bak extension) so that it's now your Bookmarks file. This should get back any bookmarks you deleted.
Now you can close finder and Chrome. When you reopen Chrome, your bookmarks should be back!

How to Recover a Bookmark in Chrome that you Deleted a While Ago on Windows

Open a file browser and go to the directory where Google Chrome stores user data. This is usually in C:\Users\\AppData\Local\Google\Chrome\User Data\Default.

Or if you use multiple Chrome people / profiles, your data might be in another directory like Profile 1. I'm recovering a bookmark I deleted on my work profile in Chrome, so my "Bookmarks" and "Bookmarks.bak" files are in C:\Users\\AppData\Local\Google\Chrome\User Data\Profile 1.

Also, the AppData directory is hidden by default, and you may need to make hidden files and folders visible first.

To do that, open Windows File Explorer, click on the "View" tab, then click the box for "Hidden items" and make sure that's checked:

In the Default or Profile x directory, you'll find two files, one called "Bookmarks" and the other called "Bookmarks.bak". The .bak file contains your backed-up bookmarks, which will have those bookmarks that you accidentally deleted.

The "Bookmarks" and "Bookmarks.bak" files on Windows 10

You're just a couple steps away from getting your deleted bookmarks back:

Make a copy of the Bookmarks file and save it somewhere else (another location on your computer). You'll also need to rename it.
Now, back in Default or Profile x, delete that original Bookmarks file. You need to get it out of there so you can use the .bak file as your new Bookmarks file instead.
Then you need to rename the .bak file to just "Bookmarks" (get rid of the .bak extension) so that it's now your Bookmarks file. This should get back any bookmarks you deleted.
Now you can close your file browser and Chrome. When you reopen Chrome, your bookmarks should be back!

How to Recover a Bookmark in Chrome that you Deleted a While Ago on Linux

Open a file browser and go to the directory where Google Chrome stores user data. This is usually in /home//.config/google-chrome/Default/.

Note that .config is a hidden directory, and you may need to make hidden files and folders visible first. Also, the google-chrome directory may be in another location depending on your flavor of Linux and how you installed the browser.

In the Default directory, you'll find two files, one called "Bookmarks" and the other called "Bookmarks.bak". The .bak file contains your backed-up bookmarks, which will have those bookmarks that you accidentally deleted.

The "Bookmarks" and "Bookmarks.bak" files on Linux Mint

You're just a couple steps away from getting your deleted bookmarks back:

Make a copy of the Bookmarks file and save it somewhere else (another location on your computer). You'll also need to rename it.
Now, back in Default, delete that original Bookmarks file. You need to get it out of there so you can use the .bak file as your new Bookmarks file instead.
Then you need to rename the .bak file to just "Bookmarks" (get rid of the .bak extension) so that it's now your Bookmarks file. This should get back any bookmarks you deleted.
Now you can close your file browser and Chrome. When you reopen Chrome, your bookmarks should be back!

And that's it! Now you know how to manage your bookmarks in Chrome on macOS, Windows, and Linux.

How to Build a Screenshot Capture API Using Terraform, AWS API Gateway, and AWS Lambda

freeCodeCamp — Mon, 23 Nov 2020 15:49:00 +0000

By Aaron Katz

Recently, I really wanted to find a way to build an API that would take in a URL and save a screenshot.

My initial use case was simple: if I was analyzing phishing emails, I wanted an easy way to get a screenshot of the URL that the email was trying to direct their targets to.

To build this, I used Terraform to create all of the infrastructure necessary to set it up in AWS, using Selenium, chromedriver, and headless Chrome to obtain the screenshots.

High level diagram illustrating what will be built in AWS by Terraform

Note: All code samples are from PowerShell, so please excuse the ".\" notation.

Requirements

An AWS account
Terraform binary
Existing S3 bucket to store Terraform state (https://www.terraform.io/docs/backends/types/s3.html)
AWS IAM user and access key created with appropriate permissions (programmatic access, administrative group) for Terraform usage

How to Set Up the Project

Create your new directory and initialize Terraform like this:

mkdir .\screenshot-service
cd .\screenshot-service
.\terraform init

Configure the AWS Provider

Create a file called provider.tf in the root of your project directory. Then configure with appropriate values for the AWS access key and secret key, as well as the name of an existing S3 bucket that will be used to store the Terraform state file.

provider "aws" {
  region = "us-east-1"

  access_key = "ACCESSKEY"
  secret_key = "SECRETKEY"
}

terraform {
  backend "s3" {
    bucket = "EXISTING_BUCKET"
    region = "us-east-1"
    key = "KEYFORSTATE"
    access_key = "ACCESSKEY"
    secret_key = "SECRETKEY"
    encrypt = "true"
  }
}

Configure the S3 Bucket

We will be using an S3 bucket to store all of our screenshots. To configure the S3 service, create a new file in the root of your project called s3.tf and add the following:

resource "aws_s3_bucket" "screenshot_bucket" {
  bucket        = "STORAGE_BUCKET_NAME"
  force_destroy = true
  acl = "public-read"

  versioning {
    enabled = false
  }
}

Create the Lambda Layer

Let's start by creating the lambda layer which will contain the necessary binaries. First, from the root of the project, create a folder called chromedriver_layer: mkdir .\chromedriver_layer.

Next, download the chromedriver and chromium binaries:

cd .\chromedriver_layer
wget https://chromedriver.storage.googleapis.com/2.41/chromedriver_linux64.zip -OutFile .\chromedriver.zip
wget https://github.com/adieuadieu/serverless-chrome/releases/download/v1.0.0-54/stable-headless-chromium-amazonlinux-2017-03.zip -OutFile .\headless-chromium.zip
Expand-Archive .\headless-chromium.zip
rm *.zip

Last, we need to zip this up nicely for Terraform:

cd ..\
Compress-Archive .\chromedriver_layer -DestinationPath \chromedriver_layer.zip

How to Configure Lambda

Lambda Infrastructure

Create a file called lambda.tf in the root of your project directory. First, we will create the execution role required for our function:

resource "aws_iam_role" "lambda_exec_role" {
  name        = "lambda_exec_role"
  description = "Execution role for Lambda functions"

  assume_role_policy = <


Next, we will add a few policies to the execution role we have created that will enable our function to access required services:
resource "aws_iam_role_policy" "lambda_logging" {
  name = "lambda_logging"

  role = aws_iam_role.lambda_exec_role.id

  policy = <

There, now our function will be able to access S3 and log to CloudWatch. Let's define our function:
resource "aws_lambda_function" "take_screenshot" {
  filename      = "./screenshot-service.zip"
  function_name = "take_screenshot"
  role          = aws_iam_role.lambda_exec_role.arn
  handler       = "screenshot-service.handler"
  runtime       = "python3.7"

  source_code_hash = filebase64sha256("./screenshot-service.zip")
  timeout          = 600
  memory_size      = 512 
  layers = ["${aws_lambda_layer_version.chromedriver_layer.arn}"]

  environment {
    variables = {
      s3_bucket = "${aws_s3_bucket.screenshot_bucket.bucket}"
    }
  }
}

The above code specifies that we are uploading a lambda function package using a Python 3.7 runtime, and that the function that will be called is named "handler".  
I have set the timeout to 600 seconds, but feel free to change that as you will. Also, feel free to play with the memory_size – for me, this has led to super quick screenshots.
We also set an environment variable called s3_bucket which will be passed to the function, containing the name of the bucket used to store the screenshot.
The Lambda function itself
Create a folder called lambda in the root of the project directory and create a file called screenshot-service.py in that folder.
Add the following imports and logging configuration to the file:
#!/usr/bin/env python
# -*- coding utf-8 -*-

import json
import logging
from urllib.parse import urlparse, unquote # TODO: Can I use urllib3?
from selenium import webdriver
from datetime import datetime
import os
from shutil import copyfile
import boto3
import stat
import urllib.request
import tldextract

# Configure logging
logger = logging.getLogger()
logger.setLevel(logging.DEBUG)

Next, we will create a function that will copy the binaries from our lambda layer and make them executable:
def configure_binaries():
    """Copy the binary files from the lambda layer to /tmp and make them executable"""
    copyfile("/opt/chromedriver", "/tmp/chromedriver")
    copyfile("/opt/headless-chromium", "/tmp/headless-chromium")

    os.chmod("/tmp/chromedriver", 755)
    os.chmod("/tmp/headless-chromium", 755)

Next, we will create the function that will take the screenshot of the provided domain. We will be passing in the URL and the S3 bucket name.  
We will add an optional parameter allowing for the title of the image to be set by the user. The screenshot is taken by Selenium automating the headless Chrome browser we downloaded.
def get_screenshot(url, s3_bucket, screenshot_title = None):     
    configure_binaries()

    chrome_options = webdriver.ChromeOptions()
    chrome_options.add_argument('--headless')
    chrome_options.add_argument("disable-infobars")
    chrome_options.add_argument("enable-automation")

    chrome_options.add_argument('--no-sandbox')
    chrome_options.add_argument('--disable-gpu')
    chrome_options.add_argument('--window-size=1280x1696')
    chrome_options.add_argument('--user-data-dir=/tmp/user-data')
    chrome_options.add_argument('--hide-scrollbars')
    chrome_options.add_argument('--enable-logging')
    chrome_options.add_argument('--log-level=0')
    chrome_options.add_argument('--disable-dev-shm-usage')
    chrome_options.add_argument('--v=99')
    chrome_options.add_argument('--single-process')
    chrome_options.add_argument('--data-path=/tmp/data-path')
    chrome_options.add_argument('--ignore-certificate-errors')
    chrome_options.add_argument('--homedir=/tmp')
    chrome_options.add_argument('--disk-cache-dir=/tmp/cache-dir')
    chrome_options.add_argument(
        'user-agent=Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3163.100 Safari/537.36')
    chrome_options.binary_location = "/tmp/headless-chromium"

    if screenshot_title is None: 
        ext = tldextract.extract(url)
        domain = f"{''.join(ext[:2])}:{urlparse(url).port}.{ext[2]}"
        screenshot_title = f"{domain}_{datetime.utcnow().strftime('%Y%m%d_%H%M%S')}"
    logger.debug(f"Screenshot title: {screenshot_title}")

    with webdriver.Chrome(chrome_options=chrome_options, executable_path="/tmp/chromedriver", service_log_path="/tmp/selenium.log") as driver: 
        driver.set_window_size(1024, 768)

        logger.info(f"Obtaining screenshot for {url}")
        driver.get(url)     

        driver.save_screenshot(f"/tmp/{screenshot_title}.png") # TODO: Delete the screenshot after
        logger.info(f"Uploading /tmp/{screenshot_title}.png to S3 bucket {s3_bucket}/{screenshot_title}.png")
        s3 = boto3.client("s3")
        s3.upload_file(f"/tmp/{screenshot_title}.png", s3_bucket, f"{screenshot_title}.png", ExtraArgs={'ContentType': 'image/png', 'ACL': 'public-read'})
    return f"https://{s3_bucket}.s3.amazonaws.com/{screenshot_title}.png"

Last, let's create our handler, which will be invoked when the API Gateway receives a legitimate request:
def handler(event, context): 
    logger.debug("## ENVIRONMENT VARIABLES ##")
    logger.debug(os.environ)
    logger.debug("## EVENT ##")
    logger.debug(event)

    bucket_name = os.environ["s3_bucket"]
    logger.debug(f"bucket_name: {bucket_name}")

    logger.info("Validating url")  

    if event["httpMethod"] == "GET":
        if event["queryStringParameters"]:
            try:
                url = event["queryStringParameters"]["url"]
            except Exception as e:
                logger.error(e)
                raise e
        else:
            return {
                "statusCode": 400,
                "body": json.dumps("No URL provided...")
            }
    elif event["httpMethod"] == "POST":
        if event["body"]:
            try:
                body = json.loads(event["body"])
                url = body["url"]
            except Exception as e:
                logger.error(e)
                raise e
        else:
            return {
                "statusCode": 400,
                "body": json.dumps("No URL provided...")
            }
    else:
        return {
            "statusCode": 405,
            "body": json.dumps(f"Invalid HTTP Method {event['httpMethod']} supplied")
        }

    logger.info(f"Decoding {url}")
    url = unquote(url)

    logger.info(f"Parsing {url}")
    try: 
        parsed_url = urlparse(url)
        if parsed_url.scheme != "http" and parsed_url.scheme != "https":
            logger.info("No valid scheme found, defaulting to http://")
            parsed_url = urlparse(f"http://{url}")
        if parsed_url.port is None:
            if parsed_url.scheme == "http":
                parsed_url = urlparse(f"{parsed_url.geturl()}:80")
            elif parsed_url.scheme == "https":
                parsed_url = urlparse(f"{parsed_url.geturl()}:443")

    except Exception as e: 
        logger.error(e)
        raise e

    logger.info("Getting screenshot")
    try: 
        screenshot_url = get_screenshot(parsed_url.geturl(), bucket_name) # TODO: Variable!
    except Exception as e:  
        logger.error(e)
        raise e

    response_body = {
        "message": f"Successfully captured screenshot of {parsed_url.geturl()}",
        "screenshot_url": screenshot_url
    }

    return {
        "statusCode": 200,
        "body"      : json.dumps(response_body)
    }

Next, we need to install all packages that the lambda function uses into the lambda directory since these packages are not installed by default in AWS. 
Then we need to create the zip archive (once created, Terraform will continue to update it if you make changes to your code):
cd .\lambda
pip install selenium tldextract -t .\
cd ..\
Compress-Archive .\lambda -DestinationPath .\screenshot-service.zip

How to Configure API Gateway
Create a file called apigw.tf in the root of your project directory. First, we will configure the REST API:
resource "aws_api_gateway_rest_api" "screenshot_api" {
  name        = "screenshot_api"
  description = "Lambda-powered screenshot API"
  depends_on = [
    aws_lambda_function.take_screenshot
  ]
}

This API will be used to direct all requests that are made for the screenshot service. We use the depends_on feature to ensure that the gateway and its related components are only created after the lambda function is created.  
Next, let's create the API Gateway resource for the lambda function:
resource "aws_api_gateway_resource" "screenshot_api_gateway" {
  path_part   = "screenshot"
  parent_id   = aws_api_gateway_rest_api.screenshot_api.root_resource_id
  rest_api_id = aws_api_gateway_rest_api.screenshot_api.id
}

We have now defined a resource that will respond at the /screenshot endpoint for the API service.
Next up we will create a stage for the API. A stage is a fancy way of naming our deployment of the API. You can configure caching, logging, request throttling, and more using a stage.
resource "aws_api_gateway_stage" "prod_stage" {
  stage_name = "prod"
  rest_api_id = aws_api_gateway_rest_api.screenshot_api.id
  deployment_id = aws_api_gateway_deployment.api_gateway_deployment_get.id
}

Next we will create an API key and usage plan tied to our stage, so that only users with knowledge of the key can use this service. (Note: If you want this publicly accessible, skip this step.)
resource "aws_api_gateway_usage_plan" "apigw_usage_plan" {
  name = "apigw_usage_plan"

  api_stages {
    api_id = aws_api_gateway_rest_api.screenshot_api.id
    stage = aws_api_gateway_stage.prod_stage.stage_name
  }
}

resource "aws_api_gateway_usage_plan_key" "apigw_usage_plan_key" {
  key_id = aws_api_gateway_api_key.apigw_prod_key.id
  key_type = "API_KEY"
  usage_plan_id = aws_api_gateway_usage_plan.apigw_usage_plan.id
}

resource "aws_api_gateway_api_key" "apigw_prod_key" {
  name = "prod_key"
}

Let's now configure the API to respond to either a GET or POST request if a valid API Gateway Key is provided (set the value to false if you want the method open to the public):
resource "aws_api_gateway_method" "take_screenshot_get" {
  rest_api_id   = aws_api_gateway_rest_api.screenshot_api.id
  resource_id   = aws_api_gateway_resource.screenshot_api_gateway.id
  http_method   = "GET"
  authorization = "NONE"
  api_key_required = true
}

resource "aws_api_gateway_method" "take_screenshot_post" {
  rest_api_id   = aws_api_gateway_rest_api.screenshot_api.id
  resource_id   = aws_api_gateway_resource.screenshot_api_gateway.id
  http_method   = "POST"
  authorization = "NONE"
  api_key_required = true
}

We now need to give the API Gateway permission to invoke the lambda function we created:
resource "aws_lambda_permission" "apigw" {
  statement_id  = "AllowAPIGatewayInvoke"
  action        = "lambda:InvokeFunction"
  function_name = aws_lambda_function.take_screenshot.arn
  principal     = "apigateway.amazonaws.com"

  source_arn = "${aws_api_gateway_rest_api.screenshot_api.execution_arn}/*/*/*"
}

Great, we now have the appropriate permissions. Let's set up our integration with the lambda function:
resource "aws_api_gateway_integration" "lambda_integration_get" {
  depends_on = [
    aws_lambda_permission.apigw
  ]
  rest_api_id = aws_api_gateway_rest_api.screenshot_api.id
  resource_id = aws_api_gateway_method.take_screenshot_get.resource_id
  http_method = aws_api_gateway_method.take_screenshot_get.http_method

  integration_http_method = "POST" # https://github.com/hashicorp/terraform/issues/9271 Lambda requires POST as the integration type
  type                    = "AWS_PROXY"
  uri                     = aws_lambda_function.take_screenshot.invoke_arn
}

resource "aws_api_gateway_integration" "lambda_integration_post" {
  depends_on = [
    aws_lambda_permission.apigw
  ]
  rest_api_id = aws_api_gateway_rest_api.screenshot_api.id
  resource_id = aws_api_gateway_method.take_screenshot_post.resource_id
  http_method = aws_api_gateway_method.take_screenshot_post.http_method

  integration_http_method = "POST" # https://github.com/hashicorp/terraform/issues/9271 Lambda requires POST as the integration type
  type                    = "AWS_PROXY"
  uri                     = aws_lambda_function.take_screenshot.invoke_arn
}

This integration tells the API Gateway what lambda function to invoke when it receives a request at the specified endpoint and HTTP method.
Almost done with the gateway, I promise. As a last step, let's make sure that our API can send logs to CloudWatch:
resource "aws_api_gateway_account" "apigw_account" {
  cloudwatch_role_arn = aws_iam_role.apigw_cloudwatch.arn
}

resource "aws_iam_role" "apigw_cloudwatch" {
  # https://gist.github.com/edonosotti/6e826a70c2712d024b730f61d8b8edfc
  name = "api_gateway_cloudwatch_global"

  assume_role_policy = <

We have now given API Gateway the requisite permissions in order to write logs to CloudWatch.  
Last but not least, we deploy our API. We use depends_on to ensure that the deployment occurs after all dependencies are created.
resource "aws_api_gateway_deployment" "api_gateway_deployment_get" {
  depends_on = [aws_api_gateway_integration.lambda_integration_get,  aws_api_gateway_method.take_screenshot_get, aws_api_gateway_integration.lambda_integration_post, aws_api_gateway_method.take_screenshot_post]

  rest_api_id = aws_api_gateway_rest_api.screenshot_api.id
}

Lambda packaging
In main.tf, add the following:
data "archive_file" "screenshot_service_zip" {
  type        = "zip"
  source_dir  = "./lambda"
  output_path = "./screenshot-service.zip"
}

data "archive_file" "screenshot_service_layer_zip" {
  type = "zip"
  source_dir = "./chromedriver_layer"
  output_path = "./chromedriver_lambda_layer.zip"
}

Outputs
Create a file called output.tf in the root of your project directory and add the following:
output "api_gateway_url" {
  value = "${aws_api_gateway_stage.prod_stage.invoke_url}/${aws_api_gateway_resource.screenshot_api_gateway.path_part}"
}

output "api_key" {
  value = aws_api_gateway_api_key.apigw_prod_key.value
}

Now once you run .\terraform apply you will get output with the URL of the API and the associated API key.
Congrats! You now have a working screenshot service. To view the code I've used, feel free to check out my Github repository.

Google Chrome - freeCodeCamp.org

How to Develop Chrome Extensions using Plasmo [Full Handbook]

Table of Contents

What is Plasmo?

What You Will Build

Example Use Case

What You Will Learn

Prerequisites

Verify Your Setup

Getting Help

Ready to Begin?

Project Setup

Step 1: Install pnpm (Recommended)

Step 2: Create Your Extension Project

Step 3: Navigate to Your Project

Step 4: Explore What Was Created

Step 5: Test the Default Extension

Step 6: Load the Extension in Chrome

Step 7: Test the Default Popup

Step 8: Update Extension Information

Step 9: Add Required Permissions (Critical!)

Finding the right permissions for your own extensions:

Step 10: Verify Hot Reload Works

Section Summary

Understanding the Background Script

What is a Background Script?

Step 1: Create background.ts

Step 2: Implement Tab Grouping Logic

Step 3: Extract Domain Helper

Step 4: Color Assignment Helper

Complete background.ts File

Testing the Background Script

Building the Popup UI

Step 1: Replace popup.tsx

Tab Grouper

Step 2: Load Statistics

Step 3: Trigger Tab Grouping

Step 4: Build the UI

🗂️ Tab Grouper

Complete popup.tsx File

🗂️ Tab Grouper

Testing Your Extension

Step 1: Make Sure the Dev Server is Running

Step 2: Load the Extension in Chrome

Step 3: Pin the Extension

Step 4: Test the Extension

Test 1: Open Multiple Tabs

Test 2: Group the Tabs

Test 3: Verify Groups

Step 5: Debug the Extension

Step 6: Hot Reloading

Step 7: Test Edge Cases

Step 8: Production Build

Next Steps and Extension Ideas

1. Auto-Grouping

2. Keyboard Shortcuts

3. Category-Based Grouping

4. Options Page

Tab Grouper Settings

5. Tab Age Tracking

6. Search Within Groups

7. Export/Import Groups

8. Group Statistics Dashboard

Browsing Statistics

Learning Resources

Deploying to Chrome Web Store

What You'll Need

Step 1: Create a Production Build

Step 2: Create Store Assets

Extension Icons

Screenshots

Promotional Images (Optional)

Demo Video (Optional)

Step 3: Write Your Store Listing

Step 4: Register as a Chrome Web Store Developer

Step 5: Submit Your Extension

Single Purpose Description

Permission Justification

Privacy Policy

Step 6: Submit for Review