StopDiiaCity розширення для сайтів пошуку роботи

• Завантажити розширення StopDiiaCity для Firefox з офіційного сайту
• Завантажити розширення StopDiiaCity для Chrome з офіційного сайту

Привіт, мене звати Ярослав, переважно на DOU пишу статті про Go, але цього разу буде про Chrome та Firefox розширення, яке попереджає, що компанія підтримує Дія Сіті.

Розширення вже можна завантажити з сайту stopdiiacity.u8hub.com у вигляді zip-архіву який потім треба встановити на сторінці chrome://extensions або about:debugging#/runtime/this-firefox.

Коли ви встановите розширення, то на сторінках профілів компаній, які підтримують Дія Сіті, буде з’являтись попередження такого виду:

Такі попередження будуть на сторінках компаній, сторінках вакансій на сайтах jobs.dou.ua, djinni.co та linkedin.com.

Як працює розширення StopDiiaCity

Код розширення доступний в репозиторії gitlab.com/YaroslavPodorvanov/StopDiiaCity.

StopDiiaCity складається з двох компонентів: з API та розширення, яке відправляє запити до API та виводить попередження на сторінку. Усі навчальні матеріали, які використовував, додам в тему.

Netlify functions як API

Усі компанії, які поки підтримують Дія Сіті, можна було додати одразу в розширення та обійтись без API, але ми враховуємо, що компанії будуть відкликати свою підтримку Дія Сіті, тому винесли цей список в API, яке зможемо оновлювати окремо.

API отримує JSON з URL-сторінки компанії чи вакансії та повертає JSON з інформацією чи підтримує компанія Дія Сіті.

{
  "url": "https://jobs.dou.ua/companies/example/"
}

{
  "url": "https://djinni.co/jobs/company-example-ffffff/"
}

{
  "exists": false
}

Вибрав Netlify, бо є можливість використовувати безкоштовно, має гарну документацію Build serverless functions with Go та має приклад на GitHub github.com/netlify/aws-lambda-go-example, цього було достатньо щоб за 15 хвилин зробити першу тестову функцію /.netlify/functions/verify.

Весь код функції verify на Go в файлі main.go:

package main

import (
	"encoding/json"
	"net/http"
	"strings"

	"github.com/aws/aws-lambda-go/events"
	"github.com/aws/aws-lambda-go/lambda"
)

const (
	// language=JSON
	unsafeMessage = `{"exists":true}`
	// language=JSON
	safeMessage = `{"exists":false}`
)

type Request struct {
	URL     string `json:"url"`
	Version int    `json:"version"`
}

type PrefixGroup struct {
	Prefix   string
	Prefixes []string
}

var stopDiiaCityPrefixes = []PrefixGroup{
	{
		Prefix: "https://jobs.dou.ua/companies/",
		Prefixes: []string{
			// ...
		},
	},
	{
		Prefix: "https://djinni.co/jobs/",
		Prefixes: []string{
			// ...
		},
	},
}

var cors = map[string]string{
	"Access-Control-Allow-Origin": "*",
	"Content-Type":                "application/json",
}

func handler(r events.APIGatewayProxyRequest) (events.APIGatewayProxyResponse, error) {
	var request Request

	var unmarhsalErr = json.Unmarshal([]byte(r.Body), &request)
	if unmarhsalErr != nil {
		return events.APIGatewayProxyResponse{
			Headers:    cors,
			StatusCode: http.StatusBadRequest,
			Body:       `{}`,
		}, unmarhsalErr
	}

	if request.URL == "" {
		return events.APIGatewayProxyResponse{
			Headers:    cors,
			StatusCode: http.StatusBadRequest,
			Body:       `{}`,
		}, nil
	}

	for _, prefixGroup := range stopDiiaCityPrefixes {
		if strings.HasPrefix(request.URL, prefixGroup.Prefix) {
			if hasAnyPrefix(prefixGroup.Prefixes, request.URL) {
				return unsafe(), nil
			}

			return safe(), nil
		}
	}

	return safe(), nil
}

func main() {
	// Make the handler available for Remote Procedure Call by AWS Lambda
	lambda.Start(handler)
}

func unsafe() events.APIGatewayProxyResponse {
	return events.APIGatewayProxyResponse{
		Headers:    cors,
		StatusCode: http.StatusOK,
		Body:       unsafeMessage,
	}
}

func safe() events.APIGatewayProxyResponse {
	return events.APIGatewayProxyResponse{
		Headers:    cors,
		StatusCode: http.StatusOK,
		Body:       safeMessage,
	}
}

