Send page to Slack via Quick Bar (5 min)

in this tutorial, we will create a mod that will allow us to send the current tab’s address and metadata, regardless of which tab in the browser you’re on - directly to a Slack channel.

We’re using Slack in this tutorial, but we could do the same with Microsoft Teams, Discord or other software like Google Spreadsheet.

We will open the Pixiebrix Page Editor (F12 keyboard shortcut and then click the Pixiebrix tab). If prompted, we will Enable PixieBrix to work on the current site.

Let’s add a Quick Bar brick from the Add menu.

Then we will click Create a New Quick Bar

First of all - let’s rename this mod. We’re going to set the Name to Send selection to Slack

Then we’re going to set Action Title to Send to Slack

Then we will set Sites to All URLs

Under the Advanced options we will set:

The icon to be Slack

Also set Automatic Permissions - to All URLs

We’re going to add a modal so that we can add a couple of notes - before sending the page to Slack - this will allow us to give some context before sharing the page.

Let’s add a new brick named - “Show a modal or sidebar form”. Search it by name and add it.

Let’s assign the value of Form Title as Notes

Let’s give the name field the value of note

Then we will give a label of Add a note to your message

Remove the Field Description placeholder text - at this point it’s self explanatory that this is a note field

Then we will select the Input Type to set Single line text - that’s because we want to provide a short note to go with the message on Slack.

We will make this field NOT required.

However we will make it Cancelable.

Let’s also change the text on the Submit Button Text field to be Slack

Once that’s all done, when the modal is executed by right clicking anywhere on a page - it should look like in this image:

Let’s now add another brick:

We will search for “Send a Slack richly-formatted message with attachments” and add it

The first field we’re going to configure is hookUrl - we will set the value to our Slack’s webhook.

https://hooks.slack.com/services/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

Then we will specify channel's value to be #webhooks

Next we will add values to the attachments field, and to do so we’re going to press the Add Item button

Here is how we’re going to configure this block:

When you’re done it should look like such:

Let’s open a new tab and navigate to your favorite news outlet

Now use the Quickbar shortcut (by default CMD+M on Mac or CTRL+M on Windows) and select Send Page to Slack from the Quick Bar that will open.

A modal will now ask you for some context, then press the blue button to submit it.

Like that, you shared your current active tab with your workspace on Slack!