Browser extension demo

main.js

const DATA = [
    {
        q: "Q",
        a: ["A1"],
    }
]

const css = `
  .a:hover {
    font-style: italic !important;
  }
`;

const style = document.createElement('style');
style.textContent = css;
document.head.append(style);

const std = (txt) => {
    return txt
        .replaceAll(' ', '')
        .replaceAll(',', '')
        .replaceAll('.', '')
        .replaceAll('á', 'a')
        .replaceAll('é', 'e')
        .replaceAll('í', 'i')
        .replaceAll('ó', 'o')
        .replaceAll('ú', 'u')
        .toLowerCase()
}

const match = (haystack, needle) => {
    return std(haystack.textContent).includes(std(needle));
}

const addClass = (txt, className) => {
    for (let element of elements) {
        for (let child of element.childNodes) {
            if (child.nodeType === 3 && match(child, txt)) {
                element.classList.add(className);
            }
        }
    }
}

const addTitle = (txt, title) => {
    for (let element of elements) {
        for (let child of element.childNodes) {
            if (child.nodeType === 3 && match(child, txt)) {
                element.setAttribute('title', title);
            }
        }
    }
}

const elements = document.getElementsByTagName('*');
for (let question of DATA) {
    for (let a of question.a) {
        addClass(a, 'a');
    }
}

for (let question of DATA) {
    const idx = DATA.indexOf(question)
    if (match(document.body, question.q)) {
        addTitle(question.q, idx);
        for (let a of question.a) {
            addTitle(a, idx);
        }
    }
}

manifest.json

{
  "manifest_version": 2,
  "name": "Q&A",
  "version": "1.0",
  "content_scripts": [
    {
      "matches": [
        "<all_urls>"
      ],
      "js": [
        "main.js"
      ]
    }
  ]
}