Remote Job Filter Extension

A Chrome extension written in JavaScript that filters job listings to show only remote positions, catering to the trending demand for remote opportunities with potentially higher salaries.

/* Manifest file: manifest.json */
{
  "manifest_version": 2,
  "name": "Remote Job Filter Extension",
  "version": "1.0",
  "description": "Filters job listings to show only remote positions",
  "permissions": [
    "activeTab",
    "storage"
  ],
  "browser_action": {
    "default_popup": "popup.html"
  },
  "content_scripts": [
    {
      "matches": ["*://*/*"],
      "js": ["content.js"]
    }
  ]
}

This is the manifest file for the Chrome extension which sets up the metadata, permissions, popup, and content scripts.

<!-- Popup HTML: popup.html -->
<div>
  <h1>Remote Job Filter</h1>
  <button id="filter-button">Filter Remote Jobs</button>
</div>

This is the HTML for the popup which appears when the user clicks on the extension icon. It contains a button for users to activate the filter.

/* Popup Script: popup.js */
document.getElementById('filter-button').addEventListener('click', function() {
  chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
    chrome.tabs.sendMessage(tabs[0].id, {action: "filterJobs"});
  });
});

JavaScript for the popup that sends a message to the content script to trigger the filter action when the button is clicked.

/* Content Script: content.js */
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
  if (request.action === "filterJobs") {
    // Add logic to filter job listings here
    const listings = document.querySelectorAll('.job-listing, .job-posting, .job-ad'); // Replace with actual selectors
    listings.forEach(item => {
      if (!item.textContent.includes('Remote')) {
        item.style.display = 'none';
      }
    });
  }
});

Content script that listens for messages from the popup. When the filter action is received, it locates job listings on the page and hides those that aren't labeled as remote jobs.

/* CSS: popup.css */
button {
  background-color: #4CAF50;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

CSS for styling the filter button in the popup.