{"id":15048600,"url":"https://github.com/h-yw/mp-editor","last_synced_at":"2026-01-28T19:35:53.231Z","repository":{"id":256912621,"uuid":"856758862","full_name":"h-yw/mp-editor","owner":"h-yw","description":"用markdown写微信公众号的chrome插件","archived":false,"fork":false,"pushed_at":"2024-12-01T06:05:43.000Z","size":2331,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-12T17:02:28.539Z","etag":null,"topics":["chrome-extension","markdown","markdown-editor","weixin"],"latest_commit_sha":null,"homepage":"https://hlovez.life","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/h-yw.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-09-13T06:39:32.000Z","updated_at":"2024-12-01T06:06:34.000Z","dependencies_parsed_at":"2024-09-13T21:43:55.767Z","dependency_job_id":"1c2f5639-6903-4b20-a7c1-717fb971d4a9","html_url":"https://github.com/h-yw/mp-editor","commit_stats":null,"previous_names":["h-yw/mp-editor"],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/h-yw/mp-editor","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/h-yw%2Fmp-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/h-yw%2Fmp-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/h-yw%2Fmp-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/h-yw%2Fmp-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/h-yw","download_url":"https://codeload.github.com/h-yw/mp-editor/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/h-yw%2Fmp-editor/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28850389,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-28T15:15:36.453Z","status":"ssl_error","status_checked_at":"2026-01-28T15:15:13.020Z","response_time":57,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["chrome-extension","markdown","markdown-editor","weixin"],"created_at":"2024-09-24T21:14:21.935Z","updated_at":"2026-01-28T19:35:53.214Z","avatar_url":"https://github.com/h-yw.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e\n\u003cimg height=\"256px\" src=\"docs/mp_wd.png\" /\u003e\n\u003cbr/\u003e\n\u003c/h1\u003e\n\u003ch4 align=\"center\"\u003e用Markdown写公众号文章\u003c/h4\u003e\n\n\n## 源起\n\n自己在编辑公众号文章的时候，感觉编辑文章的体验非常不友好。对于写技术文章来说，不追求花里胡哨的话，Markdown应该足够了。因此我希望能够在公众号文章编辑的时候，使用Markdown进行编辑，于是就有了这个项目。\n\n## 实现\n\n微信公众号编辑器是通过 `\u003cbody contenteditable=\"true\"\u003e\u003c/body\u003e` 实现的，因此只需向 `body` 中插入内容即可进行编辑。事实上，如果你愿意，你大可以直接在控制台向 `body` 中插入一段内容或是 `section` 包裹的复杂内容，依然可行。公众号页面子域是mp，这个插件也就叫MP Editor了哈哈哈哈哈。\n\n实践中发现，官方会对使用的 **HTML 标签** 进行过滤，具体规则不太清楚。不过，经过测试，最终能够正常使用的是 `\u003csection\u003e\u003c/section\u003e` 标签，还有其他一些基本标签。因此，在 `Markdown` 转 `HTML` 时，只需将不支持的标签替换为 `section` 即可。\n\n另外，样式使用也是一个问题。因为不可能使用样式类，只能使用行内的样式。因此，在 Markdown 转 HTML 时，需要将一个样式主题抽取为行内样式。当然，这也限制了一部分能力。还是那句话，不追求花里胡哨的话足够了，哈哈哈哈哈哈😂\n\n至此，不必在费心样式，专注内容创作即可！\n\n## 使用\n1. 下载插件(适用Microsoft Edge)[mp-editor.zip](https://github.com/h-yw/mp-editor/releases)\n2. 将插件解压后，在 `chrome://extensions/` 页面中，启用开发者模式，选择加载已解压的扩展程序，选择插件解压后的目录即可。\n![使用方式](docs/preview/use.png)\n\n## 调试\u0026构建\n\n项目是在yarn ^2.x.x 下的pnp模式构建的，低版本yarn会报错。\n\n### 调试\n\n对于不依赖于chrome extension api的内容，直接作为页面访问调试就好了。\n访问路径`localhost:5173/html/[pagename].html`\n\n```bash\nyarn dev\n```\n\n### 构建\n\n构建结果会生成在 `dist` 目录下。直接在chrome浏览器中加载dist目录即可使用。\n\n```bash\nyarn install\n\nyarn build\n```\n\n\n## 项目结构\n\n项目是一个多页面的应用。\n\n```\n- /html: 自动生成html页面入口文件\n- /src:\n  - /src/entries: 页面相关，\n    - /src/entries/[pagename].tsx: 页面入口文件，\n    - /src/entries/[pagename]/[pagename].tsx: 页面内容，\n  - /src/feature: 功能相关都在这里，\n```\n\n\n## 预览效果\n\n\u003cdiv\u003e\n\u003cimg width=\"300px\" alt=\"预览1\" src=\"docs/preview/1.png\"/\u003e\n\u003cimg width=\"300px\" alt=\"预览2\" src=\"docs/preview/2.png\"/\u003e\n\u003cimg width=\"300px\" alt=\"预览3\" src=\"docs/preview/3.png\"/\u003e\n\u003cimg width=\"300px\" alt=\"预览4\" src=\"docs/preview/4.png\"/\u003e\n\u003c/div\u003e\n\n* 打开文件\n\n\u003cimg width=\"300px\" alt=\"预览-打开\" src=\"docs/preview/open.png\"/\u003e\n\n* 保存为文件\n\n\u003cimg width=\"300px\" alt=\"预览-打开\" src=\"docs/preview/save.png\"/\u003e\n\n* 编辑模式\n\n\u003cimg width=\"300px\" alt=\"预览-打开\" src=\"docs/preview/edit.png\"/\u003e\n\n\n##  一些过程问题\n\n* yarn PnP模式报错\n\n\u003cimg width=\"300px\" alt=\"预览-打开\" src=\"docs/image.png\"/\u003e\n\n\u003e 原因我也不知道，在 `yarnrc.yml` 配置文件中加入如下配置即可。\n\n```yml:yarnrc.yml\nenableGlobalCache: false \n```\n\n* 找不到包类型报错\n\n\u003e 对于vscode来说，安装下面依赖即可。\n\n```bash\nyarn dlx @yarnpkg/sdks vscode\n```\n\n* vite + react+tailwind 样式不生效\n\n\u003e 在vite.config.ts中添加postcss插件tailwindcss\n\n```ts:vite.config.ts\nimport { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react\";\nimport tailwindcss from \"tailwindcss\"; //添加\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n  plugins: [react()],\n  css: {\n    postcss: {\n      plugins: [tailwindcss()], // 添加\n    },\n  },\n});\n```\n\n* **扩展开发过程中报错**\n  \n```\nside-panel.html: Uncaught (in promise) Error: Could not establish connection. Receiving end does not exist.\n```\n\n\u003e 刷新扩展后，页面在次刷新即可。\n\n\n## 一些用到的\n\n* [vite](https://vitejs.dev/)\n* [react](https://reactjs.org/) \n* [tailwindcss](https://tailwindcss.com/)\n* [markdown-it](https://github.com/markdown-it/markdown-it) \n* [shiki](https://github.com/shikijs/shiki)\n* [monaco-editor](https://github.com/microsoft/monaco-editor)\n* [github-markdown-css](https://github.com/sindresorhus/github-markdown-css)\n\n## 支持\n\n\u003cimg width=\"300px\" alt=\"赞赏\" src=\"docs/wechat_tip.jpg\"/\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fh-yw%2Fmp-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fh-yw%2Fmp-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fh-yw%2Fmp-editor/lists"}