{"id":21767960,"url":"https://github.com/mouday/chrome-search-tool","last_synced_at":"2025-04-13T15:35:46.635Z","repository":{"id":104629871,"uuid":"150693234","full_name":"mouday/chrome-search-tool","owner":"mouday","description":"a simple search tool for chrome extension","archived":false,"fork":false,"pushed_at":"2018-09-28T06:53:45.000Z","size":1838,"stargazers_count":7,"open_issues_count":0,"forks_count":1,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-03-27T06:34:33.127Z","etag":null,"topics":["chrome","chrome-extension"],"latest_commit_sha":null,"homepage":"","language":"HTML","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/mouday.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":"2018-09-28T06:06:27.000Z","updated_at":"2024-03-06T08:35:38.000Z","dependencies_parsed_at":null,"dependency_job_id":"fe5ca408-7a53-497d-b1f6-7da133cf1955","html_url":"https://github.com/mouday/chrome-search-tool","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mouday%2Fchrome-search-tool","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mouday%2Fchrome-search-tool/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mouday%2Fchrome-search-tool/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mouday%2Fchrome-search-tool/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mouday","download_url":"https://codeload.github.com/mouday/chrome-search-tool/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248737230,"owners_count":21153726,"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","chrome-extension"],"created_at":"2024-11-26T13:32:14.781Z","updated_at":"2025-04-13T15:35:46.630Z","avatar_url":"https://github.com/mouday.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 搜索引擎快捷导航\n\n使用方法 ：下载crx扩展名文件，拖入chrome应用管理界面即可\n\n## 编写一个简单的chrome插件（教程）\n\n1. 实现效果：\n\n![](images/search-tool-show.png)\n\n2. 简单理解：chrome扩展程序就是一个web应用，小型网站，只不过是在chrome上多了个快捷方式\n\n3. 必备知识(初级即可)：\n```\nhtml\ncss\njavascript\n```\n\n4. 必备工具: chrome浏览器（本次使用的版本是 69）\n\n# 第一步：初始化项目\n\n项目文件说明：\n\n```\nchrome-search-tool/\n    ├── manifest.json       # 配置文件\n    ├── popup.html          # 弹出窗口\n    ├── icon.png            # 扩展图标\n    └── images              # 静态资源文件(如images、css、js等)\n```\n\n# 第二步：编写配置文件\n\nmanifest.json\n\n```json\n{  \n  \"name\": \"searchTool\",  \n  \"manifest_version\":2,\n  \"version\": \"0.0.1\",  \n  \"description\": \"便于搜索的chrome插件\",\n  \"browser_action\": {  \n    \"default_icon\": \"icon.png\" ,\n    \"default_title\": \"搜索集合工具\",\n    \"default_popup\": \"popup.html\"\n  }  \n}\n```\n\n参数说明:\n\n1. name 插件名称  \n2. version 插件的版本号  \n3. manifest_version 指定清单文件格式的版本, 2就OK了  \n4. description 插件描述  \n5. icons 插件图标，PNG格式， 需准备三个图标文件:\n    16x16（扩展信息栏） \n    48x48（扩展管理页面） \n    128x128（用在安装过程中） \n6. default_locale 国际化支持，支持何种语言的浏览器，虽然官方推荐，不过我没用\n\n# 第三步：编写popup页面\n\n```html\n\u003cmeta charset=\"utf8\"\u003e\n\u003cbase target=\"_blank\" /\u003e\n\u003cstyle\u003e\n    .main{\n        width: 100px;\n        height: 200px;\n        font-size: 18px;\n        text-align: center;\n    }\n    a{\n        text-decoration: none;\n    }\n    .title{\n        width: 100%;\n        font-size: 20px;\n        background-color: #E8E8E8;\n    }\n    img{\n        width: 18px;\n        height: 18px;\n    }\n    .links{\n        margin-top: 5px; \n    }\n    .links a{\n        width: 100%;\n        display: block;\n        margin: 4px 0;\n        \n        color: black;\n        line-height: 25px;\n\n    }\n    .links a:hover{\n        background-color: red;\n        color: white;\n    }\n    .links img{\n        line-height: 25px;\n    }\n    .footer a{\n        font-size: 12px;\n        color: grey;\n    }\n\u003c/style\u003e  \n\n\u003cdiv class=\"main\"\u003e\n    \u003cdiv class=\"title\"\u003e搜索导航\u003c/div\u003e\n\n    \u003cdiv class=\"links\"\u003e\n        \u003ca href=\"https://www.baidu.com/\"\u003e\u003cimg src=\"images/baidu.ico\" alt=\"\"\u003e百度\u003c/a\u003e\n        \u003ca href=\"https://www.google.com.hk/\"\u003e\u003cimg src=\"images/google.ico\" alt=\"\"\u003e谷歌\u003c/a\u003e\n        \u003ca href=\"https://cn.bing.com/\"\u003e\u003cimg src=\"images/bing.ico\" alt=\"\"\u003e必应\u003c/a\u003e\n        \u003ca href=\"https://www.sogou.com/\"\u003e\u003cimg src=\"images/sogou.ico\" alt=\"\"\u003e搜狗\u003c/a\u003e\n        \u003ca href=\"https://www.so.com/\"\u003e\u003cimg src=\"images/so.ico\" alt=\"\"\u003e360\u003c/a\u003e\n    \u003c/div\u003e \n    \u003cdiv class=\"footer\"\u003e\n        \u003ca href=\"https://www.pengshiyu.com/message.html\"\u003e问题反馈\u003c/a\u003e\n    \u003c/div\u003e\n\n\u003c/div\u003e\n```\n\n其实就是html + css + javascript\n\n备注：如果出现中文乱码，记得在文件顶部加入`\u003cmeta charset=\"utf8\"\u003e`，此方法和html编码是一样的，没有什么特别之处\n\n\n# 第四步：配置图标\n\n可以百度图片上找一张方块图片，最好找png格式的  \n\n对于简单的尺寸大小的裁剪，可以到这个网址处理：http://www.gaitubao.com/\n\n\n# 第五步：打包安装扩展程序\n打开Chrome –\u003e 更多工具 –\u003e 扩展程序 -\u003e 打开“开发者模式” \n\n有两个方法：\n1. 加载已解压的扩展程序 -\u003e 将文件夹`chrome-search-tool` 拖入就行（多用于调试，修改文件后刷新即可）\n2. 打包扩展程序 -\u003e 选择打包扩展程序文件夹的路径 -\u003e 生成crx扩展名的文件 -\u003e 拖入chrome\n\n![](images/extensions.png)\n\n\n\u003e参考文章:\n\u003e[编写一个简单的chrome插件](https://blog.csdn.net/lilian1131/article/details/79171125)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmouday%2Fchrome-search-tool","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmouday%2Fchrome-search-tool","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmouday%2Fchrome-search-tool/lists"}