func hasAnyPrefix(prefixes []string, url string) bool {
	for _, prefix := range prefixes {
		if strings.HasPrefix(url, prefix) {
			return true
		}
	}

	return false
}

Функцію verify треба скомпілювати, для цього додав Makefile:

build:
	mkdir -p functions
	go get ./...
	go build -o functions/verify ./...

та налаштування netlify.toml

[build]
  command = "make build"
  functions = "functions"
  publish = "public"
[build.environment]
  # Change this path with the path to your repository
  GO_IMPORT_PATH = "gitlab.com/stopdiiacity/stopdiiacity.netlify.app"

Це все є в офіційному GitHub-прикладі github.com/netlify/aws-lambda-go-example

Chrome розширення

Chrome розширення має таку структуру:

├── app.css
├── app.js
├── images
│   ├── 16x16.png
│   └── 32x32.png
└── manifest.json

Розширення має робити HTTP-запит та виводити інформацію на сторінку, для цього потрібно вказати відповідні дозволи webRequest та activeTab в manifest.json:

{
  "name": "StopDiiaCity",
  "description": "Stop Diia City",
  "version": "1.0",
  "manifest_version": 3,
  "icons": {
    "16": "/images/16x16.png",
    "32": "/images/32x32.png"
  },
  "content_scripts": [
    {
      "matches": ["https://jobs.dou.ua/*", "https://djinni.co/jobs/*"],
      "js": ["app.js"],
      "css": ["app.css"],
      "run_at": "document_end"
    }
  ],
  "permissions": [
    "webRequest",
    "activeTab"
  ],
  "homepage_url": "https://stopdiiacity.vercel.app/"
}

Розширення буде спрацьовувати лише на сторінках, схожих на https://jobs.dou.ua/* та https://djinni.co/jobs/* це також встановлено в manifest.json.

Логіка розширення в app.js:

console.log("StopDiiaCity run Chrome extension");

function verify(url) {
    fetch("https://stopdiiacity.netlify.app/.netlify/functions/verify", {
        method: "POST",
        body: JSON.stringify({
            "url": url,
        }),
    }).then(function (response) {
        return response.json();
    }).then(function (json) {
        if (json.exists) {
            const decoder = document.createElement("div")

            decoder.innerHTML = `<div id="js-modal-background" class="stopdiiacity-modal">
    <div class="stopdiiacity-modal-content">
        <div class="stopdiiacity-modal-header">
            <span id="js-modal-close" class="stopdiiacity-close">×</span>
            <h2>Обережно ймовірно компанія підтримує Дія City</h2>
        </div>
        <div class="stopdiiacity-modal-body">
            // ...
        </div>
        <div class="stopdiiacity-modal-footer">
            // ...
        </div>
    </div>
</div>`;

            const $modal = decoder.firstChild;
            document.body.prepend($modal);
            document.getElementById("js-modal-close").addEventListener("click", function () {
                $modal.style.visibility = "hidden";
            });
            const $background = document.getElementById("js-modal-background");
            $background.addEventListener("click", function (event) {
                if (event.target === $background) {
                    $modal.style.visibility = "hidden";
                }
            });
        }
    }).catch(console.error);
}

{
    const url = window.location.href;
    if (url.startsWith("https://jobs.dou.ua/companies")) {
        verify(url);
    } else if (url.startsWith("https://djinni.co/jobs/company")) {
        verify(url);
    } else if (url.startsWith("https://djinni.co/jobs")) {
        document.querySelectorAll(".list-jobs__details__info a").forEach(function ($element) {
            if ($element.href.startsWith("https://djinni.co/jobs/company")) {
                verify($element.href);
            }
        });
    }
}

Епілог

У суботу, 29 травня, відбулась офлайн-зустріч Гільдії ІТ фахівців, де ідею з розширенням StopDiiaCity підтримали. Якщо будуть компанії, які вступлять в Дія Сіті, то буду додавати їх сайти в розширення та в API.

Якщо будуть компанії, які відмовляться від підтримки Дія Сіті, то буду видаляти їх профілі з розширення.

Розширення написав за день.

Вже відправив розширення в Chrome Web Store, розгляд протягом двох тижнів, як тільки розглянуть, то відпишу в темі, а також в телеграм-каналі Гільдії ІТ фахівців.

Матеріали, які використовував для написання розширення

• Build serverless functions with Go
• github.com/netlify/aws-lambda-go-example
• Configure CORS response headers on AWS Lambda?
• How TO — CSS/JS Modal