In this tutorial we’re going to create a context menu extension 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. Creating the Context Menu extension
We’re going to 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 Context Menu extension from the Add menu.
Then we will click Create a New Context Menu
2. Configuring the Context Menu
First of all - let’s rename this extension.
We’re going to set the Extension Name to Send selection to Slack
Then we’re going to set Title to Send to Slack
Then we will set Sites 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
Press the Add a field button
Let’s give the name field the value of note
Then we will give a label of Add a note to your message
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.
If you don’t have your own webhook feel free to use ours and then join our Community Slack to see it in action
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
The values (such as @input.urland @input.provider) are automatically gathered by the Context Menu brick and made available to use throughout the extension.
Additionally on Slack, specifically, if we format them using the < url_variable | text_variable> layout - they will show up nicely like the image below.
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 context menu (right click on the page) and select Send Page to Slack.
A modal will now appear asking you for some context, then press the blue button to submit it.
Just like that, you shared your current active tab with your workspace on Slack. including any notes you might have typed out.
