DEV Community

Leyang Yu
Leyang Yu

Posted on

Contributing to an Open Source Browser Extension


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. 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 issue was a CSS fix whereas the second issue was finding a way to safely insert HTML into the DOM.

Contributors Before

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:

<ul class="contributors-list">
Enter fullscreen mode Exit fullscreen mode

In the CSS:

.contributors-list {
    list-style-type: none;
Enter fullscreen mode Exit fullscreen mode

Contributors After

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

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

let loremText = new DOMParser().parseFromString(request.text, 'text/html')
Enter fullscreen mode Exit fullscreen mode

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

let loremText = new DOMParser().parseFromString(request.text, 'text/html').body.childNodes;
Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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.

       transform="matrix(0.999996,-0.0028271,0,1,0,0)" />
Enter fullscreen mode Exit fullscreen mode

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

Icon After

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


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!

Top comments (0)