Google Chrome extension to enhance navigation for Asana tasks
- Register as a Chrome developer
- Create GitHub project
- Set up Chrome extension's content script structure
- Write base XMLHttpRequest function
- Create the icon
- Display projects on top
- Place project section selectors on top
- Display arrows to go to next/previous sibling subtasks
- Set new parent task from the toolbar
- Publish on Chrome Web Store
- Implement keyboard shortcuts to go to sibling subtasks (Tab+J/K)
- Implement keyboard shortcut to set new parent task (Tab+R)
- Display the new key combinations in Keyboard Shortcuts list
- Change Tab+K to Tab+G as it now conflicts with liking/hearting
- Display drop-down list to go to sibling subtasks
- Search for task ID when the input is an integer
- Display information such as projects and completed/incomplete
- Display undo toast on bottom left
- Write an options page to enable/disable each feature
- Search in the current open page, e.g. "search in this project"
- Use tool tips with black background
- Only update the right pane when navigating subtasks
- Create subtasks in bulk
- Convert tasks into subtasks in bulk
- Remove duplicate links and replace HTML entities in the task description
- Replace text in the task description
- Support other languages
- Implement donation page
- Install it from the Chrome Web Store
- You can also
git clonethis repository and load the folder to Google Chrome to install it as a developer - The features are automatically enabled when you are on an Asana task page. Please reload the Asana task page if this extension doesn't work well.
- Options are accessible by clicking the icon on the toolbar or by going to chrome://extensions > Asana Navigator > Details > Extension options
I was highly inspired and motivated by Amit's AsanaNG project. That extension is very nicely made. I learned a lot from him and his code. Thank you also to Hiro-san for giving me advice when I was struggling to implement the subtask dropdown feature.
- Amit's extension is for working with Asana regardless of what webpage you are on. My extension is focused on working in Asana task webpages, using content scripts and DOM methods.
- By doing so, I can implement features seamlessly using the same classes/CSS used by Asana. This involves a lot of "Inspect" actions on Asana task pages.
- I'd like to make all tools I create be customizable to each user's preference. Therefore, I created an options page where users can switch features on/off.
We don't store your data. We physically can't. (Borrowed part from here.) All communications are between you and Asana API. All options are saved to your Google Chrome, not on our servers.
I try my best to maintain the quality and safety of this extension, but please use it at your own risk. The author doesn't take any responsibility for any damage caused by use of this extension.
I'd love to hear from users and developers. Please feel free to post feature requests, bug reports, and questions through the Chrome Web Store, GitHub Issues, or my Asana project. I'd also welcome pull requests and help with translating the UI.
- Follow the style in localized UI in Asana as much as possible
- JP: Insert space between half-width character and full-width character, don't insert space between Katakana compounds, and use half-width symbols
- ES, FR, PT: Compared to EN where menu items often use capital letters such as "Add to Project (Tab+P)", these languages tend to use lower letters such as "Ajouter à un projet (Tab+P)"