65 lines
5.1 KiB
Plaintext
65 lines
5.1 KiB
Plaintext
<p>When you are reading an article in a webpage, you come across an idea
|
|
and want to org-capture the words/sentences. What do you do?</p>
|
|
|
|
<h2 id="naive-way">Naive way</h2>
|
|
<p>An intuitive way is highlight the content you want to capture, copy it,
|
|
switch to Emacs, run <code class="language-plaintext highlighter-rouge">org-capture</code> and yank it there.</p>
|
|
|
|
<p>Would it be nice if our browser sends content to <code class="language-plaintext highlighter-rouge">org-capture</code> directly
|
|
with a shortcut?</p>
|
|
|
|
<h2 id="org-protocol-and-custom-js">Org-protocol and custom JS</h2>
|
|
|
|
<p><a href="https://orgmode.org/worg/org-contrib/org-protocol.html">Org-protocol</a>
|
|
is the backbone here. The basic ides is
|
|
navigate to a link with the org-capture protocol header and the OS figures
|
|
out Emacs is the app to open it.</p>
|
|
|
|
<p>Now that the underlying mechanism is there, our next step is figure out the
|
|
script that drives it.</p>
|
|
|
|
<p><a href="https://orgmode.org/worg/org-contrib/org-protocol.html#orgb7ef958">Org-protocol docs about Mac OS
|
|
X</a> is
|
|
a bit out of date, but it has hints about the Javascript logic:</p>
|
|
|
|
<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code>
|
|
<span class="nb">document</span><span class="p">.</span><span class="nx">location</span><span class="p">.</span><span class="nx">href</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">org-protocol://capture://</span><span class="dl">'</span> <span class="o">+</span>
|
|
<span class="nb">encodeURIComponent</span><span class="p">(</span><span class="nx">location</span><span class="p">.</span><span class="nx">href</span><span class="p">)</span> <span class="o">+</span> <span class="dl">'</span><span class="s1">/</span><span class="dl">'</span> <span class="o">+</span>
|
|
<span class="nb">encodeURIComponent</span><span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">title</span><span class="p">)</span> <span class="o">+</span> <span class="dl">'</span><span class="s1">/</span><span class="dl">'</span> <span class="o">+</span>
|
|
<span class="nb">encodeURIComponent</span><span class="p">(</span><span class="nb">window</span><span class="p">.</span><span class="nx">getSelection</span><span class="p">());</span>
|
|
</code></pre></div></div>
|
|
|
|
<p>From here, it becomes the question of how to run the custom JS code.</p>
|
|
|
|
<p>There are two ways:</p>
|
|
|
|
<h2 id="method-1-bookmarklet">Method 1: Bookmarklet</h2>
|
|
|
|
<p>Use
|
|
<a href="https://en.wikipedia.org/wiki/Bookmarklet">Bookmarklet</a> and make it
|
|
a button in the bookmark bar</p>
|
|
|
|
<p><img alt="Create a bookmarklet with custom JS" src="https://cdn.jsdelivr.net/gh/junjizhi/emacstil.com@main/uPic/jLNztM.png" /></p>
|
|
|
|
<p>The JS code is similar but has to be wrapped with a <code class="language-plaintext highlighter-rouge">javascript</code> prefix:</p>
|
|
|
|
<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nx">javascript</span><span class="p">:(</span><span class="kd">function</span><span class="p">(){</span><span class="nb">document</span><span class="p">.</span><span class="nx">location</span><span class="p">.</span><span class="nx">href</span><span class="o">=</span><span class="dl">'</span><span class="s1">org-protocol://capture://</span><span class="dl">'</span><span class="o">+</span><span class="nb">encodeURIComponent</span><span class="p">(</span><span class="nx">location</span><span class="p">.</span><span class="nx">href</span><span class="p">)</span><span class="o">+</span><span class="dl">'</span><span class="s1">/</span><span class="dl">'</span><span class="o">+</span><span class="nb">encodeURIComponent</span><span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">title</span><span class="p">)</span><span class="o">+</span><span class="dl">'</span><span class="s1">/</span><span class="dl">'</span><span class="o">+</span><span class="nb">encodeURIComponent</span><span class="p">(</span><span class="nb">window</span><span class="p">.</span><span class="nx">getSelection</span><span class="p">());})();</span>
|
|
</code></pre></div></div>
|
|
|
|
<p>With it, you can highlight some text on a page and hit the bookmark on
|
|
your toolbar. It will send to your org capture buffer right away</p>
|
|
|
|
<h2 id="method-2-use-shortkeys">Method 2: Use <a href="https://addons.mozilla.org/en-CA/firefox/addon/shortkeys/">ShortKeys</a></h2>
|
|
|
|
<p>You can assign a shortcut to run custom JS</p>
|
|
|
|
<p><img alt="Shortkeys settings" src="https://cdn.jsdelivr.net/gh/junjizhi/emacstil.com@main/uPic/CNeplc.png" /></p>
|
|
|
|
<p>Now I can highlight any text on a weg, then press
|
|
<code class="language-plaintext highlighter-rouge">ctrl-i</code>{.verbatim}.</p>
|
|
|
|
<p>Boom, it shows in the beautiful org-capture buffer.</p>
|
|
|
|
<blockquote>
|
|
<p><strong><em>NOTE:</em></strong> <a href="https://orgmode.org/worg/org-contrib/org-protocol.html">Org-protocol</a> supports <code class="language-plaintext highlighter-rouge">org-store-link</code> and <code class="language-plaintext highlighter-rouge">org-remember</code> URLs as well. You can build URLs with the similar JS code.</p>
|
|
</blockquote> |