forem / forem-browser-extension

The Forem browser extension which allows users to seamlessly navigate between communities.

Forem 🌱

For Empowering Community

Welcome to the Forem codebase, the platform that powers dev.to. We are so excited to have you. With your help, we can build out Forem’s usability, scalability, and stability to better serve our communities.

What is Forem?

Forem is open source software for building communities. Communities for your peers, customers, fanbases, families, friends, and any other time and space where people need to come together to be part of a collective. See our announcement post for a high-level overview of what Forem is.

dev.to (or just DEV) is hosted by Forem. It is a community of software developers who write articles, take part in discussions, and build their professional profiles. We value supportive and constructive dialogue in the pursuit of great code and career growth for all members. The ecosystem spans from beginner to advanced developers, and all are welcome to find their place within our community. ❤️

Table of Contents

• What is Forem?
• Table of Contents
• Community
• Contributing
• Getting Started
  • Installation Documentation
• Developer Documentation
• Vulnerability disclosure
• Acknowledgements
• License

Community

For a place to have open discussions on features, voice your ideas, or get help with general questions please visit the discussions section.

Contributing

We encourage you to contribute to Forem! Please check out the Contributing to Forem guide for guidelines about how to proceed.

Getting Started

This section provides a high-level quick start guide. If you're looking for a more thorough installation guide (for example with macOS, you'll want to refer to our complete Developer Documentation.

We run on a Rails backend, and we are currently transitioning to a Preact-first frontend.

A more complete overview of our stack is available in our docs.

To launch Forem in Gitpod, navigate to https://gitpod.io/#https://github.com/{your_github_username}/forem.

Installation Documentation

Please see our installation guides:

• MacOS, without containers
• Linux, without containers

Developer Documentation

Check out our dedicated docs page for more technical documentation.

Vulnerability disclosure

Forem is the open source software which powers DEV.

We welcome security research on DEV under the terms of our vulnerability disclosure policy.

Acknowledgements

Thank you to the Twemoji project for the usage of their emojis.

Thank you to Uffizzi for providing ephemeral environments to preview pull requests.

License

This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. Please see the LICENSE file in our repository for the full text.

Like many open source projects, we require that contributors provide us with a Contributor License Agreement (CLA). By submitting code to the Forem project, you are granting us a right to use that code under the terms of the CLA.

Our version of the CLA was adapted from the Microsoft Contributor License Agreement, which they generously made available to the public domain under Creative Commons CC0 1.0 Universal.

Any questions, please refer to our license FAQ doc or email [email protected].

Happy Coding ❤️

⬆ Back to Top

forem-browser-extension's Issues

Not working for some users (no error message)

The extension is not displaying for some users, and they are not seeing an error message.

My best guess is that the base case is not well handled logically and some users wind up getting stuck in "starting" mode.

Authentication, notifications, and unified sections of extension

I think a few features we'll want for the browser extension are the concept of seeing notification badges for individual communities I am a part of.

Example:

One way or another I think the major technical burden is how authentication would work in this way.

In terms of doing this in a way that is private and secure but also pretty seamless I could see a scenario where when the extension is installed it reads the user's API keys, stores them locally and uses them to ingest relevant APIs. I feel like that is legit as long as it's clear what's going on, behavior is as configurable as it needs to be, and we can ensure that the secrets can't leak.

I'd love input on that hypothetical functionality— particularly from a security perspective.

[15 minute] Update Logo

We recently updated the iOS app icon for Forem from to . We should update the browser plugin icon as well for consistency.

Forem.team icon missing

Describe the bug

The favicon Forem.team isn't displaying in the sidebar (previously it was!) on both Safari and Chrome versions of the plugin.

Screenshots

Additional context

The browser favicon for Forem.team has always been...weird!

Can't add more than three forems in Safari

Describe the bug

In Safari, you can't add more than 3 forems to the sidebar. The fourth site will appear to add, but disappears from the sidebar as soon as you navigate to another page. Console reports the error:

[Error] Error: Unchecked runtime.lastError: Storage quota exceeded.
	error

To Reproduce

With a fresh install:

1. Visit https://dev.to, add to sidebar
2. Visit https://forem.dev, add to sidebar
3. Visit https://community.codenewbie.org, add to sidebar
4. Visit https://www.hometechnica.com, add to sidebar
5. View console log for the sidebar frame: note the error
6. Refresh the page: note the icon for Home Technica is now longer on the sidebar

Expected behavior

The user should be able to add an unlimited number of forems to the sidebar

Screenshots

CleanShot.2021-01-21.at.16.42.31.mp4

