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. 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:
In Firefox, go to
about:debugging#/runtime/this-firefoxand click the "Load Temporary Add-on..." button. Then upload the manifest.json file.In Chrome, go to
Settingsand thenExtensions. 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.
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">
In the CSS:
.contributors-list {
list-style-type: none;
}
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.
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')
Then, in order to get the contents of the <body> tag, I did:
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:
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.
<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.
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!
Top comments (0)