{
  "$type": "site.standard.document",
  "path": "/xkcd-substitutions-chrome-extension/",
  "publishedAt": "2016-01-08T21:03:25.000Z",
  "site": "at://did:plc:6gssgguzeecdttuw4gpdshg2/site.standard.publication/self",
  "tags": [
    "xkcd",
    "javascript",
    "chrome"
  ],
  "textContent": "XKCD was at it again with another funny substitutions comic.\n\n[Image: substitutions_2.png]\n\nI figured it would be fun to create a Chrome extension that does this. Truth be told there are already a ton of extenstions that do this in the Chrome Store. XKCD even links to the most popular one: XKCD substitutions offered by alec.posney. Since there are already so many competing plugins I decided to do this:\n\n[Image: standards.png]\n\nI've never written a Chrome extension before so here we go!\n\nAfter reading over the Getting Started guide and a little of the documentation. It seemed logical to break this into two parts.\n\nA background file to keep track of the plugins state and a content script to do the substitutions. I also made a few icons to denote the plugins state and of course a manifest file that defines the plugin.\n\nFirst let's dive into manifest.json:\n\n[Embedded code (GitHub Gist)]\n\nYou can see this defines the name of and default icon of the extension. It also loads up background.js and substitutions.js, where all the work is done.\n\nIt also defines what privileges we will need when running. This plugin needs access to:\n\nThe active Chrome tab.\n\nThe ability to run a background script.\n\nAccess to storage to save the plugins state.\n\nThe first thing I got working was the ability to store the plugins state and show the correct contextual status icon. This is all handled in background.js.\n\n[Embedded code (GitHub Gist)]\n\nThe code is pretty self explanatory, when the user clicks the icon we toggle the plugins state. We save the new state to local storage and display the correct on or off icon. We also reload the webpage, this is to allow the content script to run if it needs to.\n\nNow for the fun part: substitutions.js. This the content script that does all the on page work. Content scripts do have a limited amount of permissions so I do recommend reading the documentation. In manifest.json we set our content script to run on <all_urls> on the document_idle event. This happens after page content is loaded and javascript has run.\n\n[Embedded code (GitHub Gist)]\n\nIf the plugins state is enabled the makeItBetter function is ran to do all of XKCD's replacements. It walks all the text nodes in the DOM and does a two step replace. I had started with a one step replace but it caused some issues due to \"Years ➜ Minutes\" and \"Minutes ➜ Years\".\n\nThe results are pretty amusing!\n\n[Image: Screen-Shot-2016-01-05-at-4-10-29-PM.png]\n\n[Image: Screen-Shot-2016-01-04-at-7-45-12-PM.png]\n\n[Image: Screen-Shot-2016-01-08-at-3-50-05-PM.png]\n\nMy version is here on GitHub: https://github.com/brookslyrette/chrome-xkcd-substitutions.\n\nAll credit for this being interesting or funny goes to XKCD.\n\nRead the original post with all embeds and interactive content at https://rants.broonix.ca/xkcd-substitutions-chrome-extension/",
  "title": "XKCD Substitutions [Chrome Extension]"
}