Skip to content

Development Process

Jump to bottom
cynber edited this page Sep 2, 2023 · 32 revisions

Process

Dev Branch --> Develop --> Main

If you fix a bug or implement a feature, please make your pull request to develop.

Project Structure

  • build/: Built files will appear here when you run the build command. You can test the extension by loading from this folder in to your browser.
  • src/: directory for extension related content
  • |- _locales/: directory for translations (currently not used)
  • |- img/: directory for images used by the extension
  • |- pages-options/: Contains the options page
  • |- pages-popup/: Contains the popup page
  • |- pages-search/: Contains the search page
  • |- pages-settings/: Contains the settings page
  • |- pages-sidebar/: Contains the sidebar page
  • background.js: script that runs in the background while extension is installed (this is the M2 version, used in Firefox & Safari)
  • content-communityNotFound.js: script that runs on the Lemmy community not found page
  • content-general.js: script that runs on specific lemmy/kbin pages
  • content-sidebar.js: script that adds a redirect button to the sidebar on Lemmy and Kbin communities
  • m3-background.js: script that runs in the background while extension is installed (this is the M3 version, used in Chrome, Edge, and Opera)
  • styles.css: these are the global styles, used by the various pages-... files above
  • utils.js: these are functions used by all the scripts above, containing many of the frequently used functions (ex. get/set settings values from storage, generating a redirect URL, checking the type of site the user is on, etc.)

You should also see a number of manifest files in the root directory, which are specific to each browser.

The build command will combine all of these files, depending on the requirements of each browser. They will be renamed in a consistent format.



Build the project to run on your browser

Currently, there is a separate manifest file for each browser. The main difference is that Firefox and Safari use Manifest 2, while Chrome and Edge use Manifest 3. This means that there are some differences in the APIs used in the manifest and background files. The scripts for Firefox and Safari use Manifest 2, while the scripts for Chrome and Edge use Manifest 3 (files with the m3- prefix).

To build the extension, you can run the following command: sh build.sh

You can also run sh build.sh -dev to build a development version of the extension. THIS IS THE RECOMMENDED COMMAND WHILE TESTING. This extension will have a different colored icon, and it will not delete the build folder after zipping. This should make it easier to test the extension while the live extension is also installed.

I recommend using the development version while testing, and then using the regular build command when you are ready to publish a new version.



Tips

How to add a new setting:

See this commit: https://github.com/cynber/lemmy-instance-assistant/commit/b99576598da0653b5d3af493f9b8e46e7e01b360

You will need to add the setting code to a number of places. The settings.html & settings.js files are specific to the settings page, where the user can modify the settings. The other files are places where default settings are stored for resets, initialization, and error handling.



Styling

Colors

  --color-bg-1: #1f1f1f;
  --color-bg-2: #252525;
  --color-bg-3: #111111;
  --color-text: #e0e0e0;
  --color-btn: #363636;
  --color-btn-hover: #3e4347;
  --color-btn-active: #4b5156;
  --color-btn-redirect: #5f35ae;
  --color-btn-redirect-hover: #6a3ebc;
  --color-btn-redirect-active: #7546ca;
  --color-btn-tools: #054da7;
  --color-btn-tools-hover: #0e5abf;
  --color-btn-tools-active: #1668d7;
  --color-btn-change: #571a1a;
  --color-btn-change-hover: #6b1a1a;
  --color-btn-change-active: #7f1a1a;



Testing

The following features are tested before publishing a new version:

  • first install

    • NO INSTANCE warning should appear in popup & sidebar

    • should set default settings (check settings page)

    • instance name should be unknown in popup & sidebar

    • redirect buttons should not work

      • redirect button in popup
      • redirect button in community sidebar
      • redirect button in browser sidebar

    • once home instance is added, redirect button should still fail when run on home instance

      • redirect button in popup
      • redirect button in browser sidebar

    • redirect button should work on foreign instance

      • redirect button in popup
      • redirect button in community sidebar
      • redirect button in browser sidebar

  • community sidebar

  • Popup menu:

    • instance name appears correctly
    • instance type appears correctly
    • settings button works
    • search bars work with enter AND click
    • 'change my home instance'
      • no input exits normally
      • bad input rejected
      • good input works
    • type toggle works
    • instance values copy as intended

  • Browser Sidebar menu:

    • instance name appears correctly
    • instance type appears correctly
    • settings button works
    • search bars work with enter AND click
    • 'change my home instance'
      • no input exits normally
      • bad input rejected
      • good input works
    • type toggle works
    • instance values copy as intended

  • Community not found page: https://lemmy.ca/c/fakeCommunity@example.com

    • sample idetifiers are rendered properly in help text
    • search is triggered correctly (check text in search field for !fakeCommunity@example.com)
    • 'Open community in foreign instance' works
    • 'Go to my home instance' works & home instance is listed correctly

  • Improved /communities page

    • Does NOT appear in home instance
    • Does NOT appear in foreign instance where you are signed in
    • Does appear in foreign instance without sign-in

  • Right-click context menu: https://lemmy.ca/post/1282303

    • Does appear for lemmy/kbin related links
    • Does appear and work for image posts
    • Does function for lemmy/kbin related links
    • Does NOT appear on other links

  • Settings page:

    • Home Instance URL
      • bad inputs rejected and alerted for home instance URL
      • good inputs accepted and reflected in popup
    • Home instance type
      • toggle works, reflected in popup
    • Instance List
      • values accurately reflected in popup
    • Hide Lemmy Sidebar works as intended
    • Functionality
      • TOGGLE buttons in community sidebar works
      • TOGGLE community not found page works
    • Misc
      • Open search results on lemmyverse.net works

  • Post to Lemmy

Site Type Status
Arstechnica 📰 News Working
Reuters 📰 News Working
BBC 📰 News Working
CBC 📰 News Working
Toronto Star 📰 News Working
WashingtonPost 📰 News Working
Medium 📝 Articles Working
Substack 📝 Articles Working
YouTube (Real Grumpy Cat) ▶️ Video Working, could be improved
Twitch ▶️ Video Working, could be improved
Vimeo: None linked, pick one ▶️ Video Working, could be improved
Amazon Product: None linked, pick one 🛍️ Shopping Working
Stack Overflow 💻 Forum Working, could be improved
Imgur 📷 Images Working, could be improved
Instagram Account 🙌 Social Working, could be improved
Instagram Post 🙌 Social Working
Mastodon Post 🙌 Social, Fediverse Working, could be improved



Other resources

Clone this wiki locally