{"id":15635788,"url":"https://github.com/cyrus-and/chrome-page-graph","last_synced_at":"2025-04-30T06:46:38.546Z","repository":{"id":66185120,"uuid":"74504349","full_name":"cyrus-and/chrome-page-graph","owner":"cyrus-and","description":"Chrome extension to generate interactive page dependency graphs","archived":false,"fork":false,"pushed_at":"2017-12-13T00:01:33.000Z","size":16,"stargazers_count":34,"open_issues_count":0,"forks_count":5,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-30T06:46:26.168Z","etag":null,"topics":["chrome-extension","dependency-graph","webpage"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cyrus-and.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-11-22T19:04:09.000Z","updated_at":"2025-02-22T14:41:50.000Z","dependencies_parsed_at":null,"dependency_job_id":"033e3f44-8ad5-40d6-b18c-7d1f42da5dfc","html_url":"https://github.com/cyrus-and/chrome-page-graph","commit_stats":{"total_commits":10,"total_committers":1,"mean_commits":10.0,"dds":0.0,"last_synced_commit":"aa3a83ed36b223efaeba239b892fb725a8236535"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cyrus-and%2Fchrome-page-graph","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cyrus-and%2Fchrome-page-graph/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cyrus-and%2Fchrome-page-graph/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cyrus-and%2Fchrome-page-graph/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cyrus-and","download_url":"https://codeload.github.com/cyrus-and/chrome-page-graph/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251658196,"owners_count":21622819,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chrome-extension","dependency-graph","webpage"],"created_at":"2024-10-03T11:01:00.779Z","updated_at":"2025-04-30T06:46:38.501Z","avatar_url":"https://github.com/cyrus-and.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"Page Graph\n==========\n\nChrome extension to generate interactive page dependency graphs.\n\n![Demo](http://i.imgur.com/XlG8Tql.png)\n\nThe above shows the graph obtained from the [IMDb][1] home page. Live\ndemo [here][2].\n\n[1]: http://www.imdb.com/\n[2]: https://cdn.rawgit.com/cyrus-and/a1b3d6a676b3b315cec9f6f87bb972d4/raw/50d4d5d176284138540e388f32785ddb2100fff3/demo.html\n\nDescription\n------------\n\nThis PoC exploits the [`initiator`] field of the [Network.requestWillBeSent]\nevent exposed by the [Chrome Debugging Protocol] to build a *dependency graph*\nof the objects loaded by a tab during a certain time interval.\n\nEach node represents an HTTP object and it is thus identified by its URL. The\ncolor of the nodes denotes the object type: image, style sheet, etc.\n\nArrows can be interpreted as *has been loaded by* relationship, and multiple\narrows means that all the targets are responsible of the loading of the source\nnode (i.e., each element of the AJAX stack trace).\n\nWhen the same URL is requested more than once a placeholder (empty) node is\nadded and all the instances are linked back to it by dashed lines. In this case,\nonly the placeholder node can be the target of a relationship.\n\n[`initiator`]: https://chromedevtools.github.io/debugger-protocol-viewer/tot/Network/#event-requestWillBeSent\n[Network.requestWillBeSent]: https://chromedevtools.github.io/debugger-protocol-viewer/tot/Network/#event-requestWillBeSent\n[Chrome Debugging Protocol]: https://developer.chrome.com/devtools/docs/debugger-protocol\n\nSetup\n-----\n\n1. Install the dependencies locally:\n\n        cd bundle\n        npm install\n        npm run bundle\n\n2. Navigate to `chrome://extensions`, make sure that \"Developer mode\" is\n   enabled, click \"Load unpacked extension...\" and select the `extension`\n   folder,\n\nUsage\n-----\n\nClick on the extension button and follow the instructions.\n\nGraphs can be saved as standalone HTML files.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcyrus-and%2Fchrome-page-graph","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcyrus-and%2Fchrome-page-graph","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcyrus-and%2Fchrome-page-graph/lists"}