如何为Toggl Track浏览器扩展创建自定义集成从GitHub到Jira的完整教程【免费下载链接】track-extensionToggl Track browser extension for Chrome and Firefox项目地址: https://gitcode.com/gh_mirrors/tr/track-extensionToggl Track浏览器扩展是一款强大的时间追踪工具通过自定义集成功能你可以为任何网站添加一键计时功能。本教程将详细介绍如何为GitHub和Jira等项目管理工具创建自定义集成让你在开发工作中实现无缝时间追踪。 准备工作启用开发模式在开始创建自定义集成之前首先需要在Toggl Track扩展中启用开发模式打开浏览器扩展设置页面导航到Integrations集成标签页找到Custom Integrations自定义集成部分启用Enable development mode启用开发模式开关启用开发模式后你就可以开始创建自己的集成脚本了。请注意开发模式会显示安全提示Proceed at your own risk!这意味着你需要对自定义代码负责。 创建GitHub集成脚本GitHub是开发者最常用的代码托管平台为GitHub创建自定义集成可以让你在查看Issues和Pull Requests时直接开始计时。基本集成结构每个Toggl Track集成脚本都有标准的结构/** * name Github * urlAlias github.com * urlRegex *://github.com/* */ use strict // 集成代码逻辑关键API函数Toggl Track扩展提供了两个核心API函数togglbutton.render()- 在页面特定位置渲染计时按钮togglbutton.createTimerLink()- 创建计时器链接实际GitHub集成示例查看现有的GitHub集成脚本 src/content/github.js可以看到它是如何处理GitHub页面的Issue页面在侧边栏添加计时按钮Pull Request页面类似的处理逻辑项目选择自动从页面提取项目名称描述生成组合Issue编号和标题作为计时描述 创建Jira集成脚本Jira是广泛使用的项目管理工具为Jira创建集成可以帮助团队更好地追踪任务时间。Jira集成特点Jira的集成需要考虑多个界面版本Jira 2017版本- 旧版界面支持Jira 2020版本- 新版界面适配SPA单页应用处理- 动态内容加载Jira集成代码示例查看现有的Atlassian/Jira集成脚本 src/content/atlassian.js可以看到针对不同Jira版本的处理// Jira 2017看板侧边栏 togglbutton.render( #ghx-detail-view [spacing] h1:not(.toggl), { observe: true }, function () { // 提取Issue信息 const titleElem $([spacing] h1, rootElem) const numElem $([spacing] a, rootElem) const projectElem $(.bgdPDV) // 创建计时链接 const link togglbutton.createTimerLink({ className: jira2017, description: description, buttonType: minimal, projectName: projectElem projectElem.textContent, }) } )️ 自定义集成开发流程1. 创建新集成点击Add integration按钮弹出新建集成对话框2. 配置集成参数在对话框中填写以下信息Name集成名称如TwitterOrigin网站域名如twitter.com代码区域编写集成逻辑3. 测试集成效果保存集成后访问目标网站查看效果4. 调试自定义集成使用浏览器开发者工具调试集成代码 集成管理功能自定义集成列表启用开发模式后你可以看到所有自定义集成集成操作选项每个集成都支持以下操作Export导出集成配置Duplicate复制集成Edit编辑集成代码Delete删除集成自定义URL配置如果你的服务使用自定义域名可以在这里配置 调试技巧和最佳实践调试工具使用控制台日志使用console.log()输出调试信息断点调试在代码中添加debugger;语句元素检查使用开发者工具检查DOM元素常见问题解决按钮不显示检查CSS选择器是否正确描述提取失败确认页面元素结构项目名称获取验证项目选择器性能优化建议使用observe选项处理动态加载的内容避免重复渲染检查按钮是否已存在错误处理添加try-catch块捕获异常 项目结构和文件组织Toggl Track扩展的集成代码组织在 src/content/ 目录下预设集成如 src/content/github.js、src/content/atlassian.js自定义示例src/content/_custom_SampleScript.js社区贡献各种第三方服务集成 高级集成技巧处理单页应用SPA对于使用React、Vue等框架的单页应用需要使用observe: true选项togglbutton.render( #dynamic-content:not(.toggl), { observe: true }, function (elem) { // 处理动态内容 } )异步数据提取当需要等待异步数据加载时可以使用Promiseconst getPaneDescription async (elem) { return new Promise((resolve) { const description setInterval(() { const titleElem elem.querySelector(#some-element) if (!!titleElem.textContent) { clearInterval(description) resolve(titleElem.textContent.trim()) } }, 1000) }) }样式自定义可以通过CSS样式调整按钮外观const link togglbutton.createTimerLink({ className: custom-style, description: description, projectName: projectName, }) link.style.marginLeft 15px link.style.backgroundColor #e2453c 导出和分享集成完成集成开发后可以导出配置分享给团队导出的集成配置可以备份到版本控制系统分享给团队成员在不同浏览器间同步 总结通过本教程你已经学会了如何为Toggl Track浏览器扩展创建自定义集成。从启用开发模式到编写集成代码从调试到管理整个过程都提供了完整的解决方案。无论你是要为GitHub、Jira还是其他任何网站创建集成Toggl Track扩展的灵活架构都能满足你的需求。记住好的时间管理从好的工具开始而好的工具需要好的定制开始创建你的第一个自定义集成让时间追踪变得更加高效和自动化吧 【免费下载链接】track-extensionToggl Track browser extension for Chrome and Firefox项目地址: https://gitcode.com/gh_mirrors/tr/track-extension创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
如何为Toggl Track浏览器扩展创建自定义集成：从GitHub到Jira的完整教程
如何为Toggl Track浏览器扩展创建自定义集成从GitHub到Jira的完整教程【免费下载链接】track-extensionToggl Track browser extension for Chrome and Firefox项目地址: https://gitcode.com/gh_mirrors/tr/track-extensionToggl Track浏览器扩展是一款强大的时间追踪工具通过自定义集成功能你可以为任何网站添加一键计时功能。本教程将详细介绍如何为GitHub和Jira等项目管理工具创建自定义集成让你在开发工作中实现无缝时间追踪。 准备工作启用开发模式在开始创建自定义集成之前首先需要在Toggl Track扩展中启用开发模式打开浏览器扩展设置页面导航到Integrations集成标签页找到Custom Integrations自定义集成部分启用Enable development mode启用开发模式开关启用开发模式后你就可以开始创建自己的集成脚本了。请注意开发模式会显示安全提示Proceed at your own risk!这意味着你需要对自定义代码负责。 创建GitHub集成脚本GitHub是开发者最常用的代码托管平台为GitHub创建自定义集成可以让你在查看Issues和Pull Requests时直接开始计时。基本集成结构每个Toggl Track集成脚本都有标准的结构/** * name Github * urlAlias github.com * urlRegex *://github.com/* */ use strict // 集成代码逻辑关键API函数Toggl Track扩展提供了两个核心API函数togglbutton.render()- 在页面特定位置渲染计时按钮togglbutton.createTimerLink()- 创建计时器链接实际GitHub集成示例查看现有的GitHub集成脚本 src/content/github.js可以看到它是如何处理GitHub页面的Issue页面在侧边栏添加计时按钮Pull Request页面类似的处理逻辑项目选择自动从页面提取项目名称描述生成组合Issue编号和标题作为计时描述 创建Jira集成脚本Jira是广泛使用的项目管理工具为Jira创建集成可以帮助团队更好地追踪任务时间。Jira集成特点Jira的集成需要考虑多个界面版本Jira 2017版本- 旧版界面支持Jira 2020版本- 新版界面适配SPA单页应用处理- 动态内容加载Jira集成代码示例查看现有的Atlassian/Jira集成脚本 src/content/atlassian.js可以看到针对不同Jira版本的处理// Jira 2017看板侧边栏 togglbutton.render( #ghx-detail-view [spacing] h1:not(.toggl), { observe: true }, function () { // 提取Issue信息 const titleElem $([spacing] h1, rootElem) const numElem $([spacing] a, rootElem) const projectElem $(.bgdPDV) // 创建计时链接 const link togglbutton.createTimerLink({ className: jira2017, description: description, buttonType: minimal, projectName: projectElem projectElem.textContent, }) } )️ 自定义集成开发流程1. 创建新集成点击Add integration按钮弹出新建集成对话框2. 配置集成参数在对话框中填写以下信息Name集成名称如TwitterOrigin网站域名如twitter.com代码区域编写集成逻辑3. 测试集成效果保存集成后访问目标网站查看效果4. 调试自定义集成使用浏览器开发者工具调试集成代码 集成管理功能自定义集成列表启用开发模式后你可以看到所有自定义集成集成操作选项每个集成都支持以下操作Export导出集成配置Duplicate复制集成Edit编辑集成代码Delete删除集成自定义URL配置如果你的服务使用自定义域名可以在这里配置 调试技巧和最佳实践调试工具使用控制台日志使用console.log()输出调试信息断点调试在代码中添加debugger;语句元素检查使用开发者工具检查DOM元素常见问题解决按钮不显示检查CSS选择器是否正确描述提取失败确认页面元素结构项目名称获取验证项目选择器性能优化建议使用observe选项处理动态加载的内容避免重复渲染检查按钮是否已存在错误处理添加try-catch块捕获异常 项目结构和文件组织Toggl Track扩展的集成代码组织在 src/content/ 目录下预设集成如 src/content/github.js、src/content/atlassian.js自定义示例src/content/_custom_SampleScript.js社区贡献各种第三方服务集成 高级集成技巧处理单页应用SPA对于使用React、Vue等框架的单页应用需要使用observe: true选项togglbutton.render( #dynamic-content:not(.toggl), { observe: true }, function (elem) { // 处理动态内容 } )异步数据提取当需要等待异步数据加载时可以使用Promiseconst getPaneDescription async (elem) { return new Promise((resolve) { const description setInterval(() { const titleElem elem.querySelector(#some-element) if (!!titleElem.textContent) { clearInterval(description) resolve(titleElem.textContent.trim()) } }, 1000) }) }样式自定义可以通过CSS样式调整按钮外观const link togglbutton.createTimerLink({ className: custom-style, description: description, projectName: projectName, }) link.style.marginLeft 15px link.style.backgroundColor #e2453c 导出和分享集成完成集成开发后可以导出配置分享给团队导出的集成配置可以备份到版本控制系统分享给团队成员在不同浏览器间同步 总结通过本教程你已经学会了如何为Toggl Track浏览器扩展创建自定义集成。从启用开发模式到编写集成代码从调试到管理整个过程都提供了完整的解决方案。无论你是要为GitHub、Jira还是其他任何网站创建集成Toggl Track扩展的灵活架构都能满足你的需求。记住好的时间管理从好的工具开始而好的工具需要好的定制开始创建你的第一个自定义集成让时间追踪变得更加高效和自动化吧 【免费下载链接】track-extensionToggl Track browser extension for Chrome and Firefox项目地址: https://gitcode.com/gh_mirrors/tr/track-extension创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