Additional context

• OS, version: MacOS 11.1
• Browser, version: Safari 14.0.2

Can we have the Forem sidebar inline rather than overlaying the Forem community being viewed?

Very basic request, I use the extension daily, would love it if the sidebar respected the forem being viewed as it currently overlays it :D

Fix a11y issues in the extension

There are some a11y issues in the browser extension. Images missing alt attributes, anchor links without text content missing title attributes and there should be a <main /> landmark instead of a <div />.

Rename the master branch

I don't think we've decided on the branch name yet for the renaming.

Browser sidebar appears on Forem.com

Describe the bug

The plugin sidebar is showing up on Forem.com, even though this site has no Forem installed on it.

To Reproduce

• Install the Forem browser extension
• Visit Forem.com
• Note the sidebar is showing up, and can't be dismissed (and is covering page content)

Expected behavior

The Forem switcher sidebar shouldn't display on Forem.com

Screenshots

Additional context

• OS, version: Mac 11.6
• Browser, version: Safari 15, Chrome 93.0.4577.82

Storing extension version in storage

Currently we check to see if the version number is different to a string we manually enter, should we store the latestExtensionVersion in storage and use that for the compare?

Code section

https://github.com/forem/forem-browser-extension/blob/master/content/content.js#L37-L50

Specific line

https://github.com/forem/forem-browser-extension/blob/master/content/content.js#L41

Add a CODEOWNERS file

Like forem, we should have a CODEOWNERS file here as well. See https://github.com/forem/forem/blob/master/.github/CODEOWNERS

Site icons should refresh to reflect current branding

Describe the solution you'd like

I added the CodeNewbie site to my Chrome Extension a few months ago, but since then, they have rebranded, and the site logo is now purple instead of green.

It would be nice if the extension could periodically re-check for an updated / the current version of the site icon, and refresh itself.

Release Browser plugin on Google Chrome and Apple stores

Release version 1.0.4 to the following places:

• Apple App Store
• Google Chrome Extension Store
• Mozilla Add Ons directory

Add a code of conduct to the project

@benhalpern, We can probably copy the one from the Forem code base as I imagine everything there would apply here as well.

Incorrect snack-bar Positioning

Describe the bug

Snackbars appear behind the side panel

To Reproduce

1. Go to any forem
2. Subscribe to a comment section
3. See snackbar is in the wrong place

Expected behavior

Snack bar should move over to accommodate the side panel

Screenshots

Additional context

• OS, version: Win 10
• Browser, version: Chrome 85

Troubleshooting the installation

@benhalpern is there a way to troubleshoot the extension? After following the installation steps here (to load unpacked) the extension icon appears grayed out

Add the standard node.js git ignore

Run npx gitignore node to add the standard node gitignore.

Search Forem list

Is your feature request related to a problem? Please describe.

Right now you can't the search list of Forem

Describe the solution you'd like

Add a search box to search Forems by title or description when you visit https://www.forem.com/discover/ in the extension.

Describe alternatives you've considered
NA

Add a contributing document to the project

We can copy the contributing guidelines from the Forem repository to here. That work for you @jacobherrington?

Add GitHub Issue Template

Like forem, we should have an issue template(s) here as well. See https://github.com/forem/forem/tree/master/.github

Extension no longer loads _before_ body.

I'm not 100% sure when this behavior changed but did so in a recent PR.

The expected behavior is that the forem html is added before other body content so there is no jump once the body loads. But now it is added after so there is always a jump.

Add a GitHub PR template

Like forem, we should have a PR template here as well. See forem/forem@master/.github

Tooltip gets hidden

Description

z-index of the tooltip gets hidden below items in the message

Screenshot

Add parcel to the project

Parcel is web application bundler that out of the box has zero configuration.

Although we use webpack in the forem code base, it would be nice to consider a different more modern bundler. The main reason we use webpack in the Forem code base is because of it's integration with Rails via webpacker. It also ships with Rails 6.

In browser extension land, we do not have this constraint.

I have a proof of concept that I will post sometime this week as a draft PR to show how it all comes together.

Some benefits of adding a bundler to the extension code base:

• ES modules
• minification
• hot reloading

Let us know what you think about using Parcel.

Enable Firefox compatability

Currently this extension speaks with Chrome storage, and otherwise isn't Chrome-specific as far as I know.

Creating an abstraction over the storage layer in order to make this functional in firefox seems like a good idea 😄.

Hide sidecar when user prints

We should add some CSS to hide the panel when a user prints the page. This will be difficult (impossible?) while the CSS is combined with the JS.

blocked by #31

