Small contributions may have more importance than you realize
Tags: opensource, javascript, beginners, programming
Published: 2021-12-15 04:45:35

Small contributions are still meaningful on your road to becoming a good programmer (I believe!). I couldn't make my 4th Pull Request during the Hacktoberfest but I didn't want to give up, and also I was frustrated by not making it.
I tried to find an issue with medium difficulty, but it was very hard for me. When I was searching issues, I found a repo about Japanese translation.

## Issue
The project is a Google Chrome extension to create guidelines on websites. I don't use any extensions, so I thought it was interesting to contribute to something new to me, and a good opportunity to see the project files to create an extension.

## What I did
I added `ja` file under `_locales` folder and Japanese translations for all strings that are indexed by `"message"`.
![code image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1mcgs5wr1yuqbcejnom9.png)
I tried to think from users' stand point and used proper Japanese. As you might think, it was kind of easy, but translating `Donation link` was tricky. In Japanese culture, "donation" or "tip" are not very common, and if we give donation/tip, we wrap money in a certain way and use an envelope to someone who provides good service.

## What I learned
As I mentioned it was pretty easy, so I wanted to learn something with this contribution. Therefore, I decided to search about how to build a Google Chrome extension.
Firstly, I checked the [official site](https://developer.chrome.com/docs/extensions/mv3/overview/). It says "extensions are software programs, built on web technologies (such as HTML, CSS, and JavaScript) that enable users to customize the Chrome browsing experience". It requires `manifest.json`, and the file needs to be specified background scripts, content scripts, an options page, UI elements and various logic files like this project did. 
![Imanigest.json](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p4c9y5jcsiz1wasw1fxy.png)
Inside the **background script**, it has to be declared `onInstalled` listener and it calls when the user clicks on the browser action.
**Content scripts** are files that run in the context of web pages. You can use the standard Document Object Model (DOM) to read the details of web pages accessed by browsers, make changes, and pass information to parent extensions.(The project used it calls `inject.js`)
**Browser actions** are buttons on the toolbar of the browser.
If you specify a popup, the popup is displayed and the content is loaded when the user clicks the icon.
Extensions can include various forms of **user interfaces(UI)**. UI uses a popup, so create a file named `popup.html` and add it to the extension's directory.

## Conclusion
I made this contribution as a part of my assignment and to make up for the missed Hacktoberfest. I filed an issue and asked to be assigned to it, but I was only able to make a pull request for this project.
It didn't use technical knowledge as a programmer, but it did achieve its goal in terms of contributing to an open source project and learning something new from it.

## :link:Links
Project: [pageliner](https://github.com/Crease29/pageliner)
Issue: [Issue20](https://github.com/Crease29/pageliner/issues/20)
PR: [PR31](https://github.com/Crease29/pageliner/pull/31)

(Photo by Daniel Cheung on Unsplash)