Chrome extension: CLS Logger

contentScript.js

console.log("MONITORING CLS")
let cls = 0;

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    if (!entry.hadRecentInput) {
      cls += entry.value;
      console.log('Current CLS value:', cls, entry);
    }
  }
}).observe({type: 'layout-shift', buffered: true});

manifest.json

{
  "name": "CLS Monitoring",
  "version": "1.0",
  "description": "Monitors CLS on a page",
  "content_scripts": [
    {
      "matches": [
        "https://www.example.co.uk/*"
      ],
      "run_at": "document_start",
      "js": [
        "contentScript.js"
      ]
    }
  ],
  "manifest_version": 2,
  "permissions": [
    "activeTab"
  ]
}