{"id":19545194,"url":"https://github.com/scscms/chromeextensions","last_synced_at":"2026-06-11T02:31:05.675Z","repository":{"id":93554668,"uuid":"349379183","full_name":"scscms/chromeExtensions","owner":"scscms","description":"Extensions are software programs","archived":false,"fork":false,"pushed_at":"2021-05-13T11:36:48.000Z","size":21965,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-26T05:42:53.971Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/scscms.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":"2021-03-19T10:10:20.000Z","updated_at":"2021-05-13T11:36:51.000Z","dependencies_parsed_at":null,"dependency_job_id":"86f65b04-5899-4307-91dd-0a4d5fe9c8cb","html_url":"https://github.com/scscms/chromeExtensions","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/scscms/chromeExtensions","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scscms%2FchromeExtensions","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scscms%2FchromeExtensions/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scscms%2FchromeExtensions/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scscms%2FchromeExtensions/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/scscms","download_url":"https://codeload.github.com/scscms/chromeExtensions/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scscms%2FchromeExtensions/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34180147,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-11T02:00:06.485Z","response_time":57,"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-11-11T03:36:23.684Z","updated_at":"2026-06-11T02:31:05.660Z","avatar_url":"https://github.com/scscms.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"Chrome浏览器插件开发\u003csup\u003eshine\u003c/sup\u003e\n\n课程介绍：介绍Chrome插件功能，开发插件的基础知识\n课程目标：掌控基本的Chrome插件知识\n适合人群：前端工程师、插件爱好者\n\n#### 什么是Chrome插件\n    严格来讲，我们说的东西应该叫Chrome扩展(Chrome Extension)，真正意义上的Chrome插件是更底层的浏览器功能扩展，需要对浏览器源码有一定掌握才有能力去开发。Chrome插件的叫法只是大家已经习惯而已。\n    Chrome插件是一个用Web技术开发、用来增强浏览器功能的软件，它其实就是一个由HTML、CSS、JS、图片等资源组成的一个.crx后缀的压缩包.\n    另外，其实不只是前端技术，Chrome插件还可以配合C++编写的dll动态链接库实现一些更底层的功能(PPAPI)\n\u003eExtensions are software programs, built on web technologies (such as HTML, CSS, and JavaScript) that enable users to customize the Chrome browsing experience.\n\n####　Chrome插件能做什么\n\n增强浏览器功能，轻松实现属于自己的`定制版`浏览器，等等。Chrome插件提供了很多实用API供我们使用，包括但不限于：\n- tab控制；\n- 书签控制；\n- 下载控制；\n- 窗口控制；\n- 网络请求控制，各类事件监听；\n- 自定义原生菜单；\n- 完善的通信机制；\n- 等等；\n\n\n### Chrome扩展应用开发\n![结构](img/jg.png)\n####　Manifest文件格式\n[Manifest文件说明](base/manifest.json)\n- [示例base/hello-world-1](base/hello-world-1)\n- [示例base/hello-world-2](base/hello-world-2)\n####　Popup页面\n- [示例base/popup](base/popup)\n\npopup页面会根据内容自动显示合适的大小，建议popup页面的高度最好不要超过500像素。\n####　常驻后台\n- 示例[base/background](base/background)\n\nbackground可以包含三种属性，分别是scripts、page和persistent属性。如果指定了scripts属性，则Chrome会在扩展启动时自动创建一个包含所有指定脚本的页面；如果指定了page属性，则Chrome会将指定的HTML文件作为后台页面运行。通常我们只需要使用scripts属性即可。persistent属性表示是否一直在后台运行，默认是true。建议为false，表示扩展在后台按需运行。\n####　选项页面\n有一些扩展允许用户进行个性化设置，这样就需要向用户提供一个选项页面。Chrome通过Manifest文件\n的options_page属性为开发者提供了这样的接口，可以为扩展指定一个选项页面。\n####　i18n多语言支持\n- [示例base/getMessage](base/getMessage)\n#### 操作用户正在浏览的页面\n- [示例base/irootech](base/irootech)\n####　跨域请求\n- [示例base/translate](base/translate)\n####　扩展页面间的通信\nA、popup         chrome.extension.getViews({type:'popup'}) chrome.runtime.sendMessage chrome.runtime.connect\nB、background    chrome.extension.getBackgroundPage() chrome.extension.getViews()\nC、page js       chrome.tabs.query() window.postMessage\nD、content_scripts   chrome.runtime.sendMessage chrome.runtime.connect chrome.tabs.sendMessage\n####　储存数据\n- [示例base/storage](base/storage)\nlocalStorage\nWeb SQL Database\nchrome.storage sync和local\nfileSystem 详见《前端安全及性能培训》\n####　Browser Actions\n- [示例base/browserActions](base/browserActions)\n####　Page Actions\n- [示例base/pageActions](base/pageActions)\n####　标题和 badge\n- [示例base/icon-badge](base/icon-badge)\n####　右键菜单\n- [示例base/contextMenus](base/contextMenus)\n#### 快捷键\n- [示例base/commands](base/commands)\n####　桌面提醒 (同上)\n####　Omnibox\n- [示例base/omnibox](base/omnibox)\n\n###　管理浏览器\n\n####　Cookies\n- [示例base/cookie-clearer](base/cookie-clearer)\n####　管理扩展与应用\n- [示例base/management](base/management)\n####　标签\n- [示例base/tabs](base/tabs)\n- [OneTab](https://chrome.google.com/webstore/detail/onetab/chphlpgkkbolifaimnlloiipkdnihall?hl=zh-CN)\n####　Override Pages\n####　书签\n- [示例base/bookmark](base/bookmark)\n####　历史\n####　下载\n- [示例base/downloads](base/downloads)\n####　网络请求\n- [示例base/webRequest](base/webRequest)\n####　代理\n- [xswitch](https://github.com/yize/xswitch)\n- [SwitchyOmega](https://github.com/FelisCatus/SwitchyOmega)\n####　系统信息\n- [示例base/system](base/system)\n\n### 插件案例（广告时间）\n办公期间您想听歌吗？听歌又不想安装软件吧！那请使用 [SCSCMS音乐播放器](https://chrome.google.com/webstore/detail/scscms%E9%9F%B3%E4%B9%90%E6%92%AD%E6%94%BE%E5%99%A8/djkddblnfgendjoklmfmocaboelkmdkm) 插件吧，边写码边听歌！\n\n其他　制作Chrome主题\n- 示例[theme/theme](theme/theme)\n[在线制作主题](https://www.themebeta.com/chrome-theme-creator-online.html)\n\n###　MV3 Feature summary\n- Service workers replace background pages.\n- Network request modification is now handled with the new declarativeNetRequest API.\n- Remotely hosted code is no longer allowed; an extension can only execute JavaScript that is included within its package.\n- Promise support has been added to many methods, though callbacks are still supported as an alternative. (We will eventually support promises on all appropriate methods.)\n- A number of other, relatively minor feature changes are also introduced in MV3.\n\n####　MV2和 MV3区别\n- manifest_version版本号不一样\n- 域权限指定\n![域权限指定](img/1.png)\n- 子资源安全策略\n![子资源安全策略](img/2.png)\n- 统一的Action API\n```javascript\n// Manifest v2\n{\n    \"browser_action\": {},\n    \"page_action\":{},\n}\n// Manifest v3\n{\n    \"action\": {}\n}\n```\n- 访问资源规则\n![子资源安全策略](img/3.png)\n- 代码执行方式更安全\n```javascript\n//MV3禁止远程末经审核的代码执行。\n//MV3禁止执行任何字符串代码。\nfunction shwAlert(){}\nchrome.tabs.executeScript({\n    code: \"alert('test!')\", //MV2\n    file: \"const-script.js\", //MV3\n    function: showAlert //MV3\n})\n```\n- Background以Service Worker方式执行\n- 修改网络请求\n- 弃用部分API:\n    - chrome.extension.sendRequest()\n    - chrome.extension.onRequest\n    - chrome.extension.onRequestExternal\n    - chrome.extension.lastError\n    - chrome.extension.getURL()\n    - chrome.extension.getExtensionTabs()\n    - chrome.tabs.Tab.selected\n    - chrome.tabs.sendRequest()\n    - chrome.tabs.getSelected()\n    - chrome.tabs.getAllInWindow()\n    - chrome.tabs.onSelectionChanged\n    - chrome.tabs.onActiveChanged\n    - chrome.tabs.onHighlightChanged\n    - chrome.extension.sendMessage()\n    - chrome.extension.connect()\n    - chrome.extension.onConnect\n    - chrome.extension.onMessage\n\n\n### scscmsmusic扩展功能\n1、commands快捷键\n2、comnibox输入\n3、菜单抓取歌曲\n4、默认一首测试歌曲\n\n\ndemo:http://www.kkh86.com/it/chrome-extension-doc/extensions/samples.html\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fscscms%2Fchromeextensions","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fscscms%2Fchromeextensions","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fscscms%2Fchromeextensions/lists"}