Pull out HTML, CSS and JavaScript scripts from content.js into separate assets

Currently JS, CSS and HTML are all built via JavaScript in content.js. To be able to maintain the browser extension code base, separate them into assets of their given type and reference them.

This will allow for contributors to be able to make changes a lot more easily.

TODO: Add "What does it do?" section to README.md

Is your feature request related to a problem? Please describe.

Prompted by this post https://forem.dev/ben/has-anyone-used-the-browser-extension-57jh.

I think it would be very useful to add a "What does it do?" section to README.md.

Describe the solution you'd like

As a curious individual, I would like to be able to read the main page and know what this extension does before I install it, so that I might be motivated to install it.

Prevent Forem Instance Page Slow downs

Currently the browser extension loads content scripts at via document_start via the run_at manifest property.

Other options include document_end and document_idle. Consider using document_idle (the recommended option whenever possible) as it allows the entires DOM to load as well as subresources like images and iframes before the extension loads.

Avoid eventual plugin storage limit

Is your feature request related to a problem? Please describe.

Current the Forem browser extension makes a call out to https://www.forem.com/valid_forems.json storages this list locally in chrome.storage.sync. This storage area is also used to hold the forems a user has placed on the sidebar.

While this is fine right now, as the number of publicly discoverable Forem increases eventually there will come a time when this list is too big to store in the local plugin storage. On Chrome and Firefox that limit is 102 kB. On Safari the limit is 10 kB. As of January 2021 with 12 forems in the public list, adding all of those forems to the sidebar consumes almost 10 kB of local storage space.

Describe alternatives you've considered

There are couple approaches we could take:

1. Wait for Apple to increase/fix this limit on Safari. That kicks the can down the road to the 102 kB limit in Chrome and Firefox)
2. We could reduce caching/storing the data from https://www.forem.com/valid_forems.json. The current code does rely upon it, but it's retrieving it on every load of the sidebar so it seems like not storing it could be possible.
3. Instead of using chrome.storage.sync, switch to chrome.storage.local. This area works almost the same as chrome.storage.sync, but has a maximum storage limit of 5 mB. The downside is that unlike chrome.storage.sync, data in chrome.storage.local does not sync to instances of the browser where the user is logged in: it's only local to that instance/install of the browser.

Describe alternatives you'd like to see taken

I think switching from chrome.storage.sync to chrome.storage.local makes the most sense longer term: while syncing data between logged in users of a browser is a nice feature I don't think it's an expectation most users have, and involves the fewest changes to the plugin code.

Unable to remove a Forem that is offline

Describe the bug

If a forem instance "goes away" and is already in the sidebar, the icon and links break, and there is no way in the UI to remove it.

To Reproduce

Tricky to reproduce unless you already have a forem instance added that goes offline. In my case, I have community.devocate.com added, but the DNS no longer resolves.

Expected behavior

Either a right-click option on a sidebar icon to remove it, or some access to the underlying settings in the UI.

Screenshots

Additional context

• OS, version: macOS 12.1
• Browser, version: Chrome 98

CORS error

From @fdoxyz:

I'm wondering if there's something we can do to fix the CORS error I see locally. This is also happening in the current version from the Chrome extension store though, so this PR didn't exactly break it, but the fetch is definitely not succeeding for me.

Originally posted by @fdoxyz in #63 (comment)

It's possible to save forem.com/discover as a forum and it will break the extension

This is a issue based off a comment I left on forem.dev
It's possible to save forem.com/discover as a forem. This will cause the extension to break. The workaround for this is to uninstall and reinstall the browser extension.

This is how it may be reproduced:

• Have no forems in the switcher
• Go to the extension "home" (forem.com/discover)
• Now add this "forem" to your sidebar, you can because the plus sign allows it.
• Reload and you should get this error

Error handling response: TypeError: Cannot read property 'homePageUrl' of null
    at chrome-extension://kbbmmajekblbmamcpkopjkmihmddkpof/content/content.js:207:14
    at Array.map (<anonymous>)
    at myOrigins (chrome-extension://kbbmmajekblbmamcpkopjkmihmddkpof/content/content.js:206:19)
    at chrome-extension://kbbmmajekblbmamcpkopjkmihmddkpof/content/content.js:14:18

Inititialize npm for the project

Run npm init and add keywords, plus the AGPL-3.0 license in the appropriate fields.

Add linting and formatting tools

Aside from Preact related linting rules, include all the same tooling for linting/formatting as we have on the forem code base.

Add a license to the project

The project currently has no license. We should add the same license as the forem code base, AGPL-3.0.