Editing Browser helpers

{{TOC}}Over the years, a number of people have developed various "helpers" to conveniently access a comic's explanation on this wiki when browsing a comic on [https://xkcd.com xkcd.com]. They typically come in three main forms: {{w|browser extensions}}, {{w|userscripts}}, and {{w|bookmarklets}}.

== Browser extensions ==
These browser extensions usually inject elements/code into the xkcd.com comic page's {{w|Document Object Model|DOM}} – often inserting a button or link directly into the xkcd.com comic page itself, to take you to that comic's explanation page. None of these have been tested here.

=== [https://chrome.google.com/webstore/search/explain%20xkcd?_category=extensions Chrome Web Store] ===
{| class="wikitable sortable"
|-
! Extension !! Author !! Released !! Users !! Description
|-
| [https://chrome.google.com/webstore/detail/xkcd-explainer/foejkfobkipagoaicljcokpdbdldfmdn xkcd explainer]
| Avadonia314
| data-sort-value="2019-04" | April 2019
| style="text-align:center;" | 55
| Adds an "Explanation" button to the comic page, which loads the content of the comic's explanation directly into the page.
|-
| [https://chrome.google.com/webstore/detail/xkcd-enhancer/dkbjcnddbejafnbediiacbafmkgdmfel xkcd Enhancer]
| Tom White
| data-sort-value="2019-02" | February 2019
| style="text-align:center;" | 25
| Adds an explanation link to the comic page; also adds keyboard shortcuts, displays the title text, etc.
|-
| [https://chrome.google.com/webstore/detail/xkcd-explainer/iicndfighifkfkpijajnnhhbdmnohcml XKCD Explainer]
| contact.chilikkal
| data-sort-value="2018-10" | October 2018
| style="text-align:center;" | 25
| Adds a "Huh?" button to the comic page.
|-
| [https://chrome.google.com/webstore/detail/explain-xkcd-linker/dkbhfmlonpbdbejdombiphineceidepl Explain xkcd Linker]
| Martin Petkov
| data-sort-value="2017-02" | February 2017
| style="text-align:center;" | 20
| Adds an explanation link to the comic page.
|-
| [https://chrome.google.com/webstore/detail/xkcd-companion/ccpenjikfapfnpehglgfdbkjmojfmjfo xkcd-companion]
| Sean Yeh
| data-sort-value="2018-08" | August 2018
| style="text-align:center;" | 15
| Adds an explanation link to the comic page; also displays the title text.
|-
| [https://chrome.google.com/webstore/detail/xkcd-explainer/gicgjknccfbjiipicefanafhfofcjppd xkcd Explainer]
| Simon Zou
| data-sort-value="2014-06" | June 2014
| style="text-align:center;" | 5
| Adds an "I don't get it..." button to the comic page.
|-
| [https://chrome.google.com/webstore/detail/embetter-xkcd/jkeiagbmcbholabjkfdhghdocmlpkecb embetter xkcd]
| Matt Sugihara
| data-sort-value="2020-05" | May 2020
| style="text-align:center;" | 5
| Press 'E' to navigate to the explanation; also adds other keyboard shortcuts and displays the title text.
|-
| [https://chrome.google.com/webstore/detail/xkcd-explanifier/mikljabidjcpdnepfgmppmclcnhilhpa xkcd Explanifier]
| TheUltimateGuide
| data-sort-value="2020-08" | August 2020
| style="text-align:center;" | 1
| Adds a browser extension button that pops up another button that navigates to the explanation.
|}

=== [https://addons.mozilla.org/en-CA/firefox/search/?q=explain%20xkcd&sort=updated&type=extension Firefox Add-ons] ===
{| class="wikitable sortable"
|-
! Extension !! Author !! Released !! Users !! Description
|-
| [https://addons.mozilla.org/firefox/addon/xkcd-explainer/ XKCD Explainer]
| Yechiel K
| data-sort-value="2018-10" | October 2018
| style="text-align:center;" | 65
| Adds a "Huh?" button to the comic page.
|-
| [https://addons.mozilla.org/firefox/addon/xkcd-companion/ xkcd Companion]
| Sean Yeh
| data-sort-value="2018-07" | July 2018
| style="text-align:center;" | 15
| Adds an explanation link to the comic page; also displays the title text.
|-
| [https://addons.mozilla.org/firefox/addon/explain-xkcd/ Explain XKCD]
| Newt
| data-sort-value="2019-07" | July 2019
| style="text-align:center;" | 25
| Adds an address bar button.
|-
| [https://addons.mozilla.org/firefox/addon/xkcd-enchancer/ XKCD Enhancer]
| AstroRP
| data-sort-value="2019-03-21" | March 2019
| style="text-align:center;" | 1
| Adds an explanation button to the comic page; also redirects to m.xkcd.com on mobile devices.
|-
| [https://addons.mozilla.org/firefox/addon/explainxkcd-button/ ExplainXKCD Button]
| David Hickey
| data-sort-value="2019-03-22" | March 2019
| style="text-align:center;" | 1
| Replaces the store link (or other link) on the comic page with a link to the explanation.
|-
| [https://addons.mozilla.org/firefox/addon/xkcd-explanifier/ xkcd Explanifier]
| TheUltimateGuide
| data-sort-value="2020-08" | August 2020
| style="text-align:center;" | 1
| Adds a browser extension button that pops up another button that navigates to the explanation.
|}

=== [https://microsoftedge.microsoft.com/addons/search/explain%20xkcd Edge Add-ons] ===
{| class="wikitable sortable"
|-
! Extension !! Author !! Released !! Users !! Description
|-
| [https://microsoftedge.microsoft.com/addons/detail/xkcd-explanifier/pdinoolencdkjjclmeknfehidblgjneh xkcd Explanifier]
| TheUltimateGuide
| data-sort-value="2020-08" | August 2020
| style="text-align:center;" | 50
| Adds a browser extension button that pops up another button that navigates to the explanation.
|}

== Userscripts ==
{{w|Userscripts}} provide basically the same functions as the browser extensions above, manipulating xkcd.com's DOM to insert buttons/links or otherwise alter the page.  The difference is that you can view/edit the code of these userscripts; however, they require a {{w|userscript manager}} such as {{w|Greasemonkey}} or {{w|Tampermonkey}} to run.  None of these userscripts have been tested here.

'''Userscript managers:'''
* For Firefox <small>(Firefox Browser Add-ons)</small>: [https://addons.mozilla.org/firefox/addon/greasemonkey/ Greasemonkey], [https://addons.mozilla.org/firefox/addon/tampermonkey/ Tampermonkey] or [https://addons.mozilla.org/firefox/addon/violentmonkey/ Violentmonkey]
* For Chrome <small>(Chrome Web Store)</small>: [https://chrome.google.com/webstore/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo Tampermonkey] or [https://chrome.google.com/webstore/detail/violentmonkey/jinjaccalgkegednnccohejagnlnfdag Violentmonkey]
* For Edge <small>(Edge Add-ons)</small>: [https://microsoftedge.microsoft.com/addons/detail/tampermonkey/iikmkjmpaadaobahmlepeloendndfphd Tampermonkey] or [https://microsoftedge.microsoft.com/addons/detail/violentmonkey/eeagobfjdenkkddmbclomhiblgggliao Violentmonkey]
* For Opera <small>(Opera addons)</small>: [https://addons.opera.com/en/extensions/details/tampermonkey-beta/ Tampermonkey]
* For Safari <small>(Apple App Store)</small>: [https://apps.apple.com/app/tampermonkey/id1482490089 Tampermonkey] (paid download) or [https://apps.apple.com/app/userscripts/id1463298887 Userscripts] (free download)

'''Userscripts:'''

Mostly from [https://greasyfork.org/en/scripts?filter_locale=0&language=all&q=explainxkcd&sort=updated Greasy Fork] and [https://openuserjs.org/?orderBy=updated&orderDir=desc&q=explainxkcd OpenUserJS], with a few from GitHub [https://github.com/search?q=explainxkcd&type=Repositories&s=updated&o=asc repositories] or [https://gist.github.com/search?q=explainxkcd+anon%3Atrue&s=updated&o=asc Gists]:
{| class="wikitable sortable"
|-
! Userscript !! Author !! Source !! Released !! Description
|-
| [https://greasyfork.org/en/scripts/17-xkcd xkcd+]
| LouCypher
| Greasy Fork
| data-sort-value="2014-03" | March 2014
| Adds a "?" button to the comic page; also adds an "i" button for the official transcript, and social media sharing buttons.
|-
| [https://greasyfork.org/en/scripts/3762-xkcd-title-and-explain xkcd Title and Explain]
| Doodles
| Greasy Fork
| data-sort-value="2014-07" | July 2014
| Adds an "Explanation" button to the comic page; also displays the title text.
|-
| [https://greasyfork.org/en/scripts/6978-xkcd-buttons-alt-transcript-explainxkcd xkcd buttons Alt+Transcript+Explainxkcd]
| SammaySarkar
| Greasy Fork
| data-sort-value="2014-12" | December 2014
| Adds an "Explain" button to the comic page; also adds buttons to display the title text and official transcript, and keyboard shortcuts.
|-
| [https://greasyfork.org/en/scripts/1774-xkcd-enhancments XKCD enhancements]
| JonnyRobbie
| Greasy Fork
| data-sort-value="2015-03" | March 2015
| Converts the comic name into an "ExplainXKCD" link when hovering your mouse pointer over it; also displays the title text by clicking the comic.
|-
| [https://gist.github.com/magazov/934de662d60c9fb5fea9 explain_xkcd.js]
| [[User:Magazovski|magazov]]
| GitHub Gist
| data-sort-value="2015-04" | April 2015
| Adds an "Explain" button to the comic page.
|-
| [https://greasyfork.org/en/scripts/3188-xkcd-tooltip XKCD tooltip]
| Lorentz83
| Greasy Fork
| data-sort-value="2016-04" | April 2016
| Adds an explanation link; also displays the title text.
|-
| [https://greasyfork.org/en/scripts/22743-xkcd-add-explainxkcd-com-links-to-comics xkcd: Add explainxkcd.com links to comics]
| Daniel del Zorro Multicolor (Foxical Paradox)
| Greasy Fork
| data-sort-value="2016-08" | August 2016
| Adds an explanation link.
|-
| [https://openuserjs.org/scripts/obskyr/Explain_XKCD_Button Explain XKCD Button]
| obskyr
| OpenUserJS
| data-sort-value="2017-02" | February 2017
| Adds an explanation link.
|-
| [https://greasyfork.org/en/scripts/37912-xkcd-title-text xkcd title text]
| Tilwa Qendov
| Greasy Fork
| data-sort-value="2018-01" | January 2018
| Adds an explanation link; also displays the title text, and adds links to signed prints in the xkcd store.
|-
| [https://greasyfork.org/en/scripts/22199-xkcd-tweaks xkcd Tweaks]
| MitalAshok
| Greasy Fork
| data-sort-value="2018-02" | February 2018
| Adds an "Explain!" link; also displays the title text, adds keyboard shortcuts, and various other modifications.
|-
| [https://openuserjs.org/scripts/BigTSDMB/Explain_XKCD_Button Explain XKCD Button]
| BigTSDMB
| OpenUserJS
| data-sort-value="2018-04" | April 2018
| Adds an explanation link.
|-
| [https://github.com/David-Hickey/ExplainXKCD-Button-Userscript ExplainXKCD-Button Userscript]
| David-Hickey
| GitHub
| data-sort-value="2019-01" | January 2019
| Replaces the store link (or other link) on the comic page with a link to the explanation.
|-
| [https://openuserjs.org/scripts/Mr_FJ/ExplainXKCD_button ExplainXKCD button]
| Mr_FJ
| OpenUserJS
| data-sort-value="2019-07" | July 2019
| Adds an explanation button.
|-
| [https://gist.github.com/lastsecondsave/e8f88ab00a1675cd7384 explain_xkcd.user.js]
| lastsecondsave
| GitHub Gist
| data-sort-value="2019-12" | December 2019
| Adds an explanation button.
|-
| [https://greasyfork.org/en/scripts/398595-xkcd-explain-button XKCD Explain Button]
| saamirt
| Greasy Fork
| data-sort-value="2020-03" | March 2020
| Adds an "Explanation" button to the comic page.
|}

== Bookmarklets ==

Instead of a browser add-on/extension, you can create a ''bookmarklet'' to take you from an xkcd.com comic page to the corresponding explainxkcd.com explanation page.  A {{w|bookmarklet}} is a browser bookmark/favorite, except instead of containing a URL to a webpage, it contains custom {{w|JavaScript}} code to perform the desired operation.  The easiest way to create a bookmarklet in your browser is to first create a normal bookmark/favorite for any webpage, then ''edit'' that new bookmark to paste in the JavaScript code as the new "location"/"URL"/"address" of the bookmark.  General instructions for creating and editing bookmarks in various web browsers are as follows:
* [https://support.mozilla.org/kb/bookmarks-firefox Mozilla Firefox]
* [https://support.google.com/chrome/answer/188842 Google Chrome]
* [https://support.apple.com/guide/safari/sfri22092/mac Apple Safari]

Select one of the JavaScript code snippets below to copy/paste as the bookmarklet's URL/location.  To use it, browse to an xkcd.com comic webpage, then while on that page, invoke the bookmark/favorite.

These have been tested in {{w|Firefox}} 80, {{w|Google Chrome|Chrome}} 85, {{w|Microsoft Edge|Edge}} 85, {{w|Opera (web browser)|Opera}} 71, and {{w|Safari (web browser)|Safari}} 13.

=== Concise ===

These "concise" bookmarklets are shorter and easier to read one-liners, and should mostly work OK, but might produce errors if used on webpages other than xkcd comics.

'''Same tab:'''

<pre>
javascript:location.hostname='explainxkcd.com'
</pre>

'''New tab/window:'''

<pre>
javascript:void open(location.href.replace('xkcd.com','explainxkcd.com'))
</pre>

=== Verbose ===

These "verbose" bookmarklets are longer and harder to read (as they also validate that you are, in fact, on an xkcd.com comic page before attempting to load the corresponding explanation page), but they are technically more "correct".  Note that each of these is a single line of code, despite any word-wrapping.

'''Same tab:'''

<pre>
javascript:(function() { "use strict"; const isXkcdDotCom = (window.location.hostname === "xkcd.com"); const isComicPage = (new RegExp(/^\/$|^\/\d+\/$/).test(window.location.pathname)); if (isXkcdDotCom && isComicPage) { window.location.hostname = "explainxkcd.com"; } else { window.alert("The current page does not appear to be an xkcd comic page."); } }());
</pre>

'''New tab/window:'''

<pre>
javascript:(function() { "use strict"; const isXkcdDotCom = (window.location.hostname === "xkcd.com"); const isComicPage = (new RegExp(/^\/$|^\/\d+\/$/).test(window.location.pathname)); if (isXkcdDotCom && isComicPage) { const newLocation = new URL(window.location.href); newLocation.hostname = "explainxkcd.com"; window.open(newLocation.href, "_blank"); } else { window.alert("The current page does not appear to be an xkcd comic page."); } }());
</pre>

Code explanation:

<pre>
javascript:

// As a best practice, encapsulate everything within a self-invoking function,
// to not interfere with the global namespace of the current page.
(function() {
  "use strict";
  // Develop in "strict" mode, to be more picky.

  // Check if we're at exactly the root domain of xkcd.com,
  // no "www" (which redirects to the root domain anyway), and no subdomains.
  // Also no need to worry about the protocol,
  // as both xkcd.com and explainxkcd.com redirect from HTTP to HTTPS.
  const isXkcdDotCom = (window.location.hostname === "xkcd.com");

  // Check if we're on a comic page.
  // The path for a comic will be either the root of the site ("/") for the current comic,
  // or a numbered page ("/123/").
  const isComicPage = (new RegExp(/^\/$|^\/\d+\/$/).test(window.location.pathname));

  // The above regular expression is explained as follows:
  // / = begin regex.
  //     ^  = match the beginning of the string (i.e. require it to be the first thing in the path).
  //     \/ = match a forward-slash (must be escaped with a back-slash).
  //     $  = match the end of the string (i.e. require it to be the last thing in the path).
  //   | = match EITHER the regex above (i.e. the root path), OR the regex below (i.e. a comic number).
  //     ^  = match the beginning of the string (i.e. require it to be the first thing in the path).
  //     \/ = match a forward-slash (must be escaped with a back-slash).
  //     \d = match a decimal digit.
  //     +  = match ONE OR MORE of the preceding item (i.e. one or more decimal digits).
  //     \/ = match a forward-slash (must be escaped with a back-slash).
  //     $  = match the end of the string (i.e. require it to be the last thing in the path).
  // / = end regex.

  if (isXkcdDotCom && isComicPage) {
    // Yes, we're on a valid comic page at xkcd.com,
    // so navigate to the corresponding page at explainxkcd.com.

    // Get a copy of the current URL, ...
    const newLocation = new URL(window.location.href);

    // ...set its domain to explainxkcd.com...
    newLocation.hostname = "explainxkcd.com";

    // ...and open it in a new tab/window by specifying the target as "_blank".
    window.open(newLocation.href, "_blank");

    // For the xkcd.com site root (which is the most recent comic),
    // this will take us to the main page at explainxkcd.com,
    // which also has the explanation for the most recent comic.

    // For numbered comic pages, this will navigate to explainxkcd.com/<number>/,
    // which redirects to the correct page for that comic number.

  } else {
    // We're not on a comic page at xkcd.com,
    // so show an error message instead of navigating to explainxkcd.com.
    window.alert("The current page does not appear to be an xkcd comic page.");
  }
}());
</pre>
[[208: Regular Expressions|Tap, tap, PERL!]]

Inspired by the following suggestions:
* [https://gist.github.com/jeffalexander/4735750 gist.github.com/jeffalexander/xkcd-show-image-title-bookmarklet.js] (March 2013)
* [https://gist.github.com/sheabunge/6043015 gist.github.com/sheabunge/explainxkcd.js] (July 2013)
* [[explain xkcd:Community portal/Technical#Bookmarklet for jumping to explainxkcd.com from xkcd.com]], from [[User:Mattflaschen|Mattflaschen]] (August 2013)
* [https://github.com/kAbhi/explainxkcd github.com/kAbhi/explainxkcd] (December 2014)
* [[explain xkcd:Community portal/Miscellaneous#Bookmarklet]], from [[Special:Contributions/108.162.229.100|108.162.229.100]] (January 2015)
* [https://gist.github.com/ClarSco/74c7c5548ff3f99a3f242ff94e49869a gist.github.com/ClarSco/explainXkcdBookmarklet.js] (July 2017)
* [[Talk:Main Page#Bookmark]], from [[Special:Contributions/172.68.47.84|172.68.47.84]] (December 2018)
* [[explain xkcd:Community portal/Proposals#Add bookmark]], from [[User:Kwonunn|Kwonunn]] (May 2019)

[[Category:Meta]]
{{xkcdmeta}}