{"id":15021383,"url":"https://github.com/midori-profile/sourcecode-seeker","last_synced_at":"2025-08-20T22:31:15.078Z","repository":{"id":231878224,"uuid":"781955943","full_name":"midori-profile/sourcecode-seeker","owner":"midori-profile","description":"This is a development tool that supports one-click navigation from web components to the source code and supports both React and Vue.","archived":false,"fork":false,"pushed_at":"2024-06-24T13:03:26.000Z","size":1689,"stargazers_count":49,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-12-06T15:12:54.390Z","etag":null,"topics":["babel","chrome","development-efficiency","react","source-code-analysis","vuejs"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/midori-profile.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":"2024-04-04T11:10:27.000Z","updated_at":"2024-07-11T09:29:23.000Z","dependencies_parsed_at":"2024-06-23T14:56:10.136Z","dependency_job_id":"f6fbffad-9cb6-433d-be48-317260e37386","html_url":"https://github.com/midori-profile/sourcecode-seeker","commit_stats":{"total_commits":7,"total_committers":3,"mean_commits":"2.3333333333333335","dds":0.4285714285714286,"last_synced_commit":"7bb7799d6f3846e23a199691006aa79d14143126"},"previous_names":["midori-profile/sourcecode-seeker"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/midori-profile%2Fsourcecode-seeker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/midori-profile%2Fsourcecode-seeker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/midori-profile%2Fsourcecode-seeker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/midori-profile%2Fsourcecode-seeker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/midori-profile","download_url":"https://codeload.github.com/midori-profile/sourcecode-seeker/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230462906,"owners_count":18229864,"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":["babel","chrome","development-efficiency","react","source-code-analysis","vuejs"],"created_at":"2024-09-24T19:56:31.200Z","updated_at":"2024-12-19T16:10:57.326Z","avatar_url":"https://github.com/midori-profile.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cimg src=\"./readme/code-seek.svg\" width=\"300\" alt=\"GraphQL Easy Mock\"\u003e\n\n**Code Seek** is a frontend development tool that allows you to locate your component's source code with a single click from the browser. It currently supports React, and will support Vue soon.\n\n# Installation\n\nThe plugin has not been published to the application market yet. You can import the `dist` package from the root directory of this repository into your Chrome extension.\n\nFollow these steps:\n\n1. Click on the Chrome plugin button and then click on \"Manage extensions\".\n\n\u003cimg src=\"./readme/readme-1.jpg\" width=\"400\" alt=\"Manage Extensions\"\u003e\n\n2. Click \"Enable developer mode\" in the top right corner.\n\n\u003cimg src=\"./readme/readme-2.jpg\" width=\"200\" alt=\"Enable Developer Mode\"\u003e\n\n3. Click \"Load unpacked\".\n\n\u003cimg src=\"./readme/readme-3.jpg\" width=\"200\" alt=\"Load Unpacked\"\u003e\n\n4. Import the `dist` package from the root directory of this repository.\n\n\u003cimg src=\"./readme/readme-4.jpg\" width=\"400\" alt=\"Import Dist Package\"\u003e\n\n5. The plugin has been successfully installed in your Chrome browser.\n\n\u003cimg src=\"./readme/readme-5.jpg\" width=\"400\" alt=\"Plugin Installed\"\u003e\n\n# How to Use\n\nBabel configuration reference: [`.babelrc`](https://github.com/midori-profile/sourcecode-seeker/blob/master/example/react/.babelrc)\n\nThis configuration allows you to use the latest JS, JSX, and TS features:\n```json\n{\n  \"presets\": [\n    [\"@babel/preset-env\", { \"targets\": \"defaults\" }],\n    [\"@babel/preset-react\", { \"development\": true }],\n    \"@babel/preset-typescript\"\n  ]\n}\n```\n\nIn your Webpack configuration, the `devtool: \"source-map\"` option enables Webpack to generate source maps. Refer to this file: [webpack.config.js](https://github.com/midori-profile/sourcecode-seeker/blob/master/example/react/webpack.config.js).\n\nThen, enable the Source Code Seeker:\n\n\u003cimg src=\"./readme/readme-9.jpg\" width=\"400\" alt=\"Enable Source Code Seeker\"\u003e\n\nOpen the Inspector (this step is crucial):\n\n\u003cimg src=\"./readme/readme-6.jpg\" width=\"600\" alt=\"Open Inspector\"\u003e\n\nOption/Alt-click the component you want to locate:\n\n\u003cimg src=\"./readme/readme-7.jpg\" width=\"400\" alt=\"Option/Alt-click Component\"\u003e\n\nYou will be directed to the source code:\n\n\u003cimg src=\"./readme/readme-8.jpg\" width=\"400\" alt=\"Locate Source Code\"\u003e\n\n# Exploring\n\nI have provided an example for you to experience the plugin's features:\n\n```sh\ncd example/react\npnpm install\npnpm start\n```\n\n# Planned Features\n\n1. **Vue Support**: Currently under development and will be added soon.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmidori-profile%2Fsourcecode-seeker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmidori-profile%2Fsourcecode-seeker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmidori-profile%2Fsourcecode-seeker/lists"}