Contributing to an Open Source Browser Extension
Tags: opensource
Published: 2021-11-20 00:35:56

## Intro

I've always wanted to try making my own browser extension and this week, I had the opportunity to contribute to a open source browser extension project called [OpenLorem](https://github.com/jure965/OpenLorem). I found OpenLorem while browsing through issues on GitHub and saw that they had several smaller issues open. In this post, I'll be talking about the issues I worked on, the difficulties I encountered, and what I learned during this process.

## Setting Up the Project

Setting up an extension for testing was surprisingly easier than I expected. After forking and cloning the repository to my computer, I could try out the extension in the following ways:

1. In **Firefox**, go to `about:debugging#/runtime/this-firefox` and click the "Load Temporary Add-on..." button. Then upload the manifest.json file.

2. In **Chrome**, go to `Settings` and then `Extensions`. In the top right, there will be a toggle switch to turn on Developer Mode, which needs to be switched on. Then click "Load unpacked" and upload the folder containing the manifest.json file. 

## The first and second issues

The first two issues were fairly simple and small fixes. The [first](https://github.com/jure965/OpenLorem/issues/27) issue was a CSS fix whereas the [second](https://github.com/jure965/OpenLorem/issues/28) issue was finding a way to safely insert HTML into the DOM.

![Contributors Before](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2gos250aqvkusq9d5kly.png)

As you can see, the CSS for the Contributors list before didn't look great. All I had to do was add a class selector to the `<ul>` tag and apply some CSS to it to remove the bullet points. 

In the HTML:

```html
<ul class="contributors-list">
```

In the CSS:

```css
.contributors-list {
    list-style-type: none;
}
```

![Contributors After](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/302q4ohzbctcxykxx1ie.png)

After the fix, the CSS looks better. 

The second issue was that a user could directly insert the generated text into the HTML via the context menu, but the innerHTML method being used was unsafe. 

![Context Menu](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qe2rh45k91qgkyi2rmz0.png)

The repo owner suggested looking into the DOMParser.parseFromString() method. I did so and I found out that this method takes in a string containing HTML or XML and returns and HTMLDocument or XMLDocument. In this case, we are working with an HTML string, so parsing it would look like

```js
let loremText = new DOMParser().parseFromString(request.text, 'text/html')
```

Then, in order to get the contents of the `<body>` tag, I did:

```js
let loremText = new DOMParser().parseFromString(request.text, 'text/html').body.childNodes;
```

Finally, in order to replace the section of HTML with these child nodes, I used the replaceChildren() function like:

```js
clickedElement.parentNode.replaceChildren(...loremText);
```

## The third issue

The third issue took a bit more time. This issue involved modifying the icon for the extension because it had black text on a transparent background and was very hard to see in dark mode. At first I thought I could just change the transparent background to white, but the owner requested that I update the SVG as well and use this file to create the icons. I have never created or modified an SVG before, but I saw that the SVG that OpenLorem is using was created using Inkscape so I downloaded this program.

Through some tutorials, I learned how to add a background, center it,  and also how to modify the shape of the background, as the owner requested rounded corners. 

```xml
<rect
       style="fill:#ffffff;stroke-width:0.937212"
       id="rect1425"
       width="354.33212"
       height="353.82001"
       x="0"
       y="698.78735"
       ry="86.73204"
       inkscape:export-xdpi="4.0640001"
       inkscape:export-ydpi="4.0640001"
       transform="matrix(0.999996,-0.0028271,0,1,0,0)" />
```

This was the bit of XML code generated after I made my changes. I made the modifications to the SVG file and exported these changes to PNG files to be used as the new icons. 

![Icon Before](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7x9priuwdo08mf7cegk4.PNG)

![Icon After](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gi0ffx6ui400t5sdaqbk.PNG)

You can see the results of these changes in the icons here. 

## Conclusion

Overall, I learned so much through contributing to this repository. I was able to work on a browser extension which is something I've never tried before and I also learned how to create SVGs and custom icons. 

Thanks for reading!