Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Make the web actionable. Part sharing button customiser, part <action> shim
JavaScript Python CSS
branch: master

README.md

Web Action Hero Toolbelt

A cross-browser extension which does three things:

  1. Replaces social sharing buttons with <indie-action> elements
  2. Activates <indie-action> elements
  3. Allows you to take actions on selections you’ve made (demo video)

Watch a demo video or read the transcript.

Installation

The Toolbelt is cross-browser (courtesy of Kango) and can be installed on Safari, Firefox, Chrome or Opera.

  1. Clone the repo or download the ZIP
  2. Navigate to /output

Then, depending on your browser:

  • Chrome:
    1. Navigate to chrome://extensions
    2. If not already enabled, enable Dev Mode (top right)
    3. Press the Load Unpacked Extension button, and select /output/chrome
    4. Web Actions should pop up in the list, Click 'Options' to configure it.
  • Safari:
    1. Develop -> Show Extension Builder
    2. Click + (bottom left)
    3. Add Extension
    4. Select /output/safari/webactions.safariextension
  • Firefox:
    1. Tools -> Addons
    2. Extensions
    3. Little cog in the top right -> Install Add-on From File
    4. Select /output/webactions_0.9.xpi
    5. Trust it
    6. Restart it
    7. Configure it
  • Opera:
    1. Open /output/webactions_0.9.oex
    2. It will install and show you where the button is

Set Up

Click the button in your toolbar to bring up the config UI. An explanation is within.

For more, watch the demo video or read the guide.

Questions with answers

Wait, what are <indie-action> elements?

An experimental bit of markup (proposed by Tantek Çelik here) for implementing the Web Action pattern in a way back-compatible with existing markup patterns.

For example, say you’re a blogger and you want people to be able to share your content. You might decide to put some social sharing buttons at the bottom of your articles:

<article class="h-entry">
    <h1 class="p-name">My Awesome Blog Post</h1>

    <div class="e-content">•••</div>

    <footer>
        <p>Share this post: <a href="•••">Tweet Button</a>
    </footer>
</article>

But what if people aren’t using twitter? Surely I should add a load of others (facebook, google plus, linkedin, reddit, etc.) — and all of a sudden you’re a button slut:

<footer>
    <a href="•••">Tweet Button</a>
    <a href="•••">+1 Button</a>
    <a href="•••">Like Button</a>
</footer>

But if I take all of these buttons away in favour of some experimental technology no-one uses, there won’t really be any benefit. So, the action element is back-compatible with current markup. Just wrap all buttons which represent a particular verb in that indie-action:

<footer>
    <indie-action do="post" with="http://example.com/this/page">
        <a href="•••">Tweet Button</a>
        <a href="•••">+1 Button</a>
        <a href="•••">Like Button</a>
    </indie-action>
</footer>

Non-supporting agents will show the buttons, supporting agents will replace them with a UI tailored to the user.

Isn’t this just [web intents | web activities | x other technology]?

No. Web Actions are a user-centric reframing of dev-centric web intents, the <indie-action> element is a simple, experimental implementation designed so we can start using this pattern straight away. Only through real world usage will we discover the best solution to these problems.

Other similar technologies also require significant effort on the producer side (writing the UI, invoking via JavaScript) whereas web actions only require a single extra element per action, which can be wrapped around existing markup.

Wasn’t the element originally <action>?

Yep, but at IWCUK 2014 Jeremy Keith pointed out that it should be altered to fit better with the web components spec.

Questions without answers (yet)

Most people don’t understand URL APIs — why doesn’t this autodiscover services like web intents?

Because that’s complicated. It would require services to explicitly declare what verbs (which we haven’t agreed on yet) they can handle, and lots and lots of UI programming to be done.

This is not an end product, it is a prototype made so interested parties can get stuck in using this markup now and understanding these patterns now. We’ll handle making it super easy to use later, if it’s well-received.

What verbs should I use?

There’s currently no common registry of verbs. We’re researching them and documenting them here. Hop on #indiewebcamp on freenode and ask about it.

Something went wrong with that request. Please try again.