Browser extension to display Page performance and custom events from the page

Latest Version

Version
1.2
Update
September 12, 2024
Size
34.92KiB
Developer
Category
Users
10
Rating
4 ★
Manifest Version
3
Web Store Status
Languages Support
English
See more
Permissions
Tabs
See more

Performance Event Flow Extension

Performance Event flow is a chrome extension to display some of the Page related events like when Page navigation started and when Page loaded completed in one flow diagram (by default).

By default this extension will cover below page related events.
1. Page Navigation Starts
2. First element visible on the page
3. Page became Interactive
4. Page Load complete

You can also add custom event from your code, if you want to understand performance for some part of the code by pushing event as explained below.
Place below code whenever you want to track event.

window.__performanceEventFlow=window.__performanceEventFlow || [];
window.__performanceEventFlow.push({event:\"\",time:new Date().getTime()});

You can also watch network request after adding the URL details by clicking on 'Watch Network Request'
Read more

Source Manifest.json

{"update_url": "https://clients2.google.com/service/update2/crx", "name": "Performance Event Flow", "description": "Browser extension to display Page performance and custom events from the page", "version": "1.2", "manifest_version": 3, "devtools_page": "devtools.html", "permissions": ["tabs"], "background": { "service_worker": "service-worker.js" }, "action": { "default_popup": "hangon.html" }, "content_scripts": [ { "run_at": "document_start", "matches": ["https://*/*"], "js": ["content-script.js"] } ], "icons": { "16": "images/logo-16.png", "48": "images/logo-48.png", "128": "images/logo-128.png" }, "externally_connectable": { "matches": ["https://*/*"] }, "web_accessible_resources": [ { "resources": ["inject.js"], "matches": ["https://*/*"] } ]}
Read more