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.
1. Starting a mod with the Quick Bar
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
2. Configuring the 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
3. Opening a modal
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:
4. Sending to Slack
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.
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:
- fallback:
Check out <{{@input.url}}|this page on {{@input.provider}}>
- pretext:
Check out <{{@input.url}}|this page on {{@input.provider}}>
- color: leave this one empty
- text:
@form.note
When you’re done it should look like such:
Testing & Conclusions
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!