- Jun 2023
-
github.com github.com
-
via.hypothes.is proxy
If people whould like to use a bookmarklet to reload a webpage using via.hypothes.is/ you could use the following code. It works simular to the bookmarklet that is found on this page.
javascript:location.href='https://via.hypothes.is/'+location.href
-
- Oct 2022
-
mrbrainz.github.io mrbrainz.github.io
Tags
Annotators
URL
-
- Aug 2022
-
ostermiller.org ostermiller.org
-
-
www.squarefree.com www.squarefree.com
-
-
stackoverflow.com stackoverflow.com
-
```js (function () { var html = document.documentElement.innerHTML;
/** * the iframe's onload event is triggered twice: once when appending it to the document, * and once when the form finishes submitting and the new URL is loaded */ var loaded = 0; var iframe = document.createElement('iframe'); // unique name, to make sure we don't create any conflicts with other elements on the page iframe.name = 'bookmarklet-' + Math.floor((Math.random() * 10000) + 1); iframe.style.display = 'none'; iframe.onload = function () { // remove the iframe from the document on the second firing of the onload event if (++loaded == 1) { return; } // you can also alert('Done!') here :) document.body.removeChild(iframe); }; var form = document.createElement('form'); form.method = "POST"; form.action = "http://requestb.in/sbnc0lsb?nocache=" + Math.random(); form.target = iframe.name; var textarea = document.createElement('textarea'); textarea.name = 'source'; textarea.value = html; form.appendChild(textarea); iframe.appendChild(form); document.body.appendChild(iframe); form.submit();})(); ```
-
- Apr 2022
-
www.colbyrussell.com www.colbyrussell.com
- Feb 2019
-
pedagogyplayground.com pedagogyplayground.com
-
The bookmark also allows you to annotate any site, but requires an extra step.
You need to switch it on, and that can take a second, depending on how busy the page is, but it works the same.
-
- Oct 2017
-
hypothesis.zendesk.com hypothesis.zendesk.com
-
Hypothes.is front page
I took some time to find this page...
If you had made your account and logged in, then the front page turned to be "How to get started" page with only the link to Chrome extension.
If you want to use Firefox bookmarklet, you do as follows: 1) If you had logged in, sign out 2) click GET STARTED button 3) find the link to "other browsers" in the line with number ➁
I think it's misleading. The better way for me to put the link to "other browsers" in the "How to get started" page for the users who already logged in. Thank you!
-
- Oct 2015
-
radio-weblogs.com radio-weblogs.com
-
Also, I would like to create a roll your own PS bookmarklet builder that will allow one to specify for example where the anchors should be placed (beginning/end of paragraph), whether to use numbers/graphics, link/alink/vlink color(s), option to show/hide certain elements or include toggle button, etc.
I think Hypothes.is folks can utilize this idea. Allow users to roll their own bookmarklet. (Bookmarklet's are not dead yet :)
-
- Apr 2015
-
github.com github.com
-
hypothesis.js
hypothesis.jsis injected into the page by embed.js using either the browser's plugin API or (in the case of the bookmarklet) the DOM API. (embed.jswas in turn injected by the browser plugin or bookmarklet).hypothesis.jsis the "bootstrap" code that connects up and starts the various components of the Hypothesis app. -
app: jQuery('link[type="application/annotator+html"]').attr('href'),
Here we find the
<link rel="sidebar" ...thatembed.jsinjected into the page. We pass it into the constructor method of Annotator.Host below. -
window.annotator = new Klass(document.body, options);
Calling the Annotator.Host construct, passing an
optionsobject including our sidebar link. -
Annotator.noConflict().$.noConflict(true);
Having created our
Annotatorinstance and added our custom plugins etc to it, we inject Annotator into the page.
-
-
github.com github.com
-
layout.app_inject_urls
app_inject_urlsis the list of scripts and stylesheets that we're going to inject into the page. This comes from layouts.py, which in turn gets it from assets.yaml.Most importantly these URLs to be injected include a minified version of hypothesis.js.
-
var baseUrl = document.createElement('link'); baseUrl.rel = 'sidebar'; baseUrl.href = '{{ app_uri or request.resource_url(context, 'app.html') }}'; baseUrl.type = 'application/annotator+html'; document.head.appendChild(baseUrl);
Finally, we inject a
<link rel="sidebar" type="application/annotator+html" href=".../app.html">into the<head>of the document. This is the HTML page for the contents of the sidebar/iframe. This link will be picked up by hypothesis.js later. -
if (resources.length) { var url = resources.shift(); var ext = url.split('?')[0].split('.').pop(); var fn = (ext === 'css' ? injectStylesheet : injectScript); fn(url, next); }
This loop is where we actually call
injectScript()orinjectStylesheet()on each of the resource URLs defined above. -
var injectScript = inject.script || function injectScript(src, fn) {
And we do the same thing for injecting scripts as we did for injecting stylesheets - we either use the function passed in by the browser plugin, or when called by the bookmarklet we fall back on the DOM API.
-
var injectStylesheet = inject.stylesheet || function injectStylesheet(href, fn) {
hypothesisInstall()will use theinject.stylesheet()function passed in to it to inject stylesheets into the page or, if no function was passed in, it'll fallback on the default function defined inline here.The default method just uses the DOM's
appendChild()method, but this method may fail if the site we're trying to annotate uses the Content Security Policy.That's why when we're using one of the browser plugins rather than the bookmarklet, we pass in the browser API's method for injecting a stylesheet instead.
This is why the bookmarklet doesn't currently work on GitHub, for example, but the Chrome plugin does.
-
embed.js
embed.jsis responsible for "embedding" the different components of the Hypothesis frontend application into the page.First, either bookmarklet.js or one of the browser plugins injects a
<script>tag toembed.jsinto the page, thenembed.jsruns.This way the code in
embed.jsis shared across all bookmarklets and browser plugins, and the bookmarklets and plugins themselves have very little code.
-
-
github.com github.com
-
app.appendTo(@frame)
And we inject our
<iframe>into ... the frame? (@frameis a<div>that wraps our<iframe>, it's defined and injected into the page in guest.coffee). -
app = $('<iframe></iframe>') .attr('name', 'hyp_sidebar_frame') .attr('seamless', '') .attr('src', src)
Finally, this is where we create the
<iframe>element that is the Hypothesis sidebar!
-
-
github.com github.com
-
embed = document.createElement('script'); embed.setAttribute('src', embedUrl); document.body.appendChild(embed);
Here we construct the actual
<script>element, set itssrcURL, and inject it into the page using the DOM's appendChild() method. -
var embedUrl = '{{request.resource_url(context, "embed.js")}}';
The whole job of the bookmarket is to inject a
<script src=".../embed.js">element into the current page. ThesrcURL of this script element points to embed.js, another Pyramid template rendered by the server-side Hypothesis app. -
bookmarklet.js
bookmarklet.jsis the Pyramid template (rendered by our server-side Pyramid app) for the Hypothesis bookmarklet. This little bit of JavaScript (after being rendered by Pyramid) is what the user actually drags to their bookmarks bar as a bookmarklet.
-