{"id":18057537,"url":"https://github.com/voghdev/jseventcapture","last_synced_at":"2025-07-24T12:03:01.846Z","repository":{"id":89774064,"uuid":"207304537","full_name":"voghDev/JSEventCapture","owner":"voghDev","description":"Android sample project to capture click on a WebView Button through Javascript","archived":false,"fork":false,"pushed_at":"2019-09-25T07:14:07.000Z","size":158,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-05T10:28:11.343Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Kotlin","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/voghDev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2019-09-09T12:32:57.000Z","updated_at":"2021-08-10T08:30:18.000Z","dependencies_parsed_at":null,"dependency_job_id":"2fd0094b-7ae3-4cf1-81b5-dcdf91b43d4a","html_url":"https://github.com/voghDev/JSEventCapture","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/voghDev/JSEventCapture","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/voghDev%2FJSEventCapture","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/voghDev%2FJSEventCapture/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/voghDev%2FJSEventCapture/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/voghDev%2FJSEventCapture/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/voghDev","download_url":"https://codeload.github.com/voghDev/JSEventCapture/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/voghDev%2FJSEventCapture/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266839307,"owners_count":23993070,"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","status":"online","status_checked_at":"2025-07-24T02:00:09.469Z","response_time":99,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2024-10-31T02:08:12.861Z","updated_at":"2025-07-24T12:03:01.791Z","avatar_url":"https://github.com/voghDev.png","language":"Kotlin","funding_links":[],"categories":[],"sub_categories":[],"readme":"# JavaScript button click capture example\n\nThis project is an example that shows a way to handle clicks in a JavaScript button placed inside a `WebView`, through our Android native App.\nIt will be done using a `@JavascriptInterface`\n\n## Example 1: When you have access to the HTML code inside the `WebView`\n\nIn this case we are providing the HTML code that will be displayed in the `WebView`\n\n    private val data = \"\"\"\n    \u003cscript language=\"javascript\" type=\"text/javascript\"\u003e\n        function handleButtonClick() {\n            alert('[JS] Button was clicked');\n            androidButton.onCapturedButtonClicked(); // \u003c-- This is the key line of code\n        }\n    \u003c/script\u003e\n\n    \u003cbutton type='button' id='someButton' onclick='handleButtonClick();'\u003eClick me\u003c/button\u003e\n    \"\"\"\n\nAs you see, we are referring an object called `androidButton`. To make this object exist inside the `WebView`, we need to add a `@JavascriptInterface`\n\n    webView.settings.javaScriptEnabled = true\n    webView.webChromeClient = WebChromeClient()\n    webView.addJavascriptInterface(CaptureClickJavascriptInterface(), \"androidButton\")\n    webView.loadData(data, \"text/html\", \"UTF-8\")\n\n    private inner class CaptureClickJavascriptInterface {\n        @JavascriptInterface\n        fun onCapturedButtonClicked() {\n            showClickMessage()\n        }\n    }\n\nOnce this is executed, we can refer to `androidButton` and its `onCapturedButtonClick` method inside the JavaScript code\n\n## Example 2: When you don't have access to the HTML code rendered in the WebView\n\nIn this case you need to know the identifier of the button whose click you are capturing.\n\n    \u003cbutton type='button' id='someButton'\u003eClick me\u003c/button\u003e\n\n\nIn this case, the way to capture the event will be by injecting JavaScript code in the button's onClick method\nafter the page load is finished, so we need to define a custom WebViewClient class\n\n    val injectedFunction = \"\"\"\n        javascript:(function() {\n            window.someButton.onclick = function() {\n                alert('Button Clicked');\n                androidButton.onCapturedButtonClicked();\n            }\n        })()\n    \"\"\"\n\n    private val webViewClient = object : WebViewClient() {\n        override fun onPageFinished(view: WebView?, url: String?) {\n            super.onPageFinished(view, url)\n\n            view?.let {\n                it.loadUrl(injectedFunction)\n            }\n        }\n    }\n\nAs you can see in the sample code, `androidButton` is again referred, so we need to create the @JavascriptInterface\n\n    webView.addJavascriptInterface(CaptureClickJavascriptInterface(), \"androidButton\")\n\n    private inner class CaptureClickJavascriptInterface {\n        @JavascriptInterface\n        fun onCapturedButtonClicked() {\n            showClickMessage()\n        }\n    }\n\nThen making sure our `WebViewClient` is used when loading the content into the WebView\n\n    webView.settings.javaScriptEnabled = true\n    webView.webChromeClient = WebChromeClient()\n    webView.webViewClient = webViewClient\n    webView.addJavascriptInterface(CaptureClickJavascriptInterface(), \"androidButton\")\n    webView.loadData(data, \"text/html\", \"UTF-8\") // This could also be webView.loadUrl()\n\nRefer to [this commit](https://github.com/voghDev/JSEventCapture/blob/modify_onClick_behaviour/app/src/main/java/dk/gomore/jseventcapture/MainActivity.kt) for a working version of this example","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvoghdev%2Fjseventcapture","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvoghdev%2Fjseventcapture","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvoghdev%2Fjseventcapture/lists"}