An Invitation to the World of Chrome Extensions

English Forum Tips and Tricks Forum Leaders tips
,
1
Table of contents:

I’m one of the laziest people on the planet. I have looked for and created various Chrome extensions for efficiency. In this topic, I gathered some recommended extensions and how to create one :star_struck:

Using extensions

Recommended for everyone

Asana

Quickly add Asana tasks from your idea or a web page you are on. It’s very important for any tool that the input process is easy!

Asana Expander

Automatically clicks “See More” in long comments in the task pane. I’d also recommend using the bookmarklet 2-1-2. :arrow_up_down: Expand comments together with Asana Expander.

Asana Load More

Automatically clicks “See More Subtasks” for a long list of subtasks in the task pane.
Only 20 subtasks are loaded by default, so it’s a great and smooth time-saving.
The extension was hidden from the web store because it hasn’t migrated to Manifest V3*. New users need to manually install the code from GitHub to the browser now (See “Manual import” section).

Office Editing for Docs, Sheets & Slides

Open and preview Word, Excel, and PowerPoint attachments directly in a browser tab. No need to download them from the browser and open another program such as Word.

Recommended based on needs

Asana2Go

Report, export, and print Asana data in various ways and formats.

There are so many other interesting Asana extensions on the Chrome web store, but I’m skipping them for now. Some aren’t updated for a long time and do not work.

Stylish

Search for CSS styles for Asana or write your custom CSS. If you want to customize the color or design of Asana, other people on the globe might be feeling the same!

Not recommended or attention is needed

AdBlock

This might be the most popular Chrome extension in the world. It hides ads on web pages.
It’s not a problem to install it, but Asana app (app.asana.com) and other Asana websites (e.g. asana.com/guide) might not work correctly, so it’s recommended to allow (exclude) those Asana URLs.

Asana Navigator

This adds some enhanced navigation to Asana.
It directly manipulates UI DOM (HTML codes), so most of the features currently don’t work due to changes in Asana UI. I added too many nice-to-haves that I cannot manage.
I’ll restart it as a simpler version with limited features.

Asana Batch

I aim to register multiple members as groups so that we can add them to task collaborators in a batch.
Currently, it only has the feature to copy collaborators from one task to another.
The feature is hotly requested in the forum, so I hope Asana implements it soon. I’ll work on the project when I have time.

Installation

Chrome Web Store

See Chrome’s official guide for the steps to install extensions.
If the extension is run by clicking the icon or it displays information on the icon, it’s recommended to pin the icon to the toolbar after installation.

Manual import

:warning: It’s recommended to only install reliable extensions created by reliable people.
We can manually import extensions that are not distributed in the Chrome web store and privately created/shared extensions.
Download a zipped folder from GitHub, unzip it, and load it from chrome://extensions with the developer mode enabled.
For example, Asana Load More Zip file is available from the GitHub repository.

Download from GitHub, Manually install
Download from GitHub, Manually install2126×762 115 KB

Other browsers

  • Some browsers, including Edge and Brave, support direct install extensions from the Chrome web store.
  • (For developers) Chrome extensions can be published in the Firefox store with slight changes (e.g. changing the scope to zip).

Creating extensions

What we can do

In Introduction to Asana bookmarklets, I categorized some types of development:

Table 4.1 from bookmarklet topic-en
Table 4.1 from bookmarklet topic-en1652×1456 379 KB

Chrome extensions are the easiest way to fully utilize Asana API (including POST/PUT/DELETE requests), because PAT is not required and there are plenty of templates on the internet.
Some automation (e.g., doing something when the web page is loaded) is more powerful and useful compared with bookmarklets that need a click. We can also define keyboard shortcuts.

Guides

Basically, you’ll reference Google’s official documentation and Asana API document and check some samples when you create Chrome extensions.

Key components

  • manifest.json: The overview and settings of the extension.
  • popup (action): The displayed window and the triggered actions when clicking the extension icon.
  • content_scripts: Manipulations on the contents and elements in the web page.
  • background: Communication with Asana API. popup and content_scripts cannot directly make API calls due to security reasons, so they need to exchange messages with background.
  • options: Options that are customizable by the users.

Extension samples

Let’s start small from writing the basic core logic. It’s often easier to reference existing extensions and only rewrite necessary parts than writing everything from scratch.

GitHub

We can download codes with zipping, git clone, or fork.
Both of the following support Manifest V3, are written in pure (vanilla) JavaScript, by myself.

Local source code

Even if the source code is not public on GitHub, the source code is saved to your computer, and you can reference it once we install the extensions from the Chrome store.
For detailed information, search the web with keywords such as “Chrome extensions PC/Mac save location.”

Things to note

Licenses

When reusing open source codes, we need to respect license files, if any (e.g., MIT LICENSE).
You don’t need to worry about that when reusing my code unless you are not using almost all of it unchanged.

*Manifest V2/V3

Due to security and performance reasons, there was a major update to Chrome extension versions, and V3 was recently made a requirement.
When you reference Manifest V2 codes, there are some changes you need to make.

DOM operations

Roughly speaking, extensions work with two things: Asana API and DOM (HTML) elements.
DOM changes with Asana’s updates and redesigns, so the code will need a lot of maintenance. Think about ways to write robust codes using Asana API whenever applicable.

Example: operation to task description
It’s technically possible to directly get/operate the task description text with functions like document.querySelector. We need to write content_scripts.
In the long run, it’s more robust to get the task ID from the page URL (window.location.href) and send a PUT request to Asana API.

AI

I tried ChatGPT to generate the source code of chrome extension. It helped, but some of the code was not working, e.g. trying to access the page contents with chrome.tabs (which only has access to page title and URL), not using content_scripts. We need some knowledge to judge and adjust the generated code.

Distribution

As in the “Installation” section, there are two options:

  • Publishing on the Chrome web store (choose from public, unlisted, and private)
  • Zip and share the folder

Wrap-up

Were there extensions that you want to try, or you want to create?
If you build an extension, I’d invite you to publish it on the web store and let the world know by posting in the forum!
I hope this topic helps!

8 Likes
2

Another remarkable, helpful, comprehensive post from the great @ShunS; Bravo!

Shun has done a great job listing, toward the start of the post, a few key extensions that you can install in just a few seconds and begin using, and he’s categorized them nicely. This is of interest to anyone; you certainly don’t need to be a developer. (And thanks for including my Asana2Go in the list!)

The rest of the post is just for those willing to try developing code, and Shun has again done an admirable job in creating this friendly yet thorough introduction to the topic.

Thanks, Shun!

Larry

3 Likes
3

Thank you @lpb for sending the feedback and summarizing the long topic! :sparkles:

1 Like