[Extension Program] 03. A useful tip for those who are new to extension program development!

I thought I wanted to make an extension, so I simply created it as an HTML file, checked it in Chrome, and corrected it, but I found out later that this was the wrong way to do it. To be precise, it was a slightly slow approach rather than a wrong one.

1. Let’s start developing in developer mode!

To develop extension programs, you can go to developer mode using ://extension on each website and check the current status. Even if you only determine the type, such as whether it is a sidebar app, with the manifest.json program, you can save time worrying unnecessarily about browser width, etc.

2. Check the API required by the extension.

Since there are a variety of APIs provided on the web, checking them in advance and using them in the development team can reduce development time, and it is fun to just look at them.

3. Comply with the website’s security policy

The development was completed, but when I tried to upload it, there were parts that were in compliance with the security policy set by Whale. Web security shouldn't be ruined by the programs we upload, right...? So, if you look at the actual contents, you can find out in detail how to fix it. However, I think if the development team knew, unnecessary time could be reduced.

First, let's rule out inline commands. In other words, there are simple parts that can be set in js, such as onclick and onchange, written inline within the tag, but these parts should be deleted. Change everything that requires commands to js settings. HTML is visible in the page source, so it would be a good idea to be careful during web development.

Connecting to a web link is blocked. There are cases where bootstrap and icons are pulled from the html layer, but this is also prohibited due to security reasons. Therefore, it is advisable to retrieve the content from the site address, create a new file, and link it to src in the program. Be careful when developing!

4. manifest icon

When developing the Whale extension, there was a part where icons were initially set by size, but I misunderstood and thought I had to create and upload multiple files with each size set. There is no need to do so, you can upload the highest quality image file and set the same size for each file. However, since a 128*128 pixel image is needed at the distribution stage, it would be good to prepare just one more.