Creating a DRTC! Website Profile

Creating a new website profile is not overly complicated, but requires using some advanced Chrome tools.

  • Load the website you want to create the profile for, and find a page with comments.
  • Open the Chrome Developer Console with F12 (Windows, Linux) or Alt-Cmd-I (Mac).
  • Click the magnifying glass icon at the top-left to enter Inspect mode.
  • Highlight the comment section element as best you can one the page, and click it. This will highlight the corresponding HTML element in the Developer Console.
  • Explore the HTML elements around the selected element to choose the one that best matches the comment section.
  • Build the CSS selector that points to this element, and only this element. If the element has an id attribute, that id should be unique on the page, so you can use a # followed by the id. Here, the element's id is watch-discussion, so the correct selector is #watch-discussion. You can also see the element's CSS selector with its element type, id, and classes in the yellow box.
  • Open the page action, and click Enable.
  • Enter your section selector in the Section Selector field, and click Save.
  • Optionally, you can set a category for this site at any time. Categories are used mainly on the options page to keep website profiles organized in manageable chunks. The default is Uncategorized.
  • The page will reload. The DRTC! cover element should be in place over the comment section. Make sure it covers the whole section, and only that section, and behaves correctly. If it doesn't you can select a new element and try again.
  • Repeat the process to build a CSS selector for individual comments. This is slightly more complicated, as you want it to match more than one element, and only comment elements. If the comments have one or more class parameters, these are a good place to start.
  • Here, the element has many classes specified: class="ve oba HPa". Classes are specified in a CSS selector using a . instead of a #. You can specify elements with more than one class by putting the classes together: .ve.oba.HPa.
  • Save your comment selector in the page action, and set the mode to Individual to test it out.
  • In this case, our selector is only getting top-level comments, and no replies under them. Inspecting the replies shows that they have a different set of classes, .Ik.Wv. You can chain together multiple selectors with a comma ,, so our final comment selector becomes .ve.oba.HPa, .Ik.Wv. This will get all comment elements on YouTube.
  • When you're done, you can use the Upload button to send your new website profile to coldbrewsoftware.com to be added to a future update of DRTC! so that others can use it too!