A browser extension for Code Self Study (Firefox, Chrome)

At the meetup today, I wrote a quick Firefox & Chrome extension that makes it easy to share webpages to the forum. Just highlight some text on the page, click the icon, and then “Share Current Page”. That will start a forum draft here in the forum. You can edit the draft before publishing it.

Firefox version:

Chrome version:

It should work in Chrome/Chromium too, but there was a bug that I didn’t have time to fix before the meetup ended. If anyone wants to try to add Chrome support, the code is here, with some notes in the README file.

Update: it works in Chrome now.

Here’s the source code:

The extension also has links to the main resources for the group.

It’s just JavaScript, HTML, and CSS, and people are welcome to add new features.

If anyone has ideas for more features that might be useful or interesting, post them below. There is an (undeveloped) settings page in the repo that could be used to add fun, optional features.

1 Like

If anyone tried to download the Chrome edition, something is wrong with the version. It originally said that version 0.0.3 was rejected, because the old version was 0.2 (different code-base and versioning scheme).

So I bumped the version to 0.3.0 just to get around that — Google accepted it and said “success”. But the Chrome extension store still lists version 0.2, which doesn’t work. :thinking:

I’ll try to fix it later today, even if it means deleting it from the store and uploading it from scratch.

I figured out the problem. You have to click another “publish” button before it will show the new version. I got a little confused because Google’s UI is pretty clunky there. After uploading a new version, there isn’t much indication that you have to manually find your way back through a couple of screens and take one more action before the newly uploaded version is fully submitted.

When I pushed the “publish” button this morning, the site warned me that it needed a manual review because of the permissions. I hadn’t specified any permissions, so I assumed that it had the most limited permissions possible.

Apparently, there is a way to restrict permissions to only the current tab after the user performs a browser action (clicking on the icon) by adding this to manifest.json:

    "permissions": ["activeTab"]

I’ve just reduced the permissions with that line, and have re-submitted it to both browser extension stores. Google said it might take a few days before it’s approved even though the permissions have been restricted.

If anyone wants to learn how to make a browser extension, and/or work on features for this one, let me know at a meetup. I’m definitely not an expert on it, but learned a bit while making this one. :slight_smile:

I wonder how it would look to give the popup menu a design that looks kind of like a science fiction computer dashboard from a 1960s conception of the future. You click the browser icon and see something that looks like a dashboard instead of a menu. It could have some useful web development tools instead of just links to Code Self Study resources.

Star Trek example:

Apple might have been inspired by that with their old window buttons:

Apple's old close window buttons

Apple window icons

It also reminds me of translucent plastic dice.

RPG dice

The style used to be more popular, but unfortunately, it has become less common.

1 Like

The extension now gives quick access to wifi passwords and bathroom codes (common questions). :slight_smile:

(It’s in version 0.8.3, which is pending review, but installed extensions will auto-update soon.)

Hopefully coming soon:

  • a small icon that shows the number of unread forum posts
  • settings page

I was thinking that a JS framework could be added and that Vue would be easiest, but there was a preference for React, so we can use that. (More people here probably know React.) I’m setting it up on the feature-react branch.

I didn’t know how to integrate React in a browser extension with a working build process, so I used a starter template. It happened to use Redux, which I’ve never used, and Typescript, which I’ve never used with React.

I’m still investigating how the libraries work. The README for webext-redux has some information on how state is managed.

It’s based on this template, which can be referenced to see how it works. I ripped out most of the theming and Redux stuff, because we can keep it relatively simple for now.

It’s compiled with the TypeScript compiler, but we don’t need to use much TypeScript. It’s probably better to write plain JS in the .ts and .tsx files in order to keep the project friendly to people who have only used JS.

If anyone wants to contribute, ask me for more information at a meetup, and I could walk you through it.

More info here: