Transclude Me Extension

Make web more context rich by enabling in-place rabbithole exploration mode (sliding tabs UI) & context-specific previews for links. You can save URLs to Instapaper from the preview or sliding pane view.

Supported link types:

• Text fragment links
• Wikipedia links
• iFrame preview for a set of whitelisted domains

You can see how a variety of links are handled by looking at test page while using this extension.

Usage

tldr:

• Hover over the link with Alt key pressed to see the live preview.
• Click on the link with Shift+Alt keys pressed to open the link in the sliding pane view.

---

After installing the extension - supported links should get a τ indicator suffix to signify that this link has a preview.

To see the preview for a link, hover over the link with the Alt key pressed.

(You get actions to save the link to Instapaper or open it in the sliding pane view at the top of preview pane)

Sliding panels sidebar previews

This demonstrates sliding panels view & how live preview, Instapaper saving & sliding panes view work together.

Development

🛠 Build locally

1. Checkout the copied repository to your local machine eg. with git clone [email protected]:transclude-me/extension.git
2. Run yarn to install all required dependencies
3. Run yarn build:firefox to build the extension with manifest v2

The build step will create the build/<browsername> folder, this folder will contain the generated extension.

🏃 Run the extension

Using web-ext is recommened for automatic reloading and running in a dedicated browser instance. Alternatively you can load the extension manually (see below).

1. Run yarn watch:firefox or yarn watch:chrome to watch for file changes and build continuously
2. Run npm install --global web-ext (only for the first time)
3. In another terminal, run web-ext run -s build/firefox -f https://gist.github.com/Stvad/315bc3ce22b44af7ac71bbfbcaff9777 for Firefox or web-ext run -s build/chrome -t chromium -f https://gist.github.com/Stvad/315bc3ce22b44af7ac71bbfbcaff9777 for Chrome

Manually

You can also load the extension manually in Chrome or Firefox .

Note: Firefox will automatically reload content scripts when the extension is updated, Chrome requires you to reload the page to reload the content scripts.

Infrastructure

• link-summoner library that allows you to add live previews to any website
• Parcel’s Web Extension transformer documentation
• Options are managed by fregante/webext-options-sync, which auto-saves and auto-restores the options form, applies defaults and runs migrations.
• Use modern promise-based browser.* APIs webextension-polyfill.
• Chrome extensions’ API list

Parcel 2

Being based on Parcel 2 and its WebExtension transformer, you get all the good parts:

• Browserlist-based code transpiling (which defaults to just the latest Chrome and Firefox versions)
• Automatically picks up any new file specified in manifest.json