DEV Community

Cassey Lottman
Cassey Lottman

Posted on • Originally published at cassey.dev

2

Opening a new window from a Firefox Add-On

Last year, I made my first couple browser extensions! Both were built to solve immediate needs I have: one to go between the various representations of a Glitch project (the project page at glitch.com/~projectname, the editor, and the running code at projectname.glitch.me), and one to add things to my Pinboard bookmarks.

The code that opens the Add to Pinboard page originated as code for a bookmarklet, provided by Pinboard, but I like extensions better. Bookmarklets show up in my browser's Bookmarks toolbar, which I usually keep hidden. Extensions show up right next to the address bar, in a single line.

I use my Pinboard extension pretty regularly1, in both Chrome and Firefox as an Add-On. But my Firefox version was annoying: when I clicked the extension, I'd see a little warning that a popup had been blocked, and would I like to allow it to be opened anyways? Yes, I would, every time. But the only options available in the little menu were to always allow popups on whatever site I was trying to save, or allow it just this once. That wasn't great- I might want to allow my Pinboard add-on to open a popup so I can save a link to a cute dress in an online shopping website, but I wouldn't want that shopping site to start sending me its own popups.

How can I allow my extension to always open a popup window in Firefox?

The answer turned out to be something I needed to change in code.

Previously, my extension used the exact same code as the bookmarklet, which called open('https://example.com') to open the new tab.

If I changed my tab-opening code to use the APIs that exist especially for browser extensions, the popup would not be blocked.

chrome.tabs.create({ url: 'https://example.com' });

You can see the full source code for my extension on Glitch.

Thanks to these friends in a Mozilla forum question in 2018 for pointing me in the right direction!

Addendum

  1. Judging by the active user stats, I am probably the only person using my extension, albeit from two different computers. I agree with Robin Sloan that an app can be a home-cooked meal.

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay