2 years and 6 months since the planned release date, countless hours of work... Several times the work had to be started from scratch... It's been a long way, but it's finally ready. I am proud to announce one of my biggest open-source updates yet: Tabs aside 3.0!

This update is not just a re-skin of the original extension: every aspect of it was re-worked from the ground up with new logic, new features and, of course, new design.

Let's take a look on some new changes:

And first, new UI!

This UI now fully embraces Microsoft's Fluent UI design language which makes it look fresh and fancy on any modern browser: simple yet powerful. As everything should be.

Now let's talk features.

Customize anything!

Starting from 3.0 collection list's home is now browser's side panel. This was done to improve consistency of the user experience, since panel is now independent from page's content (in earlier versions the panel could appear either inside of the webpage, or in a separate tab, if the page was "special")

Do not like it? You can move it to a popup or a tab (pinned, or closable). The choice is yours.

You can also change what the extension's button does: it can show your collections or save them instead!

You can change how your collections look, what actions you prefer to be you default ones, and so on.

Also, you can now change colors of collections!

Tab groups!

What is better than saving tabs? Correct! Saving groups of tabs!

And of course, you can customize groups just like collections!

More ways to save tabs

The philosophy of previous versions was that it was supposed to be only a temporary storage for your tabs: You need a pause? You set aside your opened tabs. And sometime later you open them and pick up where you left off.

Slogan for Tabs aside 3.0 is "Bookmarks redefined". This is why now you have much more options to save, organize and open your tabs and collections!

• You can save all tabs
• You can save only selected tabs
• You can save and close all or selected tabs
• You can straight up create a new empty collection
• You can add tabs to existing collections
• You can create empty groups and add tabs to them
• You can... I think you get it :)

Of course, you can also export your collections to your browser's bookmarks.

And last but not least:

You can reorder everything!

This is one of the most anticipated features (and the one that brought the most troubles during development) - you can now drag and drop collections, groups and tabs however you like!

One more thing...

During the development I have revised my approach to development and maintenance processes of my projects. This is why, starting from this version, the extension will be receiving regular updates to keep everything up and running.

These updates will include bugfixes, security and feature updates, and will be distributed on a monthly basis. This way, I will make sure that you get the best experience I am able to provide.

Available now!

The update is live! You can either check for extension updates on your browser to download the latest version or, if you want to download it for the first time, you can head to one of the available stores:

• Microsoft Edge Add-ons
• Firefox Add-ons
• Chrome web store
• GitHub (for sideloading and testing)

Afterthoughts

Of course, there're quite a few more features to this update, but these were the most notable ones. You can find a full list of changes below, at the end of the article.

Again, this is a big update for this project and for me personally. The project started as a mere replica of an old retired feature of an old retired Microsoft Edge. But this update signifies a new era for me, and for this project, that now has its own path.

As I saw the number of users growing (by the way, we are at 15k of weekly users now!), and all your feedback and support... This is what kept me going. And I will do my best to keep it that way.

Thank you ❤️

Cheers,
Eugene Fox

Full changelog

General

• Migrated extension to MV3
• Update is available on Firefox only for versions 139 and above
• New UI/UX based on Microsoft's @fluentui library
• Collections are now displayed in multiple columns on wide screens when in "List view"
• Added ability to search and filter collections
• Added ability to sort collections by creation date or alphabetically
• Added ability to reorder collections and items using drag and drop
• Default collection list location was moved to browser's sidebar
• Added ability to save tabs without closing them
• Ability to set aside selected tabs is now reflected in the UI
• Added Ukrainian locale

Collections

• Added ability to change collection's color
• Added ability to open collection in a new window
• Added ability to open collection in a private window (requires permission to work with private windows)
• Added ability to export collection to bookmarks
• Added ability to add selected tabs to an existing collection
• If collection has a color and doesn't have any sub-groups, it will be opened as a tab group

Groups

• Added ability to save and open tab groups
• Groups can be customized
• Pinned tabs are now saved into a "Pinned" group inside a collection

Settings & storage

• Added ability to import/export extension's data
• Added ability to choose default save action (just save tabs, or save and close them)
• Added ability to choose default restore action for collections (just open a collection, or open it and remove from storage)
• Added ability to change collections list location (sidebar, popup, separated tab, or pinned tab)
• (Chromium-only) Added ability to change extension icon action to show context menu
• Added ability to force toolbars to be always visible
• Added ability to hide collection counter badge
• Added ability to turn on notification when saving tabs from context menu (or extension icon action)

Addressed issues

• Efficiency and resilience of cloud storage was greatly improved
• Added multiple safeguards around cloud storage to make sure that user data can't be lost
• Added ability to disable cloud storage for collections (extension settings will still use cloud storage)
• Tab thumbnails now use Opengraph previews as well as tab captures as a fallback
• Addressed several issues regarding saved or opened tabs being blank

Reupload of my posts from Blogspot from 3-Nov-20

Hi there!

Last time I've told you how to debug web extensions with VS Code. This time I going to show you some tools which help you to automate your extension development workflow. I'm talking about continuous integration and delivery

So, what CI/CD exactly is?

Continuous integration and delivery allow you to automate some parts of a development workflow like building, testing, packaging and distributing. So, everything you need here is to push your code into your repository and the rest will be done by computer

Cool, how can I opt-in?

Of course! All you need is to set up your CI/CD pipeline. But actually, it's not that simple if you try to do it yourself since there're a lot of underwater rocks. So that is why I'm doing this article

Today I'll cover set-ups of CI/CD pipelines for Chrome and Firefox extension webstores

Prerequisites

So, all you need right now is your WebExtension source code saved in GitHub repo. I will use for reference my latest and greatest Password generator extension. You can also check it out later to see how it is done there

Note that your project has to have at least one submission to selected stores to be automated

Workflow file setup

So, first thing we need to do is create our workflow file. These files contain instructions for computer on what and how it should integrate and deliver your extension. Usually, WFs have a .yaml file extension. So, GitHub Actions WF is not an exclusion

Navigate to your repository root folder and create a .yaml file on /.github/workflows/your_workflow_file_name.yaml. Name of the file can be anything you want

So, here I've created a file on the exact folder path (you shouldn't push your file for now though)

[Insert image here]

Next thing, we need to fill our file with base instructions which we will use no matter where we will publish our project

name: CI	# Name of your workflow

on:
  workflow_dispatch:	# Allows you to manually trigger workflow
  push:
    # Triggers workflow only if code is pushed to master/main branch
    branches: [ master, main ]
    paths:
      # Triggers workflow only if manifest content is changed
      - 'manifest.json'

jobs:

Here we've set some triggers: conditions in which pipeline will be started

Here our triggers are set to fire only if we changed extension manifest on master/main branch. We did it because of several reasons:

• Here our triggers are set to fire only if we changed extension manifest on master/main branch. We did it because of several reasons:
• We don't want our changes from development branch be published as a major update
• Every time we submit new extension version, we have to change its version in manifest, so every push to master/main we want to publish has to contain this change

Note that YAML file syntax is indetation-sensitive. Make sure you didn't mess with tabs and spaces. More information about workflow file syntax you can find here

Now we need to make sure we have GitHub Actions turned on for our repository

To do that we need to navigate to Settings -> Actions of the repo (https://github.com/%username%/%repository%/settings/actions) and make sure we have checked anything but Disable Actions

[Insert image here]

Here ends general preparation of the workflow and now we will move to store-specific actions

Setting up Firefox webstore submission

Obtain API credential

Since we deal with some sensitive data here, we need to make sure everything is secured and nobody can sabotage our release process. So we need to obtain some access keys which will authorize our pipelines.

First thing, we need to go to Firefox Add-in API management page, generate and copy JWT issuer value (that will be our client ID value) and JWT secret (client secret)

Note: do not share these values with anyone else! Especially, DO NOT put these values into your workflow file as a plain text!

[Put Image here]

Navigate to the repository's secrets page (Settings -> Secrets or https://github.com/%username%/%repository%/settings/secrets) and create two new secrets:

• FIREFOX_API_KEY - Paste here your JWT issuer token
• FIREFOX_CLIENT_SECRET - Put your JWT secret token here

[Put Image here]

You can use any other names for your secrets' variables

This is a safe storage for sensitive data. No one will be able to values stored here. Even you won't be able to see them

Update the workflow file

Now we need to add a new job to our workflow which will push our extension to the webstore

Open your workflow YAML file and add a new job:

jobs:
  Firefox:	# Job name
    runs-on: ubuntu-latest	# specify required OS for deployment machine

    steps:
    - uses: actions/checkout@v2	# Download your source code to the DM

    - name: Build Extension for Firefox
      id: web-ext-build
      uses: kewisch/action-web-ext@v1
      with:
        cmd: build

    - name: 'Sign & publish'
      id: web-ext-sign
      uses: kewisch/action-web-ext@v1
      with:
        cmd: sign
        channel: listed
        source: ${{ steps.web-ext-build.outputs.target }}
        apiKey: ${{ secrets.FIREFOX_API_KEY }}
        apiSecret: ${{ secrets.FIREFOX_CLIENT_SECRET }}

    - name: Drop artifacts
      uses: actions/upload-artifact@v2
      with:
        name: 'Firefox Artefacts'
        path: ${{ steps.web-ext-sign.outputs.target }}

Here we have 4 tasks in our job:

1. actions/checkout@v2 clones our source code to a deployment machine
2. kewisch/action-web-ext@v1 with cmd: build packs our extension source code into XPI file which will be published to the webstore
3. kewisch/action-web-ext@v1 with cmd: sign signs the package (confirms that this package is legit and derived from official source) and publishes it to the webstore
4. actions/upload-artifact@v2 drops our XPI file to workflow artifacts and makes it available for us to download for sideloading and testing purposes (optional task)

In third sigining task we have to provide some parameters to publish our extension correctly:

• cmd: sign: The command to run. This command signs and submits our extension to Firefox servers for verification
• source: path to our XPI package file. Here we use ${{ steps.web-ext-build.outputs.target }} since it is an environmental variable
• channel: Once verification is complete, our extension will become available for everybody in the webstore (listed) or it will become available for self-distribution and won't become visible through the webstore (unlisted). Leave it channel: listed
• apiKey: our JWT issuer token required for legit publishing. We can use here our secret variables - ${{ secrets.VARIABLE_NAME }}. In our case it's ${{ secrets.FIREFOX_API_KEY }}
• apiSecret: JWT secret token

More info on workflow variables can be found on official GitHub documentation. If you click on links from actions list above, you can find out more about specific action and its documentation

Setting up Google Chrome webstore submission

Obtain API credential

For Chrome webstore a process of obtaining credential is a bit tricky and requires a lot of explanations. So, instead of making another article I just leave a link to a guideline which covers the case

All we need here is to obtain client ID, client secret and refresh token. For more information what is it and how to live with it you cand find by googling an 'OAuth2' topic

[Put Image Here]

Update the workflow file

Same as setting up Firefox workflow, we now need to add a new job to our pipeline:

jobs:
  Chrome:
    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v2

    - name: Pack extension
      uses: TheDoctor0/zip-release@0.4.1
      with:
      	filename: ./Package.zip
      	exclusions: '.git/* .vscode/* .github/* *.md'

    - name: Publish to Chrome Webstore
      uses: SebastienGllmt/chrome-addon@v3
      with:
      	extension: yourextensionidhere
      	zip: ./Package.zip
      	client-id: ${{ secrets.CHROME_CLIENT_ID }}
      	client-secret: ${{ secrets.CHROME_CLIENT_SECRET }}
      	refresh-token: ${{ secrets.CHROME_REFRESH_TOKEN }}

    - name: Drop artifacts
      uses: actions/upload-artifact@v2
      with:
      	name: 'Chrome Artifacts'
      	path: ./Package.zip

As you can see, there're some major differences between Firefox and Chrome jobs. Here's some key points:

• We don't have to pack our extension with special format. Everything we need is to create a zip archive of our file with manifest in the root
• We don't have to sign our package. Everything will be done after submission
• We need to specify extension ID and provide a refresh token since we will publish our extension using "3d party" (technically, our) application

Everything else is pretty much the same as it is on the Firefox job, so I see no reason to stay on it anymore

More information about used actions you can find their marketplace pages:

• actions/checkout@v2
• TheDoctor0/zip-release@0.4.1
• SebastienGllmt/chrome-addon@v3
• actions/upload-artifact@v2

So, here's our complete workflow file:

So, that's it. All we have to do now is to push our updated workflow file to the repo and trigger our workflow and make sure everything is up and running

Wait, and how do I set up CI/CD for Safari/Microsoft Edge/etc. extensions?

You can't. Unfortunately, neither Apple nor Microsoft didn't make action tasks for automatic deployment of their browsers' extensions. And while it's understandable for the former one, since Safari has a different architecture of extensions and different submission processes, it's unclear for Microsoft not doing this, since new MS Edge is basically modified Google Chrome and it has same architecture and same submission processes as Chrome

Other browsers either aren't just popular enough or are based on different architecture

Conclusion

Hope this article will help you with your own project. If you still have any questions left, feel free to ask them in the comment section below. You can also leave a topic suggestion for my next article in the comment section as well

If you like ❤️ this, you can Buy Me a Coffee ☕ or follow me on Twitter 🗨. Thanks for your time ;)

Cheers,
XFox 🦊

Reupload of my posts from Blogspot from 6-Oct-20

Extension for web browsers which helps you to easily generate strong passwords in one click

This is my second browser extension and I hope, you'll find it useful. Be sure to check my first extension which brings "Tabs aside" feature from Microsoft Edge to all web-browsers

Features

• Create strong passwords in one click
• Customizable generator
• Clean and simple UI
• Dark mode

Download

• Google Chrome Webstore
• Microsoft Edge Add-ons Webstore
• Mozilla Firefox Add-ons Webstore
• GitHub Releases

And yes, it's an open-source project!

That means that anybody can contribute to the project, make own awesome features. Check out project's GitHub repository to get started

Reupload of my posts from Blogspot from 10-Sep-20

Hello, World!
Not so far ago I wrote an article about making a Chromium extension. And now I'd like to tell you about debugging tools which I use to do this. Besides it seems that there're just few articles about the topic and none about developing in VS Code

So, let's dive in

Prerequisites

First of all, further in the article I will assume that you already know about concepts of WebExtension development and have at least a prototype of one since this is a post about not coding but debugging

So, what we'll need:

• Visual Studio Code Editor
• WebExtension or Chrome extension project
• Firefox browser

Now you'll probably going to ask: "Can I use Google Chrome or any other browser". The answer is: "No, you cannot". Unfortunately, Google Chrome debugging tools for VS Code currently don't support extensions debugging. But honestly, if they even do, I'd still recommend you to use Firefox at least because it has more flexible built-in developer's console

So, that's it. Let's move to the setup

Environment setup

Let's open our project's workspace. This step is optional and can be done anytime but let's just do it now

So, your editor should be looking like this:

Now we need to open "Extensions" tab and install "Debugger for Firefox". Just type into the search bar "Firefox" and it will be the first one on the list

Now we need to open "Extensions" tab and install "Debugger for Firefox". Just type into the search bar "firefox" and it will be the first one on the list

Just click "Install" and wait for a few seconds

Environment is now set up. Let's move to configuration

Navigate to debug tab and hit "create a launch json file"

After some initialization work VS will ask you to choose your environment. Select "Firefox"

This action will create debug configuration file launch.json with several pre-defined configurations: Launch index.html, Launch localhost, etc.

If you want, you can remove all configurations but Launch WebExtension since it's the only configuration we will use in the project

Now if we go back to Debug tab, we'll see that it now has standard debugging sections

Now we're ready to go!

Debugging

Let's try to launch debugger. Make sure you've set "Launch WebExtension" as a default launch task and press "Start Debugging" (or press F5 on your keyboard)

You'll see now debugging tools being launched and Firefox browser being launched in debug mode. This mode suggests that the browser runs in some sort of container and any changes won't affect your actual environment

Now let's put some breakpoints, add a watch statement and some console.log() functions and relaunch debugging session. And when your breakpoint is hit, you'll see all data available at the moment to debug

So that's it. Now you can use all power of Visual Studio Code for extensions development

Conclusion

Hope this article will help you with your own project. If you still have any questions left, feel free to ask them in the comment section below. You can also leave a topic suggestion for my next article in the comment section as well

Next time I'll write about configuring a CI/CD pipeline for WebExtension with GitHub Actions

If you like ❤️ this, you can Buy Me a Coffee ☕ or follow me on Twitter 🗨. Thanks for your time ;)

Cheers,
XFox 🦊

Reupload of my posts from Blogspot from 5-Jul-20

Hi

Recently I've made a chrome extension which acts like Tabs Aside feature from legacy Microsoft Edge. Today I'd like to tell you how I integrate such elements into website pages.

Let's jump in

Note: it is advised to check the extensions development tutorial

Prerequisites

First, let's create some essential files:

• background.js - JavaScript file which will catch user's input and manage panes' states
• inject-script.js - will initialize/close pane on specific page
• manifest.json - standard Chromium extension manifest
• pane.html - our pane's HTML layout

Let's navigate to the manifest file and add insert those strings:

{
	"web_accessible_resources": [ "*" ],
	"background":
	{
		"scripts": [ "background.js" ],
		"persistent": false
	}
}

First entry allows us to access any file from extension resources (like CSS, JS, images, etc.) from any webpage. The second one declares that the extension should have script running in background. <code>persistent</code> key should be presented but it doesn't bring any difference since in any way the background script will be running indefinitely because of set event listeners

For more information about the manifest see Manifest File Format

Listening to button clicks

Now let's open background script and write some code:

At first, we retrieve the pane's URL (which depends on extension's ID assigned by your browser) and store it into a variable to prevent typos in future

Next part requires some explanation: not every webpage allows us to do what we want (inject something into it). For example, we can't inject out pane into settings page or new tab page or another extension's page. Instead, we can open our pane as standalone webpage (of course if you need to open it anyway). So, for these cases we need to check if it's a system page or not. All system pages have special protocol (e.g. edge:// for Microsoft Edge) and regular pages use http or https protocols. So, we check if the target page has right protocol

The next thing is that there're some websites which also doesn't allow to inject anything. Those are Google Chrome Webstore and Microsoft Edge add-ons Webstore. So, we also exclude them

Note: There's a high probability that there're more websites with such restriction. So, some additional research is advised

So, if page meets all this conditions, that means that we can run our script which will inject or close our pane. In other case, we should either open the pane in new tab or close this tab if it's already opened

We can also set up listeners to close standalone panes if they lost focus

Pane layout

Let's jump into pane.html and set up basic pane layout:

As you can see, it's the most common layout for any webpage. You can customize this page whatever you want. However, we've also added a CSS selector which will collapse our pane's width to 40% if it's embedded into page to make it look like it's a real sidebar pane. Also, we've included inject-script.js into the bottom of the page to make it run after pane is loaded

Pane initialization

Now let's write initialization script which will load our pane. Instead of injecting our pane as a div and having to deal with CSS conflicts, we just insert our pane via iframe

First, we are checking if the script is running on the standalone pane or on an embedded one. If it's not, then that means that we need to show or hide the pane from webpage. To do that we trying to get our pane's iframe. If we can't retrieve any that means that the pane isn't opened yet. So, we create new iframe settings some styles to make it look right and navigating it to our pane's HTML file. If we found the iframe that means that the pane is already opened, and we just delete the iframe from the DOM

If the script is running on the standalone page or inside an <code>iframe</code>, we try to initialize the pane. But at first, we must check presence of the pane and if there's no - end script execution. We need to do this because chrome.tabs.executeScript we call on the background script, runs our initialization script on the active tab including its iframes

Then if it's an embedded pane we add an embedded attribute to it to trigger the CSS selector mentioned above. After that we can perform the rest of our initialization

Note: in extensions usually, we cannot use inline JavaScript (for security reasons) as well as set up inline event listeners. Consider this while developing

Conclusion

Hope this article will help you with your own project. If you still have any questions left, feel free to ask them in the comment section below. You can also leave a topic suggestion for my next article in the comment section as well

Hope this article will help you with your own project. If you still have any questions left, feel free to ask them in the comment section below. You can also leave a topic suggestion for my next article in the comment section as well

If you like ❤️ this, you can Buy Me a Coffee ☕ or follow me on Twitter 🗨. Thanks for your time ;)

Cheers,
XFox 🦊

Reupload of my posts from Blogspot from 5-Jul-20

If you’re like me, you often find yourself with a bunch of open tabs. You’d like to get those tabs out of the way sometimes, but they’re maybe not worth saving as actual bookmarks.

In the Edge browser, Microsoft has introduced a new feature called "Tabs aside" (or Tab groups) which lets you set tabs aside in a sort of temporary workspace so that you can call them back up later.

Unfortunately, in new Chromium-based Microsoft Edge, the devs decided not to implement this must-have-feature. So, I've decided to create a browser extension which replicates this awesome feature in Chromium-based browsers

Features

• Familiar UI inherited from legacy Microsoft Edge with some improvements
• Auto Dark mode
• Now you can restore one tab from collection without removing

Download

• Google Chrome Webstore
• Microsoft Edge Add-ons Webstore
• UPD: Mozilla Firefox Add-ons Webstore!
• GitHub Releases

And yes, it's an open-source project!

That means that anybody can contribute to the project, make own awesome features. Check out project's GitHub repository to get started