Twitter インプレッション アクセスカウンター

main.js

const id = "kiriban-fuminige-kinshi";

const conversions = [
  { unit: "K", rate: 1000 },
  { unit: "M", rate: 1000000 },
  { unit: "B", rate: 1000000000 },
  { unit: "万", rate: 10000 },
];

function run(target) {
  const elements = target.querySelectorAll("a[href$='analytics']");
  for (const element of elements) {
    if (element.querySelector(`span.${id}`) || /^\D/.test(element.textContent)) {
      continue;
    }

    let count =
      element.textContent
        .replaceAll(/,/g, "")
        .replace(/Views$/, "")
        .trim() || "0";

    const conversion = conversions.find(({ unit }) => count.endsWith(unit));
    if (conversion) {
      count = `${Math.trunc(Number(count.replace(/.$/, "")) * conversion.rate)}`;
    }

    count = [...count.padStart(8, "0")].map((c) => String.fromCodePoint(0x1fbf0 + c.codePointAt(0) - 0x30)).join("");

    while (element.firstChild) {
      element.removeChild(element.firstChild);
    }
    element.insertAdjacentHTML("beforeend", `<span class="${id}">${count}</span>`);
  }
}

document.head.insertAdjacentHTML(
  "beforeend",
  `
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Symbols+2&display=swap" rel="stylesheet">
<style id="${id}">
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Symbols+2&display=swap');
span.${id} {
  background-color: #000000;
  border-color: #eeeeee;
  border-style: outset;
  color: #00ff00;
  font-family: 'Noto Sans Symbols 2';
  padding: 2px 2px 0px 2px;
}
</style>
`
);

const observer = new MutationObserver((mutations) => {
  for (const mutation of mutations) {
    run(mutation.target);
  }
});

observer.observe(document.body, {
  childList: true,
  subtree: true,
});

manifest.json

{
  "manifest_version": 3,
  "name": "アクセスカウンター",
  "description": "キリ番踏み逃げ厳禁",
  "version": "0.0.1",
  "content_scripts": [
    {
      "js": ["main.js"],
      "matches": ["https://twitter.com/*"]
    }
  ]